/* ============================================================
   Cloudybus — публичный сайт продукта
   Источник: макет «Сайт CloudBus.dc.html» (вариант 1a + внутренние 1d/1e/1f)
   (имя файла макета из handoff-бандла оставлено как есть — это цитата)

   ВНИМАНИЕ: файл подключается обычным <link> из _Layout.cshtml и НЕ входит
   ни в один бандл. Это намеренно: WebGrease 1.6.0 (System.Web.Optimization)
   не понимает var()/calc() и портит такой CSS при минификации.
   Не добавляйте этот файл в BundleConfig.cs.
   ============================================================ */

/* ---------- 1. Токены ---------- */
:root {
    /* Фирменные цвета */
    --cb-navy: #1e3646; /* заголовки, тёмный фон подвала */
    --cb-navy-deep: #132a3a; /* самый тёмный (панель контактов) */
    --cb-navy-soft: #1e4a63; /* градиент панели контактов */
    --cb-blue: #29abe2; /* основной голубой */
    --cb-blue-dark: #2f86b6; /* ссылки, вторичный текст-акцент */
    --cb-blue-light: #5cc6ef; /* акцент на тёмном фоне */
    --cb-orange: #f26522; /* акцент действия */
    --cb-orange-light: #f7941e; /* градиент кнопки */
    --cb-orange-deep: #d9531a; /* текст на оранжевой подложке */
    /* Текст */
    --cb-text: #3a4b59;
    --cb-text-2: #4a5d6b;
    --cb-text-3: #5b6b7a;
    --cb-muted: #6a7987;
    --cb-muted-2: #8aa4b5;
    --cb-on-dark: #a8c2d4; /* текст на тёмном */
    --cb-on-dark-dim: #5f7a8d; /* приглушённый на тёмном */
    /* Поверхности */
    --cb-surface: #fff;
    --cb-surface-2: #f6fafd; /* мягкий фон секций и карточек */
    --cb-tint-blue: #e2f3fb; /* подложка голубой иконки */
    --cb-tint-orange: #fff3ec; /* подложка оранжевой иконки */
    --cb-note: #eaf6fc; /* фон блока-подсказки */
    /* Границы */
    --cb-border: #e2eef5;
    --cb-border-nav: #e2eaf0;
    --cb-border-strong: #cdd7e0; /* поля ввода */
    --cb-border-note: #bfe2f2;
    --cb-border-mock: #d5e6f0;
    /* Градиенты */
    --cb-grad-hero: linear-gradient(160deg,#eaf6fc 0%,#d8eef8 55%,#c9e6f4 100%);
    --cb-grad-header: linear-gradient(160deg,#eaf6fc,#d8eef8);
    --cb-grad-action: linear-gradient(90deg,#f7941e,#f26522);
    --cb-grad-cta: linear-gradient(135deg,#2f86b6 0%,#29abe2 100%);
    --cb-grad-panel: linear-gradient(165deg,#132a3a,#1e4a63);
    /* Штриховка-заглушка под скриншот */
    --cb-hatch: repeating-linear-gradient(45deg,#f4f9fc,#f4f9fc 12px,#eef5fa 12px,#eef5fa 24px);
    /* Радиусы и тени */
    --cb-r-sm: 8px;
    --cb-r-md: 9px;
    --cb-r-lg: 12px;
    --cb-r-xl: 14px;
    --cb-shadow-action: 0 12px 26px -10px rgba(242,101,34,.65);
    --cb-shadow-card: 0 18px 40px -20px rgba(30,84,112,.25);
    --cb-shadow-mock: 0 30px 60px -20px rgba(30,84,112,.4);
    /* Сетка */
    --cb-page: 1280px;
    --cb-gutter: 48px;
    --cb-nav-h: 76px;
}

/* ---------- 2. База ---------- */
*, *::before, *::after { box-sizing: border-box; }

body.cb-site {
    margin: 0;
    background: var(--cb-surface);
    color: var(--cb-text-2);
    font-family: "Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Базовый вид заголовков.
   ВНИМАНИЕ: селектор ".cb-site h2" имеет специфичность (0,1,1) и перебивает одиночный
   класс (0,1,0). Поэтому у компонентов, которые переопределяют цвет или отступ заголовка,
   селектор тоже пишется с префиксом ".cb-site" — иначе, например, белый заголовок на тёмной
   панели «Контактов» молча станет тёмно-синим. */
.cb-site h1, .cb-site h2, .cb-site h3 { color: var(--cb-navy); margin: 0; }
.cb-site p { margin: 0; }
.cb-site img { max-width: 100%; }
.cb-site a { color: var(--cb-blue-dark); }

/* Клавиатурный фокус — фирменный, а не системный синий */
.cb-site a:focus-visible,
.cb-site button:focus-visible,
.cb-site input:focus-visible,
.cb-site textarea:focus-visible {
    outline: 2px solid var(--cb-orange);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- 3. Раскладка ---------- */
.cb-shell { display: flex; flex-direction: column; min-height: 100vh; }
.cb-main { flex: 1 0 auto; }

.cb-container {
    max-width: var(--cb-page);
    margin: 0 auto;
    padding: 0 var(--cb-gutter);
}

/* ---------- 4. Шапка ---------- */
.cb-nav {
    background: var(--cb-surface);
    border-bottom: 1px solid var(--cb-border-nav);
}

.cb-nav__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    height: var(--cb-nav-h);
    max-width: var(--cb-page);
    margin: 0 auto;
    padding: 0 var(--cb-gutter);
}

.cb-brand { display: flex; align-items: center; gap: 12px; flex: none; }
.cb-brand__link { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.cb-brand__link img { height: 44px; display: block; }
.cb-brand__text { font-size: 20px; font-weight: 800; color: var(--cb-navy); letter-spacing: .01em; }
.cb-brand__text span { color: var(--cb-blue); }
.cb-brand__section {
    font-size: 13px;
    font-weight: 700;
    color: var(--cb-muted-2);
    margin-left: 4px;
    padding-left: 16px;
    border-left: 1px solid var(--cb-border-nav);
}

.cb-nav__links {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: auto;
    font-size: 14.5px;
    font-weight: 600;
}

/* На странице документации вправо уводит поиск, а не меню */
.cb-search ~ .cb-nav__links { margin-left: 0; }

.cb-navlink {
    color: var(--cb-text);
    text-decoration: none;
    transition: color .12s;
}
.cb-navlink:hover { color: var(--cb-orange); }

.cb-navlink--active {
    color: var(--cb-orange);
    border-bottom: 2px solid var(--cb-orange);
    padding-bottom: 2px;
}

.cb-nav__actions { display: flex; gap: 12px; align-items: center; flex: none; }

.cb-nav__login {
    font-size: 14px;
    font-weight: 700;
    color: var(--cb-blue-dark);
    text-decoration: none;
    padding: 10px 16px;
    white-space: nowrap;
    transition: color .12s;
}
.cb-nav__login:hover { color: var(--cb-orange); }

.cb-nav__user {
    font-size: 13px;
    color: var(--cb-muted);
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Переключатель языков. Построен на <details> — работает без JavaScript.
   Ссылки настоящие (<a href>), а не переключение по скрипту: по ним ходит поисковый робот. */
.cb-lang { position: relative; flex: none; }

.cb-lang__current {
    list-style: none;
    cursor: pointer;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cb-text);
    border: 1px solid var(--cb-border-nav);
    border-radius: var(--cb-r-sm);
    user-select: none;
    transition: color .12s, border-color .12s;
}
.cb-lang__current::-webkit-details-marker { display: none; }
.cb-lang__current::marker { content: ""; }
.cb-lang__current:hover { color: var(--cb-orange); border-color: var(--cb-orange); }

.cb-lang__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 160px;
    padding: 6px;
    background: var(--cb-surface);
    border: 1px solid var(--cb-border-nav);
    border-radius: 10px;
    box-shadow: 0 14px 30px -12px rgba(30,84,112,.35);
}

.cb-lang__item {
    display: block;
    padding: 8px 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cb-text);
    text-decoration: none;
    border-radius: 6px;
}
.cb-lang__item:hover { background: var(--cb-surface-2); color: var(--cb-orange); }
.cb-lang__item.is-current { color: var(--cb-orange); background: var(--cb-tint-orange); }

/* Бургер — только на узких экранах */
.cb-burger {
    display: none;
    margin-left: auto;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--cb-border-nav);
    border-radius: var(--cb-r-sm);
    background: var(--cb-surface);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.cb-burger span {
    display: block;
    position: relative;
    width: 18px;
    height: 2px;
    background: var(--cb-navy);
}
.cb-burger span::before,
.cb-burger span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: var(--cb-navy);
}
.cb-burger span::before { top: -6px; }
.cb-burger span::after { top: 6px; }

/* ---------- 5. Кнопки ---------- */
.cb-btn {
    display: inline-block;
    font-family: inherit;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    border: none;
    border-radius: var(--cb-r-md);
    cursor: pointer;
    transition: filter .12s, transform .12s;
}
.cb-btn:hover { filter: brightness(1.05); }
.cb-btn:active { transform: translateY(1px); }

.cb-btn--primary {
    background: var(--cb-grad-action);
    color: #fff;
    box-shadow: var(--cb-shadow-action);
}

.cb-btn--outline {
    background: var(--cb-surface);
    color: var(--cb-blue-dark);
    border: 1.5px solid #a8d4e8;
}

/* Размеры */
.cb-btn--sm { font-size: 14.5px; padding: 12px 22px; border-radius: var(--cb-r-sm); box-shadow: 0 8px 18px -8px rgba(242,101,34,.6); }
.cb-btn--md { font-size: 16px; padding: 15px 30px; }
.cb-btn--lg { font-size: 16px; padding: 16px 32px; }
.cb-btn--block { display: block; width: 100%; }

/* ---------- 6. Hero (главная, 1a) ---------- */
.cb-hero {
    position: relative;
    background: var(--cb-grad-hero);
    padding: 72px 0 80px;
    overflow: hidden;
}
/* Декоративные круги */
.cb-hero::before,
.cb-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.cb-hero::before { width: 520px; height: 520px; background: rgba(255,255,255,.5); top: -200px; right: -140px; }
.cb-hero::after { width: 300px; height: 300px; background: rgba(41,171,226,.08); bottom: -120px; left: 38%; }

.cb-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
}

.cb-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cb-surface);
    border: 1px solid #cde4f0;
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cb-blue-dark);
    margin-bottom: 22px;
}
.cb-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cb-orange); flex: none; }

