/**
 * Компоненты кабинета (psmy-75) и мост к legacy-разметке модулей.
 * Шаблоны модулей на этом этапе не меняются, поэтому их классы (button, .fieldblock, .content-card,
 * .flex-table, .badge, .my-sites …) переводятся на токены здесь. По мере перерисовки экранов
 * (этапы 3–4) legacy-часть сокращается.
 */

/* ссылки */
/* ссылки контента; элементы оболочки (панель, строка, крошки, вкладки) задают цвет сами */
body.cabinet .cab-content a, body.cabinet .cab-content .a,
body.cabinet .pub-card a, body.cabinet .pub-card .a,
body.cabinet .modal-window a, body.cabinet .modal-window .a{
    color: var(--c-link);
    text-decoration: none;
    font-weight: 500;
    line-height: inherit;
}
/* ссылку, выглядящую кнопкой, наведение не трогает: это правило весит (0,3,2) и перебивало
   .button:hover (0,3,1), поэтому у <a class="button"> под курсором появлялось подчёркивание и
   цвет ссылки, а у соседней <button> — нет. Приём тот же, что ниже у таблиц и .cab-kv (psmy-99) */
body.cabinet .cab-content a:not(.button):hover, body.cabinet .cab-content .a:not(.button):hover,
body.cabinet .pub-card a:not(.button):hover, body.cabinet .pub-card .a:not(.button):hover,
body.cabinet .modal-window a:not(.button):hover, body.cabinet .modal-window .a:not(.button):hover{ color: var(--c-link-hover); text-decoration: underline; }
/* кнопки контента; кнопки оболочки (переключатель сайта, вкладки, бургер) описаны в shell.css и mobile.css */

/* заголовки внутри контента */
.cab-content h1, .cab-content h2, .cab-content h3, .cab-content h4{
    font-family: var(--c-font);
    color: var(--c-text);
    font-weight: 600;
    letter-spacing: -0.005em;
}
.cab-content h2, .cab-content .h2{ font-size: 16px; margin: 0 0 12px; }
.cab-content h3, .cab-content .h3{ font-size: 14px; margin: 0 0 8px; line-height: 1.4; }
.cab-content p{ margin: 0 0 12px; }

