/* Оболочка админки ai.gov.uz — значения перенесены из утверждённого прототипа. */

:root {
    --sidebar: #0b1a33;
    --sidebar-avatar: #243b5f;
    --primary: #1d4ed8;
    --primary-hover: #1740b8;
    --link-hover: #12358f;

    --page-bg: #f4f5f7;
    --card-bg: #fff;
    --card-border: #e8eaee;
    --topbar-border: #e6e8ec;
    --field-border: #dfe3e8;
    --button-border: #d4d8e0;
    --button-border-hover: #8b94a5;
    --tabs-bg: #f1f3f6;

    --text: #0f172a;
    --text-button: #26303f;
    --text-secondary: #4b5563;
    --text-muted: #667085;
    --text-tab-idle: #5b6577;
    --placeholder: #a5adba;

    --on-dark: #fff;
    --on-dark-muted: #8fa2bf;
    --on-dark-group: #6f83a3;
    --on-dark-item: #c3cfe0;

    --success: #146c34;
    --success-bg: #e8f6ec;
    --warning: #8a6100;
    --warning-bg: #fdf3dd;
    --danger: #b42318;
    --danger-border: #f0d3d3;
    --info: #1b3d80;
    --info-bg: #eef3fd;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--page-bg);
    font-family: 'Golos Text', system-ui, sans-serif;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--link-hover); }

input, textarea, select, button { font-family: inherit; }
::placeholder { color: var(--placeholder); }

/* --- Каркас --- */

.app { display: flex; min-height: 100vh; align-items: stretch; }

/* --- Сайдбар --- */

.sidebar {
    width: 280px;
    flex: none;
    background: var(--sidebar);
    color: var(--on-dark);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar__brand {
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    display: flex;
    align-items: center;
    gap: 11px;
}

.sidebar__mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
}

.sidebar__titles { display: flex; flex-direction: column; gap: 2px; }
.sidebar__title { font-weight: 700; font-size: 14px; letter-spacing: .01em; }
.sidebar__domain { font-size: 11px; color: var(--on-dark-muted); }

.nav {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 12px 10px 24px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nav::-webkit-scrollbar { display: none; }

.nav__label,
.nav__group {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--on-dark-group);
}

.nav__label { padding: 16px 10px 7px; }

.nav__group {
    padding: 16px 11px 7px;
    display: block;
}

.nav__group:hover { color: #c3cfe0; }
.nav__group--active { color: var(--on-dark); }

.nav__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 8px;
    color: var(--on-dark-item);
    font-size: 13.5px;
    font-weight: 500;
}

.nav__item:hover { background: rgba(255, 255, 255, .07); color: var(--on-dark); }

.nav__item--active {
    background: rgba(255, 255, 255, .12);
    color: var(--on-dark);
}

/* Вложенность подпунктов задаётся спейсером, а не отступом — как в прототипе. */
.nav__spacer { width: 12px; flex: none; }
.nav__text { flex: 1; line-height: 1.3; }

.sidebar__user {
    padding: 14px 18px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--sidebar-avatar);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex: none;
}

.sidebar__user-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.sidebar__user-name { font-size: 12.5px; font-weight: 500; }
.sidebar__user-role { font-size: 11px; color: var(--on-dark-muted); }

.sidebar__user-actions { display: flex; align-items: center; gap: 2px; }

.sidebar__action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: none;
    border: none;
    color: var(--on-dark-muted);
    cursor: pointer;
    padding: 0;
}

.sidebar__action:hover,
.sidebar__action:focus-visible { color: var(--on-dark); background: rgba(255, 255, 255, .08); }

/* Подсказка над иконкой — текст берётся из data-tip */
.sidebar__action::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(2px);
    padding: 4px 8px;
    border-radius: 5px;
    background: var(--on-dark);
    color: var(--sidebar);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s, transform .12s, visibility .12s;
    z-index: 10;
}

.sidebar__action:hover::after,
.sidebar__action:focus-visible::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* --- Основная область --- */

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    border-bottom: 1px solid var(--topbar-border);
    padding: 11px 32px;
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.topbar__heading {
    flex: 1 1 240px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}

.topbar__crumb {
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.langs {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--tabs-bg);
    border-radius: 9px;
    padding: 3px;
    flex: none;
    white-space: nowrap;
}

.langs__tab {
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 12.5px;
    color: var(--text-tab-idle);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

/* Редактор страницы держит поля всех языков в форме сразу; видно только
   поле активного языка — его код лежит на <html data-lang>. */
html[data-lang="ru"] [data-lang]:not([data-lang="ru"]),
html[data-lang="uz-latn"] [data-lang]:not([data-lang="uz-latn"]),
html[data-lang="uz-cyrl"] [data-lang]:not([data-lang="uz-cyrl"]),
html[data-lang="en"] [data-lang]:not([data-lang="en"]) { display: none; }

.langs__tab--active {
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
    font-weight: 600;
    color: var(--text);
}

/* Полоса вкладок из прототипа: подчёркнутая активная, счётчик рядом с названием. */
.doctabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 2px;
}