.cb-hero__title {
    font-size: 46px;
    font-weight: 800;
    line-height: 1.12;
    text-wrap: balance;
}

.cb-hero__lead {
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--cb-text-2);
    max-width: 520px;
}

.cb-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* Показатели */
.cb-stats { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 40px; }
.cb-stat__value { font-size: 24px; font-weight: 800; color: var(--cb-navy); }
.cb-stat__label { font-size: 12.5px; color: var(--cb-muted); margin-top: 2px; }

/* ---------- 7. Заглушка под скриншот ---------- */
.cb-mock { position: relative; }

.cb-mock__frame {
    background: var(--cb-surface);
    border: 1px solid var(--cb-border-mock);
    border-radius: var(--cb-r-xl);
    box-shadow: var(--cb-shadow-mock);
    overflow: hidden;
}

.cb-mock__bar {
    height: 38px;
    background: linear-gradient(180deg,#9ad3e8,#7ec2dc);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
}
.cb-mock__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.6); }

.cb-mock__body {
    height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--cb-hatch);
    color: var(--cb-muted-2);
    text-align: center;
    padding: 16px;
}
.cb-mock__title { font-size: 13px; font-weight: 600; }
.cb-mock__hint { font-size: 11.5px; }

/* Плавающая карточка поверх мока */
.cb-mock__float {
    position: absolute;
    bottom: -18px;
    left: -24px;
    background: var(--cb-surface);
    border: 1px solid var(--cb-border);
    border-radius: 10px;
    padding: 12px 18px;
    box-shadow: 0 14px 30px -12px rgba(30,84,112,.35);
    display: flex;
    align-items: center;
    gap: 10px;
}
.cb-mock__float-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--cb-r-md);
    background: var(--cb-tint-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.cb-mock__float-title { font-size: 13px; font-weight: 800; color: var(--cb-navy); }
.cb-mock__float-sub { font-size: 11.5px; color: var(--cb-muted); }

/* Вариант мока внутри секции (без «окна») */
.cb-figure {
    background: var(--cb-hatch);
    border: 1px solid #dcebf4;
    border-radius: var(--cb-r-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--cb-muted-2);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    padding: 16px;
    min-height: 220px;
}

/* ---------- 8. Заголовок секции ---------- */
.cb-section { padding: 72px 0; background: var(--cb-surface); }

.cb-kicker {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--cb-orange);
    text-transform: uppercase;
}