/* кнопки */
body.cabinet button:not(.cab-ctl),
body.cabinet .button:not(.cab-ctl){
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: var(--c-ctl);
    height: var(--c-ctl);
    padding: 0 14px;
    box-sizing: border-box;
    border-radius: var(--c-r);
    border: 1px solid var(--c-line-2);
    background: var(--c-surface);
    color: var(--c-text);
    font-family: var(--c-font);
    font-size: var(--c-fs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
body.cabinet button:not(.cab-ctl):hover, body.cabinet .button:hover{ background: var(--c-surface-2); border-color: var(--c-text-4); text-decoration: none; color: var(--c-text); }
body.cabinet button:not(.cab-ctl):focus-visible, body.cabinet .button:focus-visible{ outline: none; box-shadow: var(--c-focus); }
body.cabinet button.primary, body.cabinet .button.primary,
body.cabinet button.button-primary, body.cabinet .button.button-primary{
    background: var(--c-ink);
    border-color: var(--c-ink);
    color: #FFFFFF;
}
body.cabinet button.primary:hover, body.cabinet .button.primary:hover,
body.cabinet button.button-primary:hover, body.cabinet .button.button-primary:hover{ background: var(--c-ink-2); border-color: var(--c-ink-2); color: #FFFFFF; }
body.cabinet button.accent, body.cabinet .button.accent{
    background: var(--c-ink-2);
    border-color: var(--c-ink-2);
    color: #FFFFFF;
}
body.cabinet button.accent:hover, body.cabinet .button.accent:hover{ background: var(--c-ink-3); border-color: var(--c-ink-3); color: #FFFFFF; }
body.cabinet button.brand, body.cabinet .button.brand{
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-ink);
}
body.cabinet button.brand:hover, body.cabinet .button.brand:hover{ background: #D97706; border-color: #D97706; color: var(--c-ink); }
/* уведомление страницы: первым элементом контента, с действием справа */
.cab-alert{ display: flex; align-items: center; gap: 12px; margin: 0 0 var(--c-gap); padding: 10px 16px; border-radius: var(--c-r-l); font-size: var(--c-fs); line-height: 1.45; }
.cab-alert > span:not(.cab-alert__action){ flex: 1 1 auto; min-width: 0; }
.cab-alert .cab-ico{ flex-shrink: 0; }
.cab-alert__action{ flex: 0 0 auto; display: inline-flex; margin-left: auto; }
.cab-alert--info{ background: var(--c-info-soft); color: var(--c-info-text); }
.cab-alert--warn{ background: var(--c-warn-soft); color: var(--c-accent-text); }
.cab-alert--ok{ background: var(--c-ok-soft); color: var(--c-ok-text); }
.cab-alert--bad{ background: var(--c-bad-soft); color: var(--c-bad-text); }
/* причина блокировки/отключения из заявки администратора — отдельной строкой под текстом */
.cab-alert__reason{ display: block; margin-top: 4px; }
body.cabinet .cab-alert .button{ background: var(--c-surface); }

/* форма адреса сайта (DomainFormWidget): переключатель, панели, поле с суффиксом домена, блок NS */
.cab-domform{ display: flex; flex-direction: column; gap: 14px; }
.cab-domform.hidden{ display: none; }
.cab-domform__panel{ display: none; flex-direction: column; gap: 12px; }
.cab-domform:has(#domain-type-general:checked) .cab-domform__panel--general,
.cab-domform:has(#domain-type-personal:checked) .cab-domform__panel--personal{ display: flex; }
.cab-domform .fieldblock{ margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cab-domform .fieldblock > label{ font-size: var(--c-fs-caps); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-2); }
.cab-domform .fieldblock-error:empty{ display: none; }
.cab-domform .fieldblock-error{ font-size: var(--c-fs-xs); color: var(--c-bad-text); }
.cab-domform .fieldblock, .cab-domform .fieldblock-text{ width: 100%; max-width: none; }
.cab-domform__joined{ display: flex; align-items: stretch; width: 100%; height: var(--c-ctl); border: 1px solid var(--c-line-2); border-radius: var(--c-r); background: var(--c-surface); overflow: hidden; }
.cab-domform__joined:focus-within{ box-shadow: var(--c-focus); border-color: var(--c-ink); }
/* рамку и фокус рисует обёртка, у самого поля их нет (правила движка для input специфичнее — поэтому !important) */
body.cabinet .cab-domform .cab-domform__joined input.fieldblock-text,
body.cabinet .cab-domform .cab-domform__joined input.fieldblock-text:focus,
body.cabinet .cab-domform .cab-domform__joined input.fieldblock-text:focus-visible{ flex: 1; width: auto; min-width: 0; height: auto; margin: 0; padding: 0 12px; border: none !important; border-radius: 0; box-shadow: none !important; outline: none !important; background: transparent; font-family: var(--c-mono) !important; font-size: var(--c-fs-mono); }
.cab-domform__suffix{ display: inline-flex; align-items: center; padding: 0 10px; background: var(--c-surface-2); border-left: 1px solid var(--c-line-2); color: var(--c-text-2); white-space: nowrap; }
body.cabinet .cab-domform__suffix select{ height: auto; min-height: 0; padding: 0; border: none; background: transparent; box-shadow: none; font-family: var(--c-mono); font-size: var(--c-fs-mono); color: var(--c-text-2); cursor: pointer; }
.cab-domform__ns{ display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--c-r); background: var(--c-info-soft); font-size: var(--c-fs-s); color: var(--c-info-text); }
.cab-domform__ns .cab-caps{ color: var(--c-info-text); opacity: .8; }

/* модалки кабинета: вступительный абзац и подвал с подписью слева и кнопками справа */
body.cabinet .cab-modal .modal-window{ width: 560px; max-width: calc(100vw - 24px); }
body.cabinet .cab-modal .modal-window-body{ display: flex; flex-direction: column; gap: 16px; }
.cab-modal-intro{ margin: 0; color: var(--c-text-2); }
body.cabinet .cab-modal .modal-window-footer{ justify-content: space-between; align-items: center; background: var(--c-surface-2); }
.cab-modal-foot__note{ font-size: var(--c-fs-s); color: var(--c-text-3); }
.cab-modal-foot__actions{ display: inline-flex; gap: 8px; margin-left: auto; }

/* форма покупки публикации (cart/buyOneClick) внутри модалки виджета */
body.cabinet .cab-buy{ display: flex; flex-direction: column; gap: 16px; }
body.cabinet .cab-buy form{ display: flex; flex-direction: column; gap: 16px; }
body.cabinet .cab-buy form > .fieldblock-hidden{ display: none; } /* скрытые поля не должны занимать место в gap */
body.cabinet .cab-buy .error{ color: var(--c-bad-text); font-size: var(--c-fs-s); }

/* бейдж категории у названия услуги */
.cab-badge{ display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--c-r-s); border: 1px solid var(--c-line); background: var(--c-surface-2); color: var(--c-text-3); font-size: var(--c-fs-caps); font-weight: 600; white-space: nowrap; }
/* каталог услуг (направление B): секции по категориям, карточки услуг с изображением товара и шкалой использования */
.cab-stack--sections{ gap: 24px; }
.cab-sec{ display: flex; flex-direction: column; gap: 12px; }
.cab-sec__head{ display: flex; align-items: baseline; gap: 10px; }
.cab-sec__title{ margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.cab-sec__count{ font-size: var(--c-fs-xs); color: var(--c-text-4); }
.cab-tiles{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cab-tile, body.cabinet .cab-content a.cab-tile{ position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--c-r-l); box-shadow: var(--c-shadow); color: var(--c-text); text-decoration: none; transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; }
body.cabinet .cab-content a.cab-tile:hover{ border-color: var(--c-line-2); box-shadow: 0 6px 16px rgba(31, 41, 51, 0.08); transform: translateY(-1px); color: var(--c-text); text-decoration: none; }
.cab-tile__head{ display: flex; align-items: center; gap: 10px; min-width: 0; }
.cab-tile__ico{ display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--c-r-l); background: var(--tile-bg, var(--c-surface-2)); flex-shrink: 0; color: var(--c-text-2); }
.cab-tile__ico img{ width: 22px; height: 22px; object-fit: contain; }
.cab-tile__ico .cab-ico{ width: 18px; height: 18px; }
.cab-tile__ico--l{ width: 56px; height: 56px; border-radius: 14px; }
.cab-tile__ico--l img{ width: 32px; height: 32px; }
.cab-tile__name{ flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.cab-tile__badge{ display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-ok-soft); color: var(--c-ok-text); flex-shrink: 0; align-self: flex-start; }
.cab-tile__badge .cab-ico{ width: 13px; height: 13px; stroke-width: 2.2; }
.cab-tile__usage{ display: flex; flex-direction: column; gap: 5px; }
.cab-tile__usage-top{ display: flex; justify-content: space-between; gap: 8px; font-size: var(--c-fs-xs); color: var(--c-text-3); }
.cab-tile__usage-top .cab-mono{ color: var(--c-text-4); }
.cab-tile__usage-top .cab-mono b{ font-weight: 500; color: var(--c-text); }
.cab-tile__usage--warn .cab-bar > i{ background: var(--c-warn); }
.cab-tile__usage--bad .cab-bar > i{ background: var(--c-bad); }
.cab-tile__state{ min-height: 29px; font-size: var(--c-fs-xs); color: var(--c-text-3); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cab-tile__foot{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--c-line); }
.cab-tile__price{ font-family: var(--c-mono); font-size: var(--c-fs-s); font-weight: 500; white-space: nowrap; }
.cab-tile__price small{ font-family: var(--c-font); font-weight: 400; font-size: var(--c-fs-xs); color: var(--c-text-3); }
.cab-tile__more{ display: inline-flex; align-items: center; gap: 6px; font-size: var(--c-fs-caps); color: var(--c-text-4); white-space: nowrap; }
/* усі сайти: плитки сайтов (psmy-78) — три в ряд, адрес и статус сверху, подписки и кнопки в подвале */
.cab-tiles--sites{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cab-tile__head--top{ align-items: flex-start; }
.cab-tile__head--top .cab-tile__addr{ flex: 1; }
/* иконка состояния сайта в тоне статуса */
.cab-tile__ico--ok{ background: var(--c-ok-soft); color: var(--c-ok-text); }
.cab-tile__ico--warn{ background: var(--c-warn-soft); color: var(--c-accent-text); }
.cab-tile__ico--bad{ background: var(--c-bad-soft); color: var(--c-bad-text); }
.cab-tile__ico--mute{ background: var(--c-line); color: var(--c-text-2); }
.cab-tile--blocked .cab-tile__ico--bad{ background: #FFFFFF; }
.cab-tile--deleting .cab-tile__ico--warn{ background: #FFFFFF; }
.cab-tile__addr, body.cabinet .cab-content a.cab-tile__addr{ display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--c-text); text-decoration: none; }
body.cabinet .cab-content a.cab-tile__addr:hover .cab-tile__name{ color: var(--c-link); }
.cab-tile--site .cab-tile__name{ display: block; font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; }
/* під адресою — системное имя и статус в одну строку; статус иконкой-точкой */
.cab-tile__sub{ display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.cab-tile__sub .cab-dot{ flex-shrink: 0; font-size: var(--c-fs-caps); }
.cab-tile__sys{ font-size: var(--c-fs-caps); color: var(--c-text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab-tile__meta{ font-size: var(--c-fs-xs); color: var(--c-text-3); line-height: 1.45; }
.cab-tile__actions{ display: inline-flex; gap: 6px; flex-shrink: 0; }
.cab-tile--blocked{ background: var(--c-bad-soft); border-color: #FECACA; }
.cab-tile--blocked .cab-tile__foot{ border-top-color: #FECACA; }
.cab-tile--blocked .cab-tile__meta{ color: var(--c-bad-text); }
.cab-tile--deleting{ background: var(--c-accent-soft); border-color: #FDE68A; }
/* заявка на создание (psmy-93): та же янтарная подача, что у удаления — ожидание, а не сбой */
.cab-tile--creating{ background: var(--c-accent-soft); border-color: #FDE68A; }
.cab-tile--creating .cab-tile__foot{ border-top-color: #FDE68A; }
.cab-tile--creating .cab-tile__ico--warn{ background: #FFFFFF; }
.cab-tile--deleting .cab-tile__foot{ border-top-color: #FDE68A; }
/* сайт без оплаченной публикации (psmy-98): рамка янтарная, фон нейтральный —
   сплошная заливка занята состояниями «створюється», «видаляється», «заблокований» */
.cab-tile--unpublished{ border-color: #FDE68A; }
.cab-tile--unpublished .cab-tile__foot{ border-top-color: #FDE68A; }
/* строка сайта в модалке кнопки «Додати сайт» (psmy-98) */
.cab-svcm__site{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--c-line); }
.cab-svcm__site:first-of-type{ border-top: none; }
.cab-svcm__site-addr{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.cab-tile--new, body.cabinet .cab-content a.cab-tile--new{ align-items: center; justify-content: center; text-align: center; gap: 8px; border-style: dashed; background: transparent; box-shadow: none; color: var(--c-text-3); }
body.cabinet .cab-content a.cab-tile--new:hover{ color: var(--c-text); border-color: var(--c-line-2); background: var(--c-surface); }
.cab-tile--new.is-off{ opacity: .6; cursor: not-allowed; }
.cab-tile__plus{ display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-surface-2); color: var(--c-text-3); }
.cab-tile__plus .cab-ico{ width: 18px; height: 18px; }
.cab-tile--new .cab-tile__name{ color: var(--c-text); }
/* публикация без публичного адреса — акцентная карточка стандартного размера с кнопкой подключения домена */
.cab-tile--featured{ background: linear-gradient(160deg, var(--c-accent-soft) 0%, var(--c-surface) 70%); border-color: #FDE68A; }
.cab-tile__link, body.cabinet .cab-content a.cab-tile__link{ display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; color: var(--c-text); text-decoration: none; }
body.cabinet .cab-content a.cab-tile__link:hover{ color: var(--c-text); text-decoration: none; }
.cab-tile--featured .cab-tile__ico{ background: var(--c-accent); color: var(--c-ink); }
.cab-tile__text{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cab-tile__teaser{ font-size: var(--c-fs-xs); color: var(--c-text-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cab-tile__side{ display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid #FDE68A; }
body.cabinet .cab-tile__side .button{ width: 100%; justify-content: center; }
/* карточка услуги: в модалке serviceModal и на странице услуги */
body.cabinet .cab-svc-modal .modal-window-body{ padding: 0; gap: 0; }
/* занятое состояние контейнера: содержимое приглушено, по центру спиннер; высота удерживается скриптом */
.cab-busy{ position: relative; pointer-events: none; }
.cab-busy > *{ opacity: .45; transition: opacity 120ms ease; }
.cab-busy::after{ content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 2px solid var(--c-line-2); border-top-color: var(--c-ink); border-radius: 50%; animation: cab-spin .7s linear infinite; }
@keyframes cab-spin{ to{ transform: rotate(360deg); } }
.cab-svcm--loading{ min-height: 180px; background: var(--c-surface) linear-gradient(90deg, transparent, rgba(31,41,51,.05), transparent) no-repeat; background-size: 40% 100%; animation: cab-shimmer 1s infinite linear; }
@keyframes cab-shimmer{ from{ background-position: -40% 0; } to{ background-position: 140% 0; } }
.cab-svcm__body{ display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.cab-svc-card .cab-svcm__body{ padding: 16px; }
.cab-svcm__desc{ margin: 0; color: var(--c-text-2); }
.cab-prose{ line-height: 1.55; }
.cab-prose p{ margin: 0; }
.cab-prose p + p, .cab-prose p + ul, .cab-prose ul + p{ margin-top: 10px; }
.cab-prose ul{ margin: 0; padding-left: 18px; }
/* оси выбора: объём и период */
.cab-axis{ display: flex; flex-direction: column; gap: 8px; }
.cab-opts{ display: flex; flex-wrap: wrap; gap: 6px; }
.cab-opt, body.cabinet .cab-content .cab-opt, body.cabinet .modal-window .cab-opt{ display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; border: 1px solid var(--c-line-2); border-radius: var(--c-r); background: var(--c-surface); color: var(--c-text); font-size: var(--c-fs-s); font-weight: 600; white-space: nowrap; text-decoration: none; }
.cab-opt:hover, body.cabinet .cab-content .cab-opt:hover, body.cabinet .modal-window .cab-opt:hover{ border-color: var(--c-ink); color: var(--c-text); text-decoration: none; }
body.cabinet button.cab-opt{ min-height: 32px; font-family: inherit; line-height: 1; cursor: pointer; }
.cab-opt.is-active, body.cabinet .modal-window .cab-opt.is-active{ background: var(--c-ink); border-color: var(--c-ink); color: #FFFFFF; }
.cab-opt.is-off, body.cabinet .modal-window .cab-opt.is-off{ background: var(--c-surface-2); border-color: var(--c-line); color: var(--c-text-4); text-decoration: line-through; cursor: not-allowed; }
/* карточка подписки в модалке */
.cab-svcm__lead{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cab-svcm__name{ font-weight: 600; }
.cab-svcm__muted{ color: var(--c-text-3); }
.cab-svcm form{ display: contents; }
/* что меняется для сайта */
.cab-svcm__changes{ display: flex; flex-direction: column; }
.cab-svcm__changes .cab-caps{ padding-bottom: 6px; }
.cab-svcm__change{ display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; border-top: 1px solid var(--c-line); color: var(--c-text-2); }
.cab-svcm__change .cab-mono{ color: var(--c-text); font-weight: 500; }
/* подвал: цена и кнопки */
.cab-svcm__foot{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--c-line); background: var(--c-surface-2); }
.cab-svc-card .cab-svcm__foot{ border-radius: 0 0 var(--c-r-l) var(--c-r-l); }
/* на странице (не в модалке) закрывать нечего; селектор не короче правила кнопок кабинета, иначе оно перебивает */
body.cabinet .cab-svc-card [data-cab-modal-close]{ display: none; }
.cab-svcm__total{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cab-svcm__actions{ display: flex; gap: 8px; flex-shrink: 0; }
.cab-price{ display: flex; align-items: baseline; gap: 8px; }
.cab-price__value{ font-size: 20px; font-weight: 500; line-height: 1.1; }
.cab-price__period{ color: var(--c-text-3); }
/* ссылка назад: к списку услуг и к выбору варианта в модалке */
.cab-back, body.cabinet .cab-content .cab-back, body.cabinet .modal-window .cab-back{ display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: var(--c-fs-s); font-weight: 600; color: var(--c-text-2); text-decoration: none; }
.cab-back:hover, body.cabinet .cab-content .cab-back:hover, body.cabinet .modal-window .cab-back:hover{ color: var(--c-text); text-decoration: none; }
.cab-back__ico{ transform: rotate(180deg); }
.cab-svcm__back{ margin: 16px 16px 0; }
.cab-svcm__back::before{ content: '‹'; font-size: 16px; line-height: 1; }
/* форма покупки в модалке: тело с отступами, подвал — общий с карточкой услуги (.cab-svcm__foot) */
body.cabinet .cab-buy{ gap: 0; }
body.cabinet .cab-buy form{ gap: 0; }
.cab-buy__body{ display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.cab-buy__body > .fieldblock-hidden{ display: none; }
.cab-svcm__total .cab-hint b{ font-weight: 600; color: var(--c-text-2); }
body.cabinet .cab-buy .cab-svcm__actions .button.brand[disabled]{ opacity: .5; }
/* залитая опасная кнопка: удаление сайта */
body.cabinet button.danger-fill, body.cabinet .button.danger-fill{ background: var(--c-bad); border-color: var(--c-bad); color: #FFFFFF; }
body.cabinet button.danger-fill:hover, body.cabinet .button.danger-fill:hover{ background: var(--c-bad-text); border-color: var(--c-bad-text); color: #FFFFFF; }
body.cabinet button.warn, body.cabinet .button.warn,
body.cabinet button.danger, body.cabinet .button.danger{
    background: var(--c-surface);
    border-color: #FECACA;
    color: var(--c-bad-text);
}
body.cabinet button.warn:hover, body.cabinet .button.warn:hover,
body.cabinet button.danger:hover, body.cabinet .button.danger:hover{ background: var(--c-bad-soft); border-color: var(--c-bad); color: var(--c-bad-text); }
/* погашенная кнопка не меняется под курсором: правило наведения .button.primary:hover весит (0,4,1)
   и перебивало бы правило ниже (0,3,2), поэтому состояния с :hover перечислены здесь же (psmy-99) */
body.cabinet button:not(.cab-ctl):disabled, body.cabinet .button.disabled,
body.cabinet button:not(.cab-ctl):disabled:hover, body.cabinet .button.disabled:hover{
    background: var(--c-surface-2);
    border-color: var(--c-line);
    color: var(--c-text-4);
    cursor: not-allowed;
    box-shadow: none;
}
body.cabinet button.button-medium, body.cabinet .button.button-medium{ height: var(--c-ctl-s); min-height: var(--c-ctl-s); padding: 0 10px; font-size: var(--c-fs-s); }
body.cabinet button.button-small, body.cabinet .button.button-small{ height: 26px; min-height: 26px; padding: 0 8px; font-size: var(--c-fs-xs); }
body.cabinet button.a, body.cabinet .button.a{ border: none; background: none; height: auto; min-height: 0; padding: 0; color: var(--c-link); font-weight: 500; }
body.cabinet button i, body.cabinet .button i{ font-size: 13px; line-height: 1; }
body.cabinet .expand-button{ background: transparent; border: none; box-shadow: none; }

/* поля */
body.cabinet input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not(.cab-ctl),
body.cabinet select,
body.cabinet textarea,
body.cabinet .content-preview{
    min-height: var(--c-ctl);
    height: var(--c-ctl);
    padding: 0 12px;
    box-sizing: border-box;
    border-radius: var(--c-r);
    border: 1px solid var(--c-line-2);
    background: var(--c-surface);
    color: var(--c-text);
    font-family: var(--c-font);
    font-size: var(--c-fs);
    line-height: calc(var(--c-ctl) - 2px);
    font-weight: 400;
    max-width: 100%;
}
body.cabinet textarea, body.cabinet .content-preview{ height: auto; min-height: 88px; padding: 8px 12px; line-height: var(--c-lh); resize: vertical; }
body.cabinet select{ padding-right: 32px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B8794' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; }
body.cabinet input:focus, body.cabinet select:focus, body.cabinet textarea:focus{ outline: none; border-color: var(--c-ink); box-shadow: var(--c-focus); }
body.cabinet input::placeholder, body.cabinet textarea::placeholder{ color: var(--c-text-4); }
body.cabinet input[type=checkbox], body.cabinet input[type=radio]{ width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--c-ink); }
body.cabinet input.input-medium, body.cabinet select.input-medium{ height: var(--c-ctl-s); min-height: var(--c-ctl-s); line-height: 28px; padding: 0 10px; }

/* fieldblock (FieldblockWidget движка) */
body.cabinet .fieldblock{ margin: 0 0 14px; gap: 6px; }
body.cabinet .fieldblock > label,
body.cabinet .fieldblock > .fieldblock-label-block{ margin: 0; font-size: var(--c-fs-s); font-weight: 600; line-height: 1.3; color: var(--c-ink-3); }
body.cabinet .fieldblock.fieldblock-required > label::after{ color: var(--c-bad); }
body.cabinet .fieldblock > input:not([type=checkbox]):not([type=radio]), body.cabinet .fieldblock > select, body.cabinet .fieldblock > textarea{ width: 100%; }
body.cabinet .fieldblock.fieldblock-horizontal > label{ line-height: var(--c-ctl); }
body.cabinet .fieldblock.fieldblock-checkbox{ flex-direction: row; align-items: center; gap: 10px; }
body.cabinet .fieldblock.fieldblock-checkbox label{ margin: 0; font-weight: 400; color: var(--c-text); }
body.cabinet .fieldblock-has-error input, body.cabinet .fieldblock-has-error select, body.cabinet .fieldblock-has-error textarea{ border-color: var(--c-bad); }
body.cabinet .fieldblock-has-error .fieldblock-error{ position: static; font-size: var(--c-fs-xs); font-weight: 500; color: var(--c-bad-text); }
/* иконка показа пароля (FieldblockWidget движка): по высоте поля, рисуется svg по data-state (ставит cabinet.js):
   скрыт — глаз перечёркнут, видно — обычный глаз; иконка Font Awesome из шаблона скрыта */
body.cabinet .fieldblock{ position: relative; }
body.cabinet .fieldblock .toggle-password{
    position: absolute; top: auto; bottom: 0; right: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    width: var(--c-ctl); height: var(--c-ctl); border-radius: var(--c-r); opacity: 0.6; cursor: pointer; color: var(--c-text-2);
    background-repeat: no-repeat; background-position: center; background-size: 18px 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23616E7C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3l18 18'/><path d='M10.6 10.6a2 2 0 0 0 2.8 2.8'/><path d='M9.9 5.2A10.5 10.5 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-3.2 4.1'/><path d='M6.6 6.6C3.7 8.6 2 12 2 12s3.5 7 10 7c1.4 0 2.7-.3 3.8-.8'/></svg>");
}
body.cabinet .fieldblock .toggle-password[data-state="visible"]{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23616E7C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='2.5'/></svg>");
}
body.cabinet .fieldblock .toggle-password i{ display: none; }
body.cabinet .fieldblock .toggle-password:hover{ opacity: 1; }
body.cabinet .fieldblock .toggle-password ~ input{ padding-right: var(--c-ctl); }
body.cabinet .fieldblock-has-error .toggle-password{ bottom: 20px; }
body.cabinet .fieldblock-buttons{ margin: 6px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
body.cabinet .form-errors-wrap, body.cabinet .form-error-details{ display: none; }
body.cabinet .error-message, body.cabinet .warning-message,
body.cabinet .success-message, body.cabinet .info-message,
body.cabinet .message.error, body.cabinet .message.success{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 0 0 var(--c-gap);
    border-radius: var(--c-r);
    font-size: var(--c-fs-s);
    font-weight: 500;
}
body.cabinet .error-message, body.cabinet .warning-message, body.cabinet .message.error{ background: var(--c-bad-soft); border: 1px solid #FECACA; color: var(--c-bad-text); }
body.cabinet .success-message, body.cabinet .message.success{ background: var(--c-ok-soft); border: 1px solid #99F6E4; color: var(--c-ok-text); }
body.cabinet .info-message{ background: var(--c-accent-soft); border: 1px solid #FDE68A; color: var(--c-accent-text); }
body.cabinet .error-message:empty, body.cabinet .success-message:empty{ display: none; }

/* длинные строки (логи, адреса) переносятся, а не растягивают страницу */
body.cabinet .cab-content, body.cabinet .pub-card__body{ overflow-wrap: anywhere; }
body.cabinet .cab-content pre{ white-space: pre-wrap; word-break: break-all; }

/* карточки (content-card движка) */
body.cabinet .content-card{
    margin: 0 0 var(--c-gap);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--c-r-l);
    box-shadow: none;
    color: var(--c-text);
}
body.cabinet .content-card .content-card-header,
body.cabinet .content-card.compact .content-card-header{
    min-height: 44px;
    padding: 10px 16px;
    gap: 12px;
    background: transparent;
    border-bottom: 1px solid var(--c-line);
    border-radius: var(--c-r-l) var(--c-r-l) 0 0;
    color: var(--c-text);
}
body.cabinet .content-card .content-card-header .main-title{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body.cabinet .content-card .content-card-title,
body.cabinet .content-card .content-card-header .section-title,
body.cabinet .content-card.compact .content-card-header .section-title{
    margin: 0;
    font-size: var(--c-fs);
    line-height: 1.3;
    font-weight: 600;
    color: var(--c-text);
}
body.cabinet .content-card .content-card-subtitle{ margin: 0; font-size: var(--c-fs-xs); color: var(--c-text-3); }
body.cabinet .content-card .content-card-title + .content-card-subtitle{ margin-top: 2px; }
body.cabinet .content-card > .content-wrapper,
body.cabinet .content-card.compact .content-wrapper,
body.cabinet .content-wrapper{ padding: 16px; overflow: visible; min-height: 0; }
body.cabinet .content-wrapper > .stretch-content-wrapper{ margin-left: -16px; margin-right: -16px; }
body.cabinet .content-card .content-card-footer,
body.cabinet .content-card.compact .content-card-footer{ position: static; padding: 10px 16px; border-top: 1px solid var(--c-line); border-radius: 0 0 var(--c-r-l) var(--c-r-l); }
body.cabinet .content-card.form-message{ border: none; background: transparent; }
body.cabinet .content-card.form-message > .content-wrapper{ padding: 0; }
body.cabinet .content-card.warn-style-colors{ background: var(--c-bad-soft) !important; color: var(--c-bad-text) !important; border-color: #FECACA; }
body.cabinet .content-card.warn-light-style-colors{ background: var(--c-accent-soft) !important; color: var(--c-accent-text) !important; border-color: #FDE68A; }
body.cabinet .divider{ border-top: 1px solid var(--c-line); }
body.cabinet .row{ display: flex; align-items: center; gap: 12px; }
body.cabinet .row.row-space-between{ justify-content: space-between; }

/* flex-table движка */
body.cabinet .flex-table{ font-size: var(--c-fs); }
body.cabinet .flex-table .flex-table-title,
body.cabinet .flex-table .flex-table-subtitle{
    min-height: var(--c-thead);
    background: var(--c-surface-2);
    color: var(--c-text-3);
    font-size: var(--c-fs-caps);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
body.cabinet .flex-table .flex-table-title .flex-table-cell,
body.cabinet .flex-table .flex-table-title .flex-table-cell a{ color: var(--c-text-3); font-size: var(--c-fs-caps); font-weight: 600; }
body.cabinet .flex-table .flex-table-body .flex-table-row{ min-height: var(--c-row); border-top: 1px solid var(--c-line); }
body.cabinet .flex-table .flex-table-body .flex-table-row:hover{ background: var(--c-surface-2); }
body.cabinet .flex-table.stripped .flex-table-body .flex-table-row:nth-child(2n){ background: transparent; }
body.cabinet .flex-table .flex-table-cell{ padding: 8px 12px; }
body.cabinet .flex-table .flex-table-cell.label{ color: var(--c-text-2); }
body.cabinet .flex-table .flex-table-cell.number,
body.cabinet .flex-table .flex-table-cell.date,
body.cabinet .flex-table .flex-table-cell.price{ font-family: var(--c-mono); font-size: var(--c-fs-mono); }

/* бейджи → метки состояния */
body.cabinet .badge{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--c-r-s);
    border: none;
    background: var(--c-line);
    color: var(--c-text-2);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-transform: none;
}
body.cabinet .badge.primary, body.cabinet .badge.accent{ background: var(--c-ink); color: #FFFFFF; }
body.cabinet .badge.highlight, body.cabinet .badge.success, body.cabinet .badge.site-status-active{ background: var(--c-ok-soft); color: var(--c-ok-text); }
body.cabinet .badge.warn, body.cabinet .badge.site-status-blocked, body.cabinet .badge.site-status-deleted{ background: var(--c-bad-soft); color: var(--c-bad-text); }
body.cabinet .badge.site-status-candidate_for_deletion, body.cabinet .badge.site-status-not_published, body.cabinet .badge.pending{ background: var(--c-accent-soft); color: var(--c-accent-text); }
body.cabinet .badge.disabled{ background: var(--c-surface-2); color: var(--c-text-4); }

/* список сайтов (store/userSite front/list.html) */
body.cabinet ul.my-sites{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--c-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}
body.cabinet ul.my-sites > li{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 16px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--c-r-l);
}
body.cabinet ul.my-sites .site-title{ font-family: var(--c-mono); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
body.cabinet ul.my-sites ul.parameters{ margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
body.cabinet ul.my-sites ul.parameters li{ margin: 0; padding: 0; display: flex; flex-direction: column; font-size: var(--c-fs-xs); color: var(--c-text-2); }
body.cabinet ul.my-sites ul.parameters .value{ font-family: var(--c-mono); font-size: var(--c-fs-mono); color: var(--c-text); }
body.cabinet ul.my-sites > li > .button{ margin-top: auto; align-self: stretch; }
body.cabinet .main-wrapper > .text-center{ padding: 32px 16px; color: var(--c-text-3); }

/* пейджер */
body.cabinet .pager, body.cabinet .pager-widget{ display: flex; gap: 4px; margin: var(--c-gap) 0 0; padding: 0; list-style: none; }
body.cabinet .pager a, body.cabinet .pager span,
body.cabinet .pager-widget a, body.cabinet .pager-widget span{
    display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px;
    border-radius: var(--c-r); border: 1px solid var(--c-line-2); background: var(--c-surface); color: var(--c-text); font-size: var(--c-fs-s); font-weight: 600; text-decoration: none;
}
body.cabinet .pager .active a, body.cabinet .pager .active span,
body.cabinet .pager-widget .active a, body.cabinet .pager-widget .active span{ background: var(--c-ink); border-color: var(--c-ink); color: #FFFFFF; }

/* модальные окна движка */
body.cabinet .modal-background{ background: rgba(31, 41, 51, 0.5); }
/* окно без внутренних отступов движка (там padding 20px и margin 100px): шапка, тело и подвал сами задают отступы и тянутся на всю ширину */
body.cabinet .modal-window{ padding: 0; margin: 24px; border: none; overflow: hidden; border-radius: var(--c-r-l); background: var(--c-surface); color: var(--c-text); box-shadow: 0 24px 64px rgba(31, 41, 51, 0.24); }
body.cabinet .modal-window .modal-window-head{ margin: 0; top: 0; height: auto; min-height: 48px; padding: 10px 12px 10px 16px; background: var(--c-surface); border-bottom: 1px solid var(--c-line); box-shadow: none; }
body.cabinet .modal-window .modal-window-head .modal-window-title{ color: var(--c-text); font-size: 15px; line-height: 1.3; font-weight: 600; padding: 0; }
body.cabinet .modal-window .modal-window-buttons{ display: flex; align-items: center; }
body.cabinet .modal-window .modal-window-head button.hide-button{ position: static; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 0; min-height: 0; padding: 0; border: none; border-radius: var(--c-r-s); background: transparent; color: var(--c-text-2); font-size: 16px; line-height: 1; }
body.cabinet .modal-window .modal-window-head button.hide-button:hover{ background: var(--c-surface-2); color: var(--c-text); }
body.cabinet .modal-window-body{ margin: 0; padding: 16px; }
body.cabinet .modal-window-footer{ margin: 0; padding: 12px 16px; border-top: 1px solid var(--c-line); display: flex; gap: 8px; justify-content: flex-end; }
body.cabinet .modal-window-footer:not(:has(*)){ display: none; }
/* модалка покупки публикации (виджет магазина): та же ширина, что у модалок кабинета */

/* утилиты */
body.cabinet .text-secondary{ color: var(--c-text-2) !important; font-size: var(--c-fs-s); }
body.cabinet .text-primary{ color: var(--c-text) !important; }
body.cabinet .warn-color, body.cabinet .error{ color: var(--c-bad-text); }
body.cabinet .cab-pill{ display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--c-r-s); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
body.cabinet .cab-pill--ok{ background: var(--c-ok-soft); color: var(--c-ok-text); }
body.cabinet .cab-pill--warn{ background: var(--c-warn-soft); color: var(--c-accent-text); }
body.cabinet .cab-pill--bad{ background: var(--c-bad-soft); color: var(--c-bad-text); }
body.cabinet .cab-pill--info{ background: var(--c-info-soft); color: var(--c-info-text); }
body.cabinet .cab-pill--mute{ background: var(--c-line); color: var(--c-text-2); }
body.cabinet .cab-dot{ display: inline-flex; align-items: center; gap: 6px; font-size: var(--c-fs-xs); font-weight: 600; }
body.cabinet .cab-dot::before{ content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
body.cabinet .cab-dot--ok{ color: var(--c-ok-text); }
body.cabinet .cab-dot--warn{ color: var(--c-warn-text); }
body.cabinet .cab-dot--bad{ color: var(--c-bad-text); }
body.cabinet .cab-dot--mute{ color: var(--c-text-3); }
body.cabinet .cab-hint{ font-size: var(--c-fs-xs); color: var(--c-text-3); }
body.cabinet .cab-caps{ font-size: var(--c-fs-caps); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-3); }
body.cabinet .cab-avatar{
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 50%; background: #FDE68A; color: #78350F;
    font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; text-transform: uppercase;
}
body.cabinet .cab-avatar:hover{ text-decoration: none; color: #78350F; }

/* ===== компоненты кабинета (psmy-76): карточки, таблицы, пары «ключ — значение», заметки ===== */
.cab-head__line{ display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-width: 0; }
.cab-head__meta{ display: flex; align-items: center; gap: 12px; font-size: var(--c-fs-xs); color: var(--c-text-3); }
.cab-head__site{ font-size: var(--c-fs-h1); font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cab-head__id{ font-size: 11.5px; color: var(--c-text-3); }
.cab-head__actions .button .cab-ico{ margin-left: 2px; }

.cab-stack{ display: flex; flex-direction: column; gap: var(--c-gap); }
.cab-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--c-gap); align-items: start; }
.cab-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cab-grid--side{ grid-template-columns: minmax(0, 1fr) 360px; }
.cab-grid--nav{ grid-template-columns: 220px minmax(0, 1fr); }
.cab-span-2{ grid-column: span 2; }
/* ряд карточек одной высоты: карточка с .cab-card--fill не задаёт высоту ряда, её список прокручивается */
.cab-grid--stretch{ align-items: stretch; }
/* карточка не схлопывается, если левая колонка короткая (например, сайт без права удаления) */
.cab-card--fill{ min-height: 260px; }
.cab-card--fill .cab-card__scroll{ position: relative; flex: 1; min-height: 0; }
.cab-card--fill .cab-card__scroll > *{ position: absolute; inset: 0; overflow-y: auto; border-radius: 0 0 var(--c-r-l) var(--c-r-l); }
.cab-card--fill .cab-card__scroll > .cab-kv > .cab-kv__row:last-child{ border-bottom: none; }

.cab-card{
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--c-r-l);
}
.cab-card__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 44px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--c-line);
}
/* заголовок карточки: специфичнее общего .cab-content h2 (там margin-bottom и 16px) */
.cab-card__title, body.cabinet .cab-content .cab-card__title, body.cabinet .cab-content h2.cab-card__title{ margin: 0; font-size: var(--c-fs); line-height: 1.3; font-weight: 600; color: var(--c-text); }
.cab-card__title .cab-hint{ font-weight: 400; margin-left: 8px; }
/* тело карточки ограниченной высоты: N строк таблицы (--cab-rows, --cab-row-h) плюс шапка, дальше прокрутка */
.cab-card__scroll-y{ overflow-y: auto; max-height: calc(var(--c-thead) + var(--cab-rows, 4) * var(--cab-row-h, 52px) + 1px); border-radius: 0 0 var(--c-r-l) var(--c-r-l); }
.cab-card__scroll-y .cab-table__row--head{ position: sticky; top: 0; z-index: 1; }
.cab-card__body{ padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cab-card__body > p{ margin: 0; }
/* тело карточки одной строкой: текст слева, действие справа; на мобильном — в стек */
.cab-card__body--row{ flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.cab-card__body--row > p{ flex: 1; min-width: 0; }
.cab-card__body--row > .button{ flex-shrink: 0; }
.cab-card__foot{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--c-line); background: var(--c-surface-2); border-radius: 0 0 var(--c-r-l) var(--c-r-l); font-size: var(--c-fs-s); }
.cab-card__actions{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* таблица: строки на CSS grid, колонки задаются переменной --cab-cols на строках */
.cab-table{ display: flex; flex-direction: column; min-width: 0; }
.cab-table__row{
    display: grid;
    grid-template-columns: var(--cab-cols, minmax(0, 1fr));
    align-items: center;
    column-gap: 12px;
    min-height: var(--c-row);
    padding: 6px 16px;
    border-top: 1px solid var(--c-line);
    font-size: var(--c-fs);
}
.cab-table__row--head{ min-height: var(--c-thead); padding-top: 0; padding-bottom: 0; background: var(--c-surface-2); }
.cab-card__head + .cab-table > .cab-table__row--head,
.cab-card > .cab-table:first-child > .cab-table__row--head{ border-top: none; }
.cab-table__row--link{ color: inherit; text-decoration: none; }
.cab-table__row--link:hover{ background: var(--c-surface-2); }
.cab-table__row--foot{ background: var(--c-surface-2); color: var(--c-text-2); font-size: var(--c-fs-s); }
.cab-cell{ min-width: 0; overflow-wrap: anywhere; }
.cab-cell--right{ text-align: right; justify-self: end; }
.cab-cell--mono{ font-family: var(--c-mono); font-size: var(--c-fs-mono); font-weight: 500; }
.cab-cell--muted{ color: var(--c-text-2); }
.cab-cell--actions{ display: flex; justify-content: flex-end; gap: 6px; }
.cab-cell--stack{ display: flex; flex-direction: column; gap: 2px; }
.cab-cell--nowrap{ white-space: nowrap; }
.cab-table__row--head .cab-cell{ font-size: var(--c-fs-caps); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-3); }
.cab-table .cab-cell a:not(.button), body.cabinet .cab-content .cab-table .cab-cell a:not(.button){ color: inherit; }
.cab-table .cab-cell a:not(.button):hover, body.cabinet .cab-content .cab-table .cab-cell a:not(.button):hover{ color: var(--c-link); }

/* пары «ключ — значение» */
.cab-kv{ display: flex; flex-direction: column; }
.cab-kv__row{
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    min-height: var(--c-row);
    padding: 6px 16px;
    border-top: 1px solid var(--c-line);
}
.cab-kv__row:first-child{ border-top: none; }
/* адреса сайта: подписи короткие, колонка уже — адресу в моно-шрифте нужна ширина (только десктоп, на мобильном строки в стек) */
@media (min-width: 768px){ #site-details .cab-kv__row{ grid-template-columns: 140px minmax(0, 1fr) auto; } }
.cab-card__head + .cab-kv > .cab-kv__row:first-child{ border-top: none; }
.cab-kv__label{ font-size: var(--c-fs-caps); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-3); }
.cab-kv__value{ min-width: 0; overflow-wrap: anywhere; }
.cab-kv__check{ vertical-align: -2px; color: var(--c-ok-text); }
.cab-kv__value a:not(.button), body.cabinet .cab-content .cab-kv__value a:not(.button){ color: inherit; text-decoration: underline; text-decoration-color: var(--c-line-2); text-underline-offset: 3px; }
.cab-kv__value a:not(.button):hover, body.cabinet .cab-content .cab-kv__value a:not(.button):hover{ color: var(--c-link); text-decoration-color: currentColor; }
.cab-kv__extra{ display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
/* плотный список: подпись по содержимому, значение занимает остаток и переносится (длинная ссылка на копию в деталях заявки) */
.cab-kv--dense .cab-kv__row{ min-height: var(--c-row-dense); grid-template-columns: max-content minmax(0, 1fr); }
.cab-kv--dense .cab-kv__value{ text-align: right; }
.cab-kv--dense .cab-kv__label{ font-size: var(--c-fs); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--c-text-2); }
/* подсказка «використано X з Y» в плотном списке: мельче и бледнее названия */
.cab-kv--dense .cab-kv__label .cab-hint{ font-size: var(--c-fs-caps); color: var(--c-text-4); margin-left: 4px; }

/* мелочи */
/* полоса фильтров списка (psmy-78): поля в ряд, кнопки прижаты вправо */
.cab-filters{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 12px 16px; }
/* margin: 0 — у label в базовых стилях есть нижний отступ, из-за него поле съезжает вниз относительно соседей */
.cab-filters__f{ display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
.cab-filters__lbl{ font-size: var(--c-fs-caps); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-3); }
body.cabinet .cab-filters select{ min-width: 180px; }
.cab-filters__pair{ display: flex; align-items: center; gap: 6px; }
body.cabinet .cab-filters__pair input{ width: 148px; }
.cab-filters__actions{ display: flex; align-items: center; gap: 8px; margin-left: auto; }
.cab-filters__sum{ font-size: var(--c-fs-s); color: var(--c-text-2); }
/* подпись и сумма: отступ задаём стилями, а не пробелом в тексте. Число набрано cab-mono, где пробел
   вдвое шире (7.5px против 3.5px), и разрыв внутри числа выглядел больше, чем отступ до подписи (psmy-100) */
.cab-sum{ display: inline-flex; align-items: baseline; gap: 8px; }
.cab-sum .cab-mono{ font-weight: 600; }
/* постраничность списка: номера страниц, текущая — тёмной кнопкой */
.cab-pager{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cab-pager__gap{ padding: 0 2px; color: var(--c-text-4); }
body.cabinet .cab-pager__num{ min-width: var(--c-ctl-s); padding: 0 8px; justify-content: center; }
body.cabinet .cab-pager__num.is-current{ background: var(--c-ink); border-color: var(--c-ink); color: #FFFFFF; cursor: default; }

.cab-filters__sum b{ color: var(--c-text); font-weight: 600; }

.cab-empty{ display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; min-height: 72px; padding: 12px 16px; text-align: center; font-size: var(--c-fs); color: var(--c-text-3); border-top: 1px solid var(--c-line); }
.cab-empty a{ color: var(--c-link); font-weight: 600; }
/* сегментный переключатель режима карточки (psmy-76, лимиты на обзоре сайта): графит = «вы здесь» */
.cab-seg{ display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--c-line-2); border-radius: var(--c-r); background: var(--c-surface); }
body.cabinet .cab-seg__btn{
    display: inline-flex; align-items: center; gap: 6px;
    height: 20px; min-height: 20px; padding: 0 8px; margin: 0;
    border: none; border-radius: var(--c-r-s); background: transparent;
    font-family: var(--c-font); font-size: var(--c-fs-xs); font-weight: 600; line-height: 1; color: var(--c-text-2);
    cursor: pointer; white-space: nowrap;
}
body.cabinet .cab-seg__btn:hover{ color: var(--c-text); background: var(--c-surface-2); }
body.cabinet .cab-seg__btn:focus-visible{ outline: none; box-shadow: var(--c-focus); }
body.cabinet .cab-seg__btn[aria-selected="true"]{ background: var(--c-ink); color: #FFFFFF; }
/* вариант с радиокнопками (форма адреса): активный сегмент — по :checked, панели переключает CSS */
.cab-seg--wide{ display: flex; }
.cab-seg--wide .cab-seg__btn{ flex: 1; justify-content: center; height: 28px; min-height: 28px; font-size: var(--c-fs-s); }
body.cabinet .cab-seg__btn input[type="radio"]{ position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
body.cabinet .cab-seg__btn:has(input:checked){ background: var(--c-ink); color: #FFFFFF; }
body.cabinet .cab-seg__btn:has(input:disabled){ cursor: default; }
body.cabinet .cab-seg__btn .cab-ico{ width: 12px; height: 12px; }
/* «Розширити» в карточке лимитов: на десктопе в шапке, на мобильном — подвалом под списком */
.cab-limits__foot{ display: none; justify-content: center; }
/* использование лимитов: название и значение, шкала, остаток и процент */
.cab-usage{ display: flex; flex-direction: column; }
.cab-usage__row{ display: flex; flex-direction: column; gap: 4px; padding: 7px 16px 8px; border-top: 1px solid var(--c-line); }
.cab-usage__row:first-child{ border-top: none; }
.cab-usage__top{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cab-usage__hint{ font-size: var(--c-fs-caps); color: var(--c-text-4); margin-left: 4px; }
.cab-usage__val{ white-space: nowrap; flex-shrink: 0; }
.cab-usage__val b{ font-weight: 500; }
.cab-usage__val span{ color: var(--c-text-4); }
.cab-usage__row--warn .cab-usage__hint{ color: var(--c-warn-text); }
.cab-usage__row--bad .cab-usage__hint{ color: var(--c-bad-text); }
.cab-bar{ position: relative; height: 4px; border-radius: 2px; background: var(--c-line); overflow: hidden; }
.cab-bar > i{ position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--c-ok); }
.cab-usage__row--warn .cab-bar > i{ background: var(--c-warn); }
.cab-usage__row--bad .cab-bar > i{ background: var(--c-bad); }
.cab-note{ display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; font-size: var(--c-fs-s); line-height: 1.45; border-top: 1px solid var(--c-line); }
.cab-note .cab-ico{ margin-top: 2px; }
.cab-note--warn{ background: #FFFBEB; color: var(--c-accent-text); }
.cab-note--bad{ background: var(--c-bad-soft); color: var(--c-bad-text); }
.cab-note--ok{ background: var(--c-ok-soft); color: var(--c-ok-text); }
.cab-note--info{ background: var(--c-info-soft); color: var(--c-info-text); }
.cab-note:last-child{ border-radius: 0 0 var(--c-r-l) var(--c-r-l); }
.cab-note a{ color: inherit; font-weight: 600; }
.cab-btn-row{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cab-list-nav{ display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cab-list-nav li{ margin: 0; padding: 0; }
body.cabinet .cab-content .cab-list-nav a, .cab-list-nav a{ display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 0 10px; border-radius: var(--c-r); color: var(--c-text-2); text-decoration: none; font-size: var(--c-fs); }
body.cabinet .cab-content .cab-list-nav a:hover, .cab-list-nav a:hover{ background: var(--c-surface); color: var(--c-text); text-decoration: none; }
body.cabinet .cab-content .cab-list-nav a.is-active, .cab-list-nav a.is-active{ background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-text); font-weight: 600; }
.cab-list-nav .cab-count{ font-family: var(--c-mono); font-size: 11px; color: var(--c-text-3); }
.cab-check{ display: flex; align-items: flex-start; gap: 10px; font-size: var(--c-fs); line-height: 1.45; cursor: pointer; }
.cab-check input{ margin-top: 2px; }
.cab-prose p{ margin: 0 0 8px; } .cab-prose ul{ margin: 4px 0 8px; } .cab-prose p:last-child{ margin-bottom: 0; }
.cab-title-inline{ display: flex; align-items: center; gap: 8px; }

/* услуги */
.cab-svc{ --cab-cols: minmax(0, 1fr) 220px 150px 160px; min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
.cab-svc__name{ font-weight: 600; }
.cab-svc__hint{ font-size: var(--c-fs-xs); color: var(--c-text-3); }

@media (max-width: 1100px){
    /* планшет (psmy-88): две колонки карточек не помещаются — длинный адрес ломался по буквам.
       Вместе с сеткой снимается и растяжка на две колонки, иначе вторая создаётся неявно */
    .cab-grid, .cab-grid--3{ grid-template-columns: minmax(0, 1fr); }
    .cab-span-2{ grid-column: auto; }
    .cab-grid--side{ grid-template-columns: minmax(0, 1fr); }
    .cab-grid--nav{ grid-template-columns: minmax(0, 1fr); }
    .cab-svc{ --cab-cols: minmax(0, 1fr) 150px 130px 140px; }
}
@media (max-width: 1400px){
    .cab-tiles{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px){
    .cab-tiles, .cab-tiles--sites{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
    /* на мобильном высота карточки лимитов не фиксируется: список целиком, без внутренней прокрутки */
    .cab-card--fill{ min-height: 0; }
    .cab-card__scroll-y{ max-height: none; }
    .cab-card--fill .cab-card__scroll > *{ position: static; }
    #site-limits .cab-seg{ display: flex; width: 100%; }
    body.cabinet #site-limits .cab-seg__btn{ flex: 1; justify-content: center; }
    .cab-limits__expand{ display: none; }
    .cab-limits__foot{ display: flex; }
    .cab-span-2{ grid-column: auto; }
    .cab-table__row--head{ display: none; }
    .cab-table__row{ grid-template-columns: minmax(0, 1fr) !important; row-gap: 4px; padding: 10px 16px; }
    .cab-cell--right{ text-align: left; justify-self: start; }
    .cab-cell--actions{ justify-content: flex-start; }
    .cab-filters__f, .cab-filters__actions{ width: 100%; }
    body.cabinet .cab-filters select, body.cabinet .cab-filters__pair input{ width: 100%; min-width: 0; }
    .cab-filters__pair{ width: 100%; }
    .cab-filters__actions .button{ flex: 1; justify-content: center; }
    .cab-cell[data-label]::before{ content: attr(data-label); display: block; font-size: var(--c-fs-caps); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-3); margin-bottom: 2px; }
    .cab-kv__row{ grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 10px 16px; }
    /* кнопки в карточке удаления — на всю ширину */
    /* каталог услуг и сайты: карточки в одну колонку, публикация — столбиком */
    /* подписки (psmy-88): номер и цена, услуга, даты, статус и кнопка — вместо семи подписей */
    .cab-table--subs .cab-table__row:not(.cab-table__row--head){
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: 'num price' 'name name' 'start end' 'status act';
        row-gap: 6px;
        align-items: center;
    }
    .cab-table--subs .cab-subs__c--num{ grid-area: num; }
    .cab-table--subs .cab-subs__c--price{ grid-area: price; justify-self: end; }
    .cab-table--subs .cab-subs__c--name{ grid-area: name; }
    .cab-table--subs .cab-subs__c--start{ grid-area: start; }
    .cab-table--subs .cab-subs__c--end{ grid-area: end; justify-self: end; text-align: right; }
    .cab-table--subs .cab-subs__c--status{ grid-area: status; }
    .cab-table--subs .cab-subs__c--act{ grid-area: act; justify-self: end; }
    .cab-table--subs .cab-subs__c--num[data-label]::before,
    .cab-table--subs .cab-subs__c--price[data-label]::before,
    .cab-table--subs .cab-subs__c--name[data-label]::before,
    .cab-table--subs .cab-subs__c--status[data-label]::before{ content: none; }
    /* пальцем по 30px кнопке не попасть: в списках на телефоне — 44px (psmy-88) */
    .cab-table__row .button, .cab-table__row button.button{ min-height: var(--c-ctl-l); }

    .cab-tiles, .cab-tiles--sites{ grid-template-columns: minmax(0, 1fr); }
    .cab-tile--site .cab-tile__foot{ flex-direction: column; align-items: stretch; gap: 10px; }
    .cab-tile__actions{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cab-tile__actions .button{ justify-content: center; }
    .cab-svcm__foot{ flex-direction: column; align-items: stretch; }
    /* кнопки подвала столбиком: главная сверху, «Скасувати» под ней — длинные подписи не режутся */
    .cab-svcm__actions{ flex-direction: column-reverse; }
    .cab-svcm__actions .button, .cab-svcm__actions button{ width: 100%; justify-content: center; }
    /* подвал модалки: подпись над кнопками, кнопки на всю ширину */
    body.cabinet .cab-modal .modal-window-footer{ flex-wrap: wrap; }
    .cab-modal-foot__note{ flex-basis: 100%; }
    .cab-modal-foot__actions{ flex-basis: 100%; display: flex; }
    .cab-modal-foot__actions .button{ flex: 1; justify-content: center; }
    .cab-alert{ flex-wrap: wrap; }
    .cab-alert > span:not(.cab-alert__action){ flex-basis: calc(100% - 26px); }
    .cab-alert__action{ flex-basis: 100%; }
    .cab-alert__action .button, .cab-alert__action button{ width: 100%; justify-content: center; }
    .cab-card__body--row{ flex-direction: column; align-items: stretch; }
    .cab-card__body--row > .button{ width: 100%; justify-content: center; }
    /* адреса сайта: плашка статуса — в строке подписи справа, адрес ниже, кнопка на всю ширину */
    #site-details .cab-kv__row{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
    #site-details .cab-kv__label{ order: 1; flex: 1 1 auto; }
    #site-details .cab-kv__extra{ display: contents; }
    #site-details .cab-kv__extra > .cab-pill{ order: 2; margin-left: auto; }
    #site-details .cab-kv__value{ order: 3; flex-basis: 100%; }
    #site-details .cab-kv__extra > .button, #site-details .cab-kv__extra > button{ order: 4; flex-basis: 100%; width: 100%; justify-content: center; margin-top: 2px; }
    /* кнопки действий в строках таблиц — на всю ширину */
    .cab-cell--actions .button{ width: 100%; justify-content: center; }
    .cab-kv__extra{ justify-content: flex-start; }
    .cab-svc{ min-height: 0; }
}

/* форма заявки в модалке кабинета (psmy-86) */
.cab-tickm .cab-svcm__body{ display: flex; flex-direction: column; gap: 14px; }
.cab-tickm textarea{ width: 100%; resize: vertical; }
.cab-tickm__check{ display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; }
.cab-tickm__check input{ margin-top: 2px; flex-shrink: 0; }
.cab-tickm .cab-svcm__foot .cab-hint{ margin-right: auto; }

/* найденное глобальным поиском (psmy-89): одинаковая строка-ссылка на странице результатов
   и в подсказках под полем — иконка, заголовок с пояснением, значение справа и состояние */
.cab-res{ display: flex; flex-direction: column; min-width: 0; }
.cab-res__row{
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto auto 14px;
    align-items: center;
    column-gap: 12px;
    min-height: var(--c-row);
    padding: 7px 16px;
    border-top: 1px solid var(--c-line);
    color: inherit;
    text-decoration: none;
}
.cab-card__head + .cab-res > .cab-res__row:first-child{ border-top: none; }
.cab-res__row:hover{ background: var(--c-surface-2); text-decoration: none; }
/* строка под клавиатурой в подсказках — та же подсветка, что при наведении */
.cab-res__row.is-current{ background: var(--c-surface-2); }
.cab-res__row:focus-visible{ outline: none; box-shadow: var(--c-focus); }
.cab-res__ico{ display: inline-flex; color: var(--c-text-3); }
.cab-res__main{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* назначение платежа — целое предложение: строка держится в один этаж, хвост срезается */
.cab-res__title, .cab-res__sub{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-res__title{ font-size: var(--c-fs); font-weight: 600; color: var(--c-text); }
.cab-res__title.cab-mono{ font-family: var(--c-mono); font-size: var(--c-fs-mono); }
.cab-res__sub{ font-size: var(--c-fs-xs); color: var(--c-text-3); }
.cab-res__meta{ justify-self: end; white-space: nowrap; font-size: var(--c-fs-mono); }
.cab-res__status{ justify-self: end; }
.cab-res__go{ color: var(--c-text-4); }

@media (max-width: 767px){
    /* на телефоне строка в два этажа: состояние уходит под заголовок, стрелка не нужна */
    .cab-res__row{
        grid-template-columns: 16px minmax(0, 1fr) auto;
        grid-template-areas: 'ico main meta' 'ico status status';
        row-gap: 4px;
        min-height: var(--c-ctl-l);
    }
    .cab-res__ico{ grid-area: ico; align-self: start; margin-top: 3px; }
    .cab-res__main{ grid-area: main; }
    .cab-res__meta{ grid-area: meta; align-self: start; }
    .cab-res__status{ grid-area: status; justify-self: start; }
    .cab-res__go{ display: none; }
}