.doctabs__tab {
    padding: 8px 14px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.doctabs__tab:hover { color: var(--text-button); }

.doctabs__tab--active {
    font-weight: 600;
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.topbar__actions { display: flex; align-items: center; gap: 8px; flex: none; }

.btn {
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid var(--button-border);
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-button);
    cursor: pointer;
    flex: none;
    white-space: nowrap;
}

.btn:hover { border-color: var(--button-border-hover); }
.btn--preview:hover { border-color: var(--primary); color: var(--primary); }

.btn--primary {
    padding: 9px 16px;
    border: none;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
}

.btn--primary:hover { background: var(--primary-hover); color: #fff; }

.btn--danger { color: var(--danger); border-color: var(--danger-border); }
.btn--danger:hover { border-color: var(--danger); }

.btn[disabled] { opacity: .55; cursor: default; }

.content {
    flex: 1;
    padding: 26px 32px 80px;
    width: 100%;
}

/* --- Карточки, таблицы, формы --- */

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 18px 20px;
}

.card + .card { margin-top: 16px; }
.card__title { font-size: 14px; font-weight: 600; margin: 0 0 14px; }
.card__hint { font-size: 12px; color: var(--text-secondary); margin: 0 0 14px; }

.table { width: 100%; border-collapse: collapse; font-size: 13px; }

.table th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--card-border);
}

.table td { padding: 12px; border-bottom: 1px solid #f0f1f4; vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }

.badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 500;
    padding: 2px 9px;
    border-radius: 20px;
}

.badge--success { color: var(--success); background: var(--success-bg); }
.badge--warning { color: var(--warning); background: var(--warning-bg); }
.badge--info { color: var(--info); background: var(--info-bg); }
.badge--danger { color: var(--danger); background: #fdf1f0; }

/* Плитки статистики над таблицей реестра. */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.tile {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 11px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tile__label { font-size: 12px; color: var(--text-secondary); }
.tile__value { font-size: 22px; font-weight: 700; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field__label { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }

.field__input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--field-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text);
}

.field__input:focus { outline: none; border-color: var(--primary); }
.field__error { font-size: 11.5px; color: var(--danger); }
.field__hint { font-size: 11.5px; color: var(--text-muted); }

/* Тип медиа: в прототипе это пара радио, а не список — варианты видно сразу. */
.kind { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.kind__option { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }

/* Форма записи в две колонки: слева поля, справа публикация и вид на сайте.
   Значение минимальной ширины взято из прототипа — ниже него колонки схлопываются. */
.editor {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 18px;
    align-items: start;
}

/* Аватар организации в каталоге: инициалы, когда логотип не загружен. */
.avatar {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--info-bg);
    color: var(--info);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex: none;
}

.alert {
    padding: 11px 14px;
    border-radius: 9px;
    font-size: 13px;
    margin-bottom: 14px;
}

.alert--error { color: var(--danger); background: #fdf1f0; border: 1px solid var(--danger-border); }
.alert--notice { color: var(--info); background: var(--info-bg); border: 1px solid #d3e0fb; }

/* --- Экран входа --- */

.login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sidebar);
    padding: 24px;
}

.login__card {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 20px 60px rgba(9, 15, 28, .35);
}

.login__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.login__title { font-size: 15px; font-weight: 700; }
.login__domain { font-size: 11px; color: var(--text-muted); }

/* --- Тост --- */

.toast {
    position: fixed;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--sidebar);
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    z-index: 60;
    box-shadow: 0 10px 30px rgba(9, 15, 28, .3);
}