.cb-section__head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.cb-site .cb-section__title { margin-top: 12px; font-size: 32px; font-weight: 800; }

/* ---------- 9. Карточки преимуществ ---------- */
.cb-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.cb-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }

.cb-card {
    background: var(--cb-surface-2);
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-r-lg);
    padding: 26px 24px;
}

.cb-card--plain { background: var(--cb-surface); padding: 26px; }

.cb-icon {
    width: 46px;
    height: 46px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex: none;
}
.cb-icon--blue { background: var(--cb-tint-blue); }
.cb-icon--orange { background: var(--cb-tint-orange); }
.cb-icon--sm { width: 42px; height: 42px; border-radius: 10px; margin-bottom: 0; }

.cb-site .cb-card__title { font-size: 16.5px; font-weight: 800; color: var(--cb-navy); margin-bottom: 8px; }
.cb-card__text { font-size: 13.5px; line-height: 1.6; color: var(--cb-text-3); }

/* Шапка карточки модуля (иконка слева от заголовка) */
.cb-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cb-site .cb-card__head .cb-card__title { margin-bottom: 0; font-size: 17px; }

/* ---------- 10. CTA-полоса ---------- */
.cb-cta {
    background: var(--cb-grad-cta);
    padding: 56px 0;
}
.cb-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
.cb-site .cb-cta__title { font-size: 26px; font-weight: 800; color: #fff; }
.cb-cta__text { font-size: 15px; color: rgba(255,255,255,.85); margin-top: 8px; }
.cb-cta .cb-btn { flex: none; box-shadow: 0 14px 28px -10px rgba(0,0,0,.35); }

/* Узкая полоса-переход к заявке в конце внутренней страницы */
.cb-endbar { background: var(--cb-surface); border-top: 1px solid var(--cb-border); padding: 24px 0; }
.cb-endbar__inner { display: flex; justify-content: flex-end; }
.cb-endbar a {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cb-blue-dark);
    text-decoration: none;
}
.cb-endbar a:hover { color: var(--cb-orange); }

/* ---------- 11. Подвал ---------- */
.cb-footer { background: var(--cb-navy); padding: 36px 0; flex: none; }
.cb-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.cb-footer__brand { display: flex; align-items: center; gap: 10px; }
.cb-footer__brand img { height: 32px; display: block; filter: brightness(0) invert(1); opacity: .9; }
.cb-footer__brand span { font-size: 15px; font-weight: 800; color: #fff; }
.cb-footer__links { display: flex; gap: 24px; font-size: 13px; }
.cb-footer__links a { color: var(--cb-on-dark); text-decoration: none; transition: color .12s; }
.cb-footer__links a:hover { color: var(--cb-orange); }
.cb-footer__copy { font-size: 12.5px; color: var(--cb-on-dark-dim); }

/* ---------- 12. Шапка внутренней страницы (1d) ---------- */
.cb-pagehead { background: var(--cb-grad-header); padding: 52px 0; }
.cb-site .cb-pagehead__title { margin-top: 12px; font-size: 38px; font-weight: 800; }
.cb-pagehead__lead {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--cb-text-2);
    max-width: 640px;
}

.cb-section--tinted { background: var(--cb-surface-2); padding: 56px 0; }

/* ---------- 13. Документация (1e) ---------- */
.cb-docs {
    display: grid;
    grid-template-columns: 280px minmax(0,1fr) 220px;
    min-height: 640px;
    max-width: var(--cb-page);
    margin: 0 auto;
}