/* --- Медиатека --- */

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.media-card {
    border: 1px solid var(--card-border);
    border-radius: 11px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.media-card__preview {
    height: 132px;
    background: repeating-linear-gradient(135deg, #dfe4ea 0 6px, #eaeef3 6px 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.media-card__preview img { width: 100%; height: 100%; object-fit: cover; }

.media-card__kind {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--danger);
}

.media-card__body { padding: 11px 13px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.media-card__name { font-size: 12.5px; font-weight: 500; overflow-wrap: anywhere; }
.media-card__meta { font-size: 11px; color: var(--text-muted); }

.media-card__actions { display: flex; gap: 6px; padding: 0 13px 12px; align-items: center; }

.media-card__link {
    font-size: 11.5px;
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    padding: 0;
}

.media-card__link--danger { color: var(--danger); }

.dropzone {
    border: 1px dashed #a9bde6;
    background: #f7faff;
    border-radius: 9px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dropzone--over { border-color: var(--primary); background: #eef3fd; }

/* --- Редактор блоков --- */

.fill-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: #f7faff;
    border: 1px solid #e2e8f4;
    border-radius: 9px;
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--text-secondary);
}

.fill-row__item { display: flex; align-items: center; gap: 6px; }

.block {
    border: 1px solid #eaecf0;
    border-radius: 11px;
    background: #fcfcfd;
    padding: 14px 16px;
    margin-bottom: 11px;
}

.block__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
    flex-wrap: wrap;
}

.block__move {
    width: 28px;
    height: 28px;
    border: 1px solid #dfe3e8;
    background: #fff;
    border-radius: 7px;
    font-size: 12px;
    cursor: pointer;
}

.block__move:hover { border-color: var(--button-border-hover); }

.block__hint { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

.block__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #eaecf0;
    border-radius: 9px;
    background: #fff;
}

.block__divider span:first-child,
.block__divider span:last-child { flex: 1; height: 1px; background: var(--field-border); }

.block__divider-mark {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #c7d5f0;
    background: #eef3fd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    flex: none;
}

.block-palette {
    border: 1px dashed #a9bde6;
    background: #f7faff;
    border-radius: 11px;
    padding: 14px 16px;
    margin-top: 6px;
}

code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    background: var(--info-bg);
    color: var(--info);
    padding: 1px 6px;
    border-radius: 4px;
}

.tile__note { font-size: 11.5px; color: var(--text-muted); }
.tile__note--warning { color: var(--warning); }

/* Лента «Последние изменения» на дашборде. */
.activity {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--card-border);
}

.activity:last-child { border-bottom: none; }
.activity__title { font-size: 13.5px; font-weight: 500; }
.activity__meta { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }

/* Оверлей предпросмотра: публичный сайт в iframe, ширина переключается. */
.preview {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(9, 15, 28, .55);
    display: flex;
    flex-direction: column;
}

.preview[hidden] { display: none; }

.preview__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--card-border);
    /* На узком экране кнопки переносятся, а не наезжают друг на друга. */
    flex-wrap: wrap;
}

.preview__bar .preview__title { flex: 1 1 100%; }

@media (min-width: 640px) {
    .preview__bar .preview__title { flex: 0 0 auto; }
}

.preview__title { font-size: 13.5px; font-weight: 600; }
.preview__size--active { border-color: var(--primary); color: var(--primary); }

.preview__stage {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 18px;
    overflow: auto;
}

.preview__frame {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(9, 15, 28, .35);
}

/* Модальный выбор файла из медиатеки. */
.picker {
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(9, 15, 28, .5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 24px;
    overflow-y: auto;
}

.picker[hidden] { display: none; }

.picker__window {
    background: var(--card-bg);
    border-radius: 14px;
    width: 900px;
    max-width: 100%;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(9, 15, 28, .35);
}

.picker__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--card-border);
}

.picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    padding: 18px 20px;
    max-height: 65vh;
    overflow-y: auto;
    font-size: 13px;
    color: var(--text-muted);
}

.picker__item {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 0;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card-bg);
    cursor: pointer;
    overflow: hidden;
    text-align: left;
}

.picker__item:hover { border-color: var(--primary); }

.picker__preview {
    height: 96px;
    background: var(--info-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--info);
}

.picker__preview img { width: 100%; height: 100%; object-fit: cover; }

.picker__name {
    padding: 0 10px 10px;
    font-size: 11.5px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Видимый фокус: поле ввода гасит браузерное кольцо, поэтому всем
   интерактивным элементам нужно своё — иначе с клавиатуры не сориентироваться. */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.field__input:focus-visible { outline-offset: 0; }

/* Список страниц в окне выбора ссылки. */
.picker__list {
    list-style: none;
    margin: 0;
    padding: 8px 12px 16px;
    max-height: 65vh;
    overflow-y: auto;
}

.picker__row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    text-align: left;
}

.picker__row:hover { background: var(--info-bg); }
.picker__row-title { font-size: 13px; }

.picker__row-path {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--text-muted);
}

/* --- Поле выбора файла --- */

.media-field__row {
    display: flex;
    gap: 8px;
    max-width: 520px;
    align-items: center;
}

.media-field__actions {
    display: flex;
    gap: 8px;
}

.media-field__preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px dashed var(--field-border);
    border-radius: 9px;
    background: var(--page-bg);
    max-width: 520px;
}

.media-field__thumb {
    width: 64px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    flex: none;
}

.media-field__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 44px;
    border-radius: 6px;
    background: var(--sidebar);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    flex: none;
}

.media-field__text {
    flex: 1;
    min-width: 0;
}