/* Боковое меню */
.cb-docs__side {
    background: var(--cb-surface-2);
    border-right: 1px solid var(--cb-border);
    padding: 28px 0;
}
.cb-docs__group {
    padding: 0 24px 10px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--cb-muted-2);
    text-transform: uppercase;
}
.cb-docs__group + .cb-docs__group,
.cb-docs__link + .cb-docs__group { padding-top: 20px; }

.cb-docs__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 24px;
    font-size: 13.5px;
    color: var(--cb-text);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: color .12s, background .12s;
}
.cb-docs__link:hover { color: var(--cb-orange); background: rgba(255,255,255,.6); }

.cb-docs__link--active {
    padding: 9px 24px;
    font-weight: 700;
    color: var(--cb-orange);
    background: var(--cb-surface);
    border-left: 3px solid var(--cb-orange);
}

/* Закрытая статья (для анонимного посетителя): приглушена, с замком справа */
.cb-docs__link--locked { color: var(--cb-muted); }
.cb-docs__lock { flex: none; opacity: .6; }

/* Статья */
.cb-docs__article { padding: 40px var(--cb-gutter); background: var(--cb-surface); }

.cb-crumbs { font-size: 12.5px; color: var(--cb-muted-2); margin-bottom: 10px; }
.cb-crumbs span { margin: 0 6px; }
.cb-crumbs b { color: var(--cb-text); font-weight: 600; }

.cb-site .cb-article__title { font-size: 30px; font-weight: 800; }
.cb-article p { margin-top: 16px; font-size: 15px; line-height: 1.75; color: var(--cb-text-2); }
.cb-article h2 { margin-top: 34px; font-size: 20px; font-weight: 800; }
.cb-article ol,
.cb-article ul { margin: 14px 0 0; padding-left: 22px; font-size: 14.5px; line-height: 1.9; color: var(--cb-text); }

/* Псевдо-кнопка внутри текста инструкции */
.cb-key {
    display: inline-block;
    background: var(--cb-tint-orange);
    color: var(--cb-orange-deep);
    font-weight: 700;
    font-size: 13px;
    padding: 1px 8px;
    border-radius: 5px;
    border: 1px solid #f3d5c2;
}

/* Блок-подсказка */
.cb-note {
    margin-top: 24px;
    background: var(--cb-note);
    border: 1px solid var(--cb-border-note);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    gap: 12px;
}
.cb-note svg { flex: none; margin-top: 2px; }
.cb-note__text { font-size: 13.5px; line-height: 1.65; color: #2c5a72; }

/* Переход к соседним статьям */
.cb-pager {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--cb-border);
}
.cb-pager a { font-size: 13.5px; font-weight: 700; color: var(--cb-blue-dark); text-decoration: none; }
.cb-pager a:hover { color: var(--cb-orange); }

/* Оглавление «На этой странице» */
.cb-toc { padding: 40px 24px; border-left: 1px solid #eef4f8; background: var(--cb-surface); }
.cb-toc__label {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--cb-muted-2);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.cb-toc a { display: block; font-size: 13px; color: var(--cb-text-3); text-decoration: none; padding: 5px 0; }
.cb-toc a:hover { color: var(--cb-orange); }
.cb-toc a.cb-toc--active { color: var(--cb-orange); font-weight: 700; }

/* Поиск в шапке документации */
.cb-search { margin-left: auto; position: relative; flex: none; }
.cb-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }
.cb-search input {
    width: 300px;
    height: 40px;
    padding: 0 14px 0 38px;
    font-size: 13.5px;
    font-family: inherit;
    border: 1px solid var(--cb-border-strong);
    border-radius: var(--cb-r-sm);
    background: var(--cb-surface-2);
    color: var(--cb-navy);
}

/* ---------- 14. Контакты / заявка (1f) ---------- */
.cb-contact { display: grid; grid-template-columns: 1fr 1fr; min-height: 620px; }

.cb-contact__info {
    background: var(--cb-grad-panel);
    padding: 64px 56px;
    display: flex;
    flex-direction: column;
}
.cb-site .cb-contact__title { font-size: 36px; font-weight: 800; color: #fff; line-height: 1.15; }
.cb-contact__lead {
    margin-top: 18px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--cb-on-dark);
    max-width: 420px;
}
.cb-contact__list { display: flex; flex-direction: column; gap: 20px; margin-top: 44px; }
.cb-contact__item { display: flex; gap: 14px; align-items: flex-start; }
.cb-contact__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.cb-contact__value { font-size: 14.5px; font-weight: 800; color: #fff; text-decoration: none; }
a.cb-contact__value:hover { color: var(--cb-blue-light); }
.cb-contact__hint { font-size: 12.5px; color: var(--cb-on-dark); margin-top: 2px; }
.cb-contact__foot { margin-top: auto; padding-top: 40px; display: flex; align-items: center; gap: 10px; }
.cb-contact__foot span:first-child {
    background: #fff;
    border-radius: 10px;
    padding: 5px 8px;
    display: flex;
}
.cb-contact__foot img { height: 30px; display: block; }
.cb-contact__copy { font-size: 13px; color: var(--cb-on-dark-dim); }

/* Форма */
.cb-contact__form-wrap {
    background: var(--cb-surface-2);
    padding: 64px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cb-form {
    background: var(--cb-surface);
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-r-xl);
    padding: 36px;
    box-shadow: var(--cb-shadow-card);
}
.cb-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cb-field + .cb-field,
.cb-form__row + .cb-field { margin-top: 18px; }

.cb-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cb-text);
    margin-bottom: 6px;
}
.cb-input {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid var(--cb-border-strong);
    border-radius: var(--cb-r-sm);
    color: var(--cb-navy);
    background: var(--cb-surface);
    transition: border-color .12s;
}
.cb-input:focus { border-color: var(--cb-blue); }

textarea.cb-input { height: 96px; padding: 11px 13px; resize: none; }

.cb-form .cb-btn { margin-top: 22px; height: 50px; font-size: 15.5px; font-weight: 800; padding: 0; }
.cb-form__consent { margin-top: 12px; font-size: 11.5px; color: var(--cb-muted-2); text-align: center; }

/* Сообщение об успешной отправке */
.cb-alert {
    display: flex;
    gap: 12px;
    background: var(--cb-note);
    border: 1px solid var(--cb-border-note);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 20px;
    font-size: 13.5px;
    line-height: 1.65;
    color: #2c5a72;
}
.cb-alert svg { flex: none; margin-top: 2px; }

/* Ошибка отправки (сводка ModelState уровня формы) */
.cb-alert--error {
    background: var(--cb-tint-orange);
    border-color: #f3d5c2;
    color: var(--cb-orange-deep);
}
.cb-alert--error ul { margin: 0; padding-left: 18px; }
.cb-alert--error ul:only-child { padding-left: 0; list-style: none; }

/* Классы валидации ASP.NET MVC */
.cb-site .input-validation-error { border-color: var(--cb-orange); }
.cb-site .field-validation-error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--cb-orange-deep);
}

/* Ловушка для ботов: убрана с экрана, но не display:none — часть ботов такие поля пропускает */
.cb-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- 14а. Меню пользователя (шапка, авторизованный) ---------- */
.cb-user { position: relative; flex: none; }

.cb-user__toggle {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    padding: 6px 10px 6px 6px;
    border: 1px solid var(--cb-border-nav);
    border-radius: 100px;
    user-select: none;
    transition: border-color .12s;
}
.cb-user__toggle::-webkit-details-marker { display: none; }
.cb-user__toggle::marker { content: ""; }
.cb-user__toggle:hover { border-color: var(--cb-blue); }

.cb-user__avatar {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--cb-grad-cta);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}
.cb-user__name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cb-text);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cb-user__chev { color: var(--cb-muted-2); flex: none; transition: transform .12s; }
.cb-user[open] .cb-user__chev { transform: rotate(180deg); }