.media-field__name {
    font-size: 13px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.media-field__meta {
    font-size: 11.5px;
    color: var(--text-muted);
}

.media-field__empty {
    font-size: 12.5px;
    color: var(--text-muted);
}

.media-field__clear {
    border: 1px solid var(--danger-border);
    background: #fff;
    color: var(--danger);
    border-radius: 7px;
    padding: 6px 11px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    flex: none;
}

/* --- Визуальный редактор текстового блока --- */

.rich {
    border: 1px solid var(--field-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--card-bg);
}

.rich__bar {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--field-border);
    background: var(--page-bg);
}

.rich__button {
    min-width: 30px;
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-button);
    font-size: 13px;
    cursor: pointer;
}

.rich__button:hover {
    background: var(--card-bg);
    border-color: var(--button-border);
}

.rich__surface {
    min-height: 110px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.6;
    outline: none;
}

.rich__surface:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.rich__surface p:first-child { margin-top: 0; }
.rich__surface p:last-child { margin-bottom: 0; }

/* --- Постраничная навигация --- */

.pager {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 12.5px;
    flex-wrap: wrap;
}

.pager__count { color: var(--text-muted); }

.pager__page,
.pager__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--button-border);
    border-radius: 7px;
    background: var(--card-bg);
    color: var(--text-button);
    font-weight: 500;
    text-decoration: none;
}

.pager__page:hover,
.pager__step:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.pager__page--active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.pager__gap {
    padding: 0 2px;
    color: var(--text-muted);
}

.media-field__preview--over {
    border-color: var(--primary);
    background: var(--info-bg);
}

/* --- Теги чипами --- */

.tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid var(--field-border);
    border-radius: 8px;
    background: var(--card-bg);
}

.tags__chips {
    display: contents;
}

.tags__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    border-radius: 20px;
    background: var(--info-bg);
    color: var(--info);
    font-size: 12px;
    font-weight: 500;
}

.tags__remove {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.tags__entry {
    flex: 1 1 140px;
    min-width: 120px;
    border: none;
    outline: none;
    font-size: 13.5px;
    padding: 4px 2px;
}

/* --- Набросок карточки сайта --- */

.site-card {
    border: 1px solid var(--card-border);
    border-radius: 10px;
    overflow: hidden;
    max-width: 340px;
}

.site-card__cover {
    height: 80px;
    background: linear-gradient(135deg, var(--sidebar), #1d3f78);
}

.site-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
}

.site-card__title {
    font-size: 13px;
    font-weight: 600;
}

.site-card__subtitle {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.5;
}

.site-card__fact {
    display: flex;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
}

.site-card__fact b {
    color: var(--text);
    font-weight: 500;
}

.site-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.site-card__tag {
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--info-bg);
    color: var(--info);
    font-size: 10.5px;
    font-weight: 500;
}

.site-card__action {
    font-size: 11px;
    color: var(--primary);
    font-weight: 500;
    margin-top: 2px;
}

/* --- Сворачивание блока --- */

.block__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.block__summary::-webkit-details-marker { display: none; }

.block__summary::before {
    content: "▸";
    color: var(--text-muted);
    font-size: 11px;
    flex: none;
}

.block__fold[open] > .block__summary::before { content: "▾"; }

.block__excerpt {
    font-size: 12.5px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.block__fold[open] > .block__summary {
    margin-bottom: 6px;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 8px;
}

/* Обязательное поле: звёздочка из макета. Сам признак живёт на поле
   (атрибут required), поэтому разметка остаётся понятной без стилей. */
.field__label--required::after {
    content: " *";
    color: var(--danger);
}

/* --- Язык интерфейса (глобус с меню, как в шапке сайта) --- */

.uilang {
    position: relative;
    display: flex;
    margin-left: auto;
}

.uilang__btn {
    display: flex;
    padding: 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--on-dark-item);
    cursor: pointer;
}

.uilang__btn:hover,
.uilang--open .uilang__btn { color: var(--on-dark); background: rgba(255, 255, 255, .08); }

.uilang--light .uilang__btn { color: var(--text-muted); }
.uilang--light .uilang__btn:hover,
.uilang--light.uilang--open .uilang__btn { color: var(--text); background: var(--tabs-bg); }

/* Раскрывается по клику (класс uilang--open ставит скрипт в _UiLangMenu). */
.uilang__menu {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 70;
    margin-top: 8px;
    min-width: 190px;
    padding: 8px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(9, 15, 28, .18);
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s;
}

.uilang--open > .uilang__menu {
    visibility: visible;
    opacity: 1;
    transition: none;
}

.uilang__item {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.uilang__item:hover { background: var(--page-bg); }
.uilang__item--active { font-weight: 600; color: var(--text); }