.cb-user__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    min-width: 230px;
    padding: 8px;
    background: var(--cb-surface);
    border: 1px solid var(--cb-border-nav);
    border-radius: 12px;
    box-shadow: 0 16px 36px -14px rgba(30,84,112,.4);
}

.cb-user__item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cb-text);
    text-decoration: none;
    border-radius: 8px;
}
.cb-user__item svg { color: var(--cb-muted); flex: none; }
.cb-user__item:hover { background: var(--cb-surface-2); color: var(--cb-blue-dark); }
.cb-user__item:hover svg { color: var(--cb-blue-dark); }

.cb-user__item--exit:hover { background: var(--cb-tint-orange); color: var(--cb-orange); }
.cb-user__item--exit:hover svg { color: var(--cb-orange); }

.cb-user__sep { height: 1px; background: var(--cb-border); margin: 6px 8px; }

/* ---------- 14б. Гейт закрытой статьи документации ---------- */
.cb-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px 40px;
    max-width: 460px;
    margin: 0 auto;
}
.cb-gate__icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--cb-tint-blue);
    color: var(--cb-blue-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.cb-site .cb-gate__title { font-size: 22px; font-weight: 800; }
.cb-gate__text { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--cb-text-3); }
.cb-gate .cb-btn { margin-top: 24px; }

/* ---------- 14в. Заглушка ненаписанной статьи ---------- */
.cb-stub {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 22px;
    padding: 22px;
    background: var(--cb-surface-2);
    border: 1px dashed var(--cb-border-strong);
    border-radius: var(--cb-r-lg);
    color: var(--cb-muted);
}
.cb-stub svg { flex: none; margin-top: 2px; color: var(--cb-muted-2); }
.cb-stub__title { font-size: 15px; font-weight: 800; color: var(--cb-text); }
.cb-stub__text { margin-top: 6px; font-size: 13.5px; line-height: 1.6; }

/* ---------- 14г. Страница «Настройки» ---------- */
.cb-settings { background: var(--cb-surface-2); padding: 44px 0 64px; }
.cb-settings__inner { max-width: 760px; }
.cb-settings__head { margin-bottom: 24px; }
.cb-site .cb-settings__title { font-size: 30px; font-weight: 800; }
.cb-settings__lead { margin-top: 10px; font-size: 15px; color: var(--cb-text-3); }

.cb-settings__card {
    background: var(--cb-surface);
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-r-xl);
    padding: 26px 28px;
    margin-top: 18px;
}
.cb-site .cb-settings__section {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cb-border);
}

.cb-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.cb-settings__actions { display: flex; gap: 12px; margin-top: 24px; }
.cb-settings__stubnote { margin-top: 4px; }

/* Модификаторы уведомлений, которые переиспользуют настройки и другие страницы */
.cb-note--warn {
    background: #fff8ec;
    border-color: #f4dca8;
    color: #8a6d1f;
}
.cb-note--warn svg { color: #c9962b; }

.cb-alert--info {
    background: var(--cb-note);
    border: 1px solid var(--cb-border-note);
    color: #2c5a72;
}

/* ---------- 15. Адаптив ---------- */

/* Планшет: сетка 4 → 2 */
@media (max-width: 1100px) {
    .cb-grid-4 { grid-template-columns: repeat(2,1fr); }
    .cb-grid-3 { grid-template-columns: repeat(2,1fr); }
    /* Правое оглавление документации не помещается */
    .cb-docs { grid-template-columns: 260px minmax(0,1fr); }
    .cb-toc { display: none; }
}

/* Бургер-меню и одноколоночный hero */
@media (max-width: 960px) {
    :root { --cb-gutter: 28px; }

    .cb-burger { display: flex; }

    /* Меню и действия сворачиваются в выпадающую панель */
    .cb-nav__links,
    .cb-nav__actions {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: var(--cb-nav-h);
        z-index: 20;
        background: var(--cb-surface);
        border-bottom: 1px solid var(--cb-border-nav);
        flex-direction: column;
        gap: 0;
        padding: 8px var(--cb-gutter);
        margin-left: 0;
    }
    .cb-nav { position: relative; }
    .cb-nav.is-open .cb-nav__links,
    .cb-nav.is-open .cb-nav__actions { display: flex; }
    .cb-nav.is-open .cb-nav__actions {
        top: auto;
        position: static;
        border-bottom: none;
        padding-top: 0;
        padding-bottom: 16px;
        align-items: stretch;
    }
    .cb-nav.is-open .cb-nav__links { padding-bottom: 0; border-bottom: none; }
    .cb-nav__links .cb-navlink { padding: 12px 0; border-bottom: 1px solid var(--cb-border-nav); }
    .cb-navlink--active { border-bottom: 1px solid var(--cb-border-nav); color: var(--cb-orange); }
    .cb-nav__login { padding: 12px 0; text-align: left; }
    .cb-nav__user { max-width: none; padding-top: 12px; }
    .cb-nav__actions .cb-btn { margin-top: 8px; }

    /* Поиск документации прячем — он декоративный */
    .cb-search { display: none; }
    .cb-brand__section { display: none; }

    /* В выпадающей панели переключатель языков разворачивается в обычный список */
    .cb-lang { width: 100%; }
    .cb-lang__current { text-align: left; }
    .cb-lang__menu {
        position: static;
        min-width: 0;
        margin-top: 6px;
        box-shadow: none;
    }

    /* Меню пользователя в свёрнутой панели — тоже статическим списком */
    .cb-user { width: 100%; }
    .cb-user__toggle { border-radius: var(--cb-r-sm); }
    .cb-user__name { max-width: none; margin-right: auto; }
    .cb-user__menu {
        position: static;
        min-width: 0;
        margin-top: 8px;
        box-shadow: none;
    }

    /* Форма настроек в одну колонку */
    .cb-form-grid { grid-template-columns: 1fr; }
    .cb-settings__actions { flex-direction: column; }

    .cb-hero__grid { grid-template-columns: 1fr; gap: 40px; }
    .cb-hero { padding: 48px 0 56px; }
    .cb-hero__title { font-size: 34px; }
    .cb-hero__lead { font-size: 16px; }
    .cb-mock__float { left: 0; }

    .cb-section { padding: 48px 0; }
    .cb-section__title { font-size: 26px; }
    .cb-pagehead__title { font-size: 30px; }

    .cb-cta { padding: 40px 0; }
    .cb-cta__inner { flex-direction: column; align-items: flex-start; }
    .cb-cta__title { font-size: 22px; }

    /* Документация: меню над статьёй */
    .cb-docs { grid-template-columns: 1fr; }
    .cb-docs__side { border-right: none; border-bottom: 1px solid var(--cb-border); }
    .cb-docs__article { padding: 32px var(--cb-gutter); }

    /* Контакты в одну колонку */
    .cb-contact { grid-template-columns: 1fr; }
    .cb-contact__info,
    .cb-contact__form-wrap { padding: 48px var(--cb-gutter); }
    .cb-contact__title { font-size: 28px; }
    .cb-contact__foot { margin-top: 32px; }
}

/* Телефон */
@media (max-width: 560px) {
    :root { --cb-gutter: 20px; }

    .cb-grid-4,
    .cb-grid-3 { grid-template-columns: 1fr; }

    .cb-hero__title { font-size: 28px; }
    .cb-hero__actions .cb-btn { width: 100%; }
    .cb-stats { gap: 20px; }
    .cb-stat { min-width: 40%; }

    /* Плавающая карточка мешает на узком экране */
    .cb-mock__float { position: static; margin-top: 12px; }
    .cb-mock__body { height: 220px; }

    .cb-cta .cb-btn { width: 100%; }

    .cb-footer__inner { flex-direction: column; align-items: flex-start; gap: 16px; }

    .cb-form { padding: 24px; }
    .cb-form__row { grid-template-columns: 1fr; }
    .cb-field + .cb-field { margin-top: 18px; }

    .cb-article__title { font-size: 24px; }
    .cb-pager { flex-direction: column; }
}