/* ============================================================================
   The Mystery Of Zion — оформление сайта и админки.
   Один файл на все страницы: цвета взяты из программы, чтобы сайт и
   приложение выглядели как одно целое.
   ========================================================================= */

:root {
    --ink:        #0D111A;
    --ink-2:      #161C2A;
    --accent:     #2B5FFF;
    --accent-2:   #5B8CFF;
    --accent-dk:  #1E4FF0;
    --accent-soft:#EEF2FF;
    --page:       #F4F6FB;
    --card:       #FFFFFF;
    --line:       #E2E6F0;
    --line-2:     #CDD7EE;
    --text:       #0F172A;
    --muted:      #667085;
    --faint:      #94A3B8;
    --ok:         #16A34A;
    --warn:       #B45309;
    --danger:     #B42318;
    --gem-red:    #D92D20;
    --gem-purple: #7A4DF5;
    --gem-teal:   #0F766E;

    --radius:     18px;
    --radius-sm:  12px;
    --shadow:     0 16px 40px rgba(15,23,42,.07);
    --shadow-lg:  0 30px 70px rgba(15,23,42,.14);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }

body {
    margin: 0;
    background: var(--page);
    color: var(--text);
    /* Golos Text — гротеска, рисованная под кириллицу: ровный ритм строчных
       и различимые цифры. Дальше системные: пока шрифт едет, страница
       читается тем же по духу */
    font-family: "Golos Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { letter-spacing: -.025em; margin: 0; font-weight: 800; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dk); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 24px; }

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono  { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }

/* Страницы с общей шапкой: место под неё, раз она выведена из потока */
body.has-nav { padding-top: 70px; }

/* ============================ Шапка ============================ */
/* Шапка прибита к окну, а не «липнет» к потоку: sticky зависела от
   раскладки родителя (flex-страницы с прижатым подвалом) и при прокрутке
   могла уезжать. fixed от содержимого не зависит вовсе. Высоту шапки
   страница компенсирует отступом body.has-nav ниже. */
.nav-top {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    background: rgba(13,17,26,.94);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.nav-inner { display: flex; align-items: center; gap: 22px; min-height: 70px; }
.nav-brand {
    display: flex; align-items: center; gap: 11px;
    color: #fff; font-weight: 700; letter-spacing: -.02em; font-size: 17px;
    line-height: 1.1; min-width: 0;
}
.nav-brand:hover { color: #fff; }
.nav-brand img { flex: 0 0 auto; }
/* Название и подпись под ним: подпись маленькая и спокойная, чтобы не
   спорить с именем, но читалась даже на телефоне */
.brand-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: -.01em; white-space: nowrap; }
.brand-sub  { font-weight: 500; font-size: 11px; letter-spacing: .03em; color: #98a4bb;
              white-space: nowrap; }
@media (max-width: 575px) {
    .nav-brand { gap: 9px; }
    .nav-brand img { width: 30px; height: 30px; }
    .brand-name { font-size: 15px; }
    .brand-sub  { font-size: 10px; }
}
@media (max-width: 340px) {
    .brand-sub { display: none; }
}
.nav-links { display: flex; gap: 22px; margin-left: 10px; }
.nav-links a { color: #b6c0d4; font-size: 14.5px; }
.nav-links a:hover, .nav-links a.on { color: #fff; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Ссылки только для телефона: на большом экране их роль играют кнопки справа */
.nav-links .only-sm { display: none; }

.nav-burger {
    display: none; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
    color: #fff; border-radius: 10px; padding: 8px 11px; font-size: 18px; line-height: 1; cursor: pointer;
}

/* ============================ Кнопки ============================ */
.btn-x {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    border-radius: var(--radius-sm); padding: 11px 20px;
    font-weight: 600; font-size: 15px; border: 1px solid transparent;
    cursor: pointer; transition: transform .12s ease, background .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.btn-x:active { transform: translateY(1px); }
.btn-primary-x { background: var(--accent); color: #fff; }
.btn-primary-x:hover { background: var(--accent-dk); color: #fff; }
.btn-ghost-x { background: rgba(255,255,255,.08); color: #e8edf7; border-color: rgba(255,255,255,.14); }
.btn-ghost-x:hover { background: rgba(255,255,255,.15); color: #fff; }
.btn-light-x { background: #fff; color: var(--text); border-color: var(--line); }
.btn-light-x:hover { background: #f7f9ff; color: var(--text); border-color: var(--line-2); }
.btn-soft-x { background: var(--accent-soft); color: var(--accent); }
.btn-soft-x:hover { background: #e2e9ff; color: var(--accent-dk); }
.btn-danger-x { background: var(--danger); color: #fff; }
.btn-danger-x:hover { background: #9b1c14; color: #fff; }
.btn-lg-x { padding: 14px 26px; font-size: 16px; border-radius: 14px; }
.btn-sm-x { padding: 8px 14px; font-size: 13.5px; border-radius: 10px; }
.btn-block-x { width: 100%; }

/* ============================ Секции ============================ */
section { padding: 88px 0; }
.sec-eyebrow { color: var(--accent); font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: .09em; }
.sec-title { font-size: clamp(26px, 3.2vw, 40px); margin-top: 12px; }
.sec-sub { color: var(--muted); font-size: 17px; line-height: 1.7; margin-top: 16px; max-width: 720px; }

.band { background: var(--ink); color: #fff; }
.band .sec-sub { color: #b9c3d8; }
.band .sec-eyebrow { color: var(--accent-2); }
.band .sec-title { color: #fff; }

.page-head { background: var(--ink); color: #fff; padding: 60px 0 56px; }
.page-head h1 { font-size: clamp(28px, 4vw, 44px); margin-top: 12px; }
.page-head p { color: #b9c3d8; font-size: 17px; line-height: 1.7; margin: 16px 0 0; max-width: 680px; }

/* ============================ Карточки ============================ */
.card-x {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px; height: 100%;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.card-x:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.card-x h3 { font-size: 18px; margin: 16px 0 8px; }
.card-x p  { color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0; }
.card-flat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }

.ic {
    width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent); font-size: 20px;
}
.ic.red    { background: #FEE2E2; color: var(--gem-red); }
.ic.purple { background: #EDE9FE; color: var(--gem-purple); }
.ic.teal   { background: #CCFBF1; color: var(--gem-teal); }
.ic.amber  { background: #FEF3C7; color: #B45309; }

.pill-x {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent-soft); color: var(--accent);
    border-radius: 999px; padding: 6px 14px; font-size: 13.5px; font-weight: 600;
}
.pill-dark {
    display: inline-flex; align-items: center; gap: 9px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px; padding: 7px 15px; font-size: 13.5px; color: #cfd8ea;
}

.quote { border-left: 3px solid var(--accent); padding: 4px 0 4px 22px; font-size: 19px; line-height: 1.7; }
.quote .src { display: block; color: var(--muted); font-size: 14px; margin-top: 10px; }

/* ============================ Снимки экрана ============================ */
.shot { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: #0b0f18;
        box-shadow: 0 -10px 60px rgba(0,0,0,.45), 0 40px 90px rgba(0,0,0,.5); }
.shot img { display: block; }
.shot-bar { display: flex; gap: 7px; padding: 11px 14px; background: #11161f; border-bottom: 1px solid rgba(255,255,255,.07); }
.shot-bar i { width: 11px; height: 11px; border-radius: 50%; background: #2a3244; display: block; }
.shot-light { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: #fff; }
.shot-light img { display: block; }

/* ============================ Формы ============================ */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.input-x, .select-x, .textarea-x {
    width: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 12px 14px; font-size: 15px; color: var(--text); font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input-x:focus, .select-x:focus, .textarea-x:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(43,95,255,.12);
}
.textarea-x { min-height: 110px; resize: vertical; }

/* ==================== Свой выпадающий список ====================
   Родной <select> оформить до конца нельзя: сам список рисует система, и
   ни шрифт, ни отступы, ни подсветку в нём не поменять. Поэтому настоящий
   select остаётся в разметке (форма отправляется как раньше, и без
   JavaScript он просто работает сам), а рядом рисуется наш.

   Разметку собирает скрипт в admin/_shell.php. */

.sel { position: relative; display: inline-block; width: 100%; vertical-align: middle; }
.sel select.sel-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

.sel-btn {
    width: 100%; display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 10px 13px; font-size: 14.5px; font-family: inherit; color: var(--text);
    text-align: left; cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.sel-btn:hover { border-color: var(--line-2); }
.sel-btn:focus-visible,
.sel.open .sel-btn { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(43,95,255,.12); }
.sel-btn[disabled] { background: #f8fafc; color: var(--muted); cursor: not-allowed; }

.sel-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Уголок: рисуем рамкой повёрнутого квадрата — картинка для этого не нужна */
.sel-caret {
    flex: none; width: 8px; height: 8px; margin-right: 2px;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}
.sel.open .sel-caret { transform: rotate(-135deg) translate(-3px, -3px); }

.sel-menu {
    position: absolute; z-index: 90; left: 0; right: 0; top: calc(100% + 6px);
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: 0 18px 40px rgba(15,23,42,.16);
    padding: 6px; margin: 0; list-style: none;
    max-height: 280px; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .15s ease, transform .18s ease, visibility 0s linear .18s;
}
.sel.open .sel-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity .15s ease, transform .18s ease;
}
/* Список выше кнопки, когда снизу нет места */
.sel.up .sel-menu { top: auto; bottom: calc(100% + 6px); }

.sel-opt {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 11px; border-radius: 9px; cursor: pointer;
    font-size: 14.5px; color: var(--text); line-height: 1.35;
}
.sel-opt:hover, .sel-opt.on { background: var(--accent-soft); }
.sel-opt[aria-selected="true"] { font-weight: 600; }
.sel-opt[aria-selected="true"]::after {
    content: ""; flex: none; width: 6px; height: 11px; margin-left: auto;
    border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
    transform: rotate(45deg);
}
.sel-opt[data-disabled="1"] { color: var(--faint); cursor: not-allowed; }

/* Цветная точка — для выбора цвета пометки */
.sel-dot { flex: none; width: 12px; height: 12px; border-radius: 4px; border: 1px solid rgba(15,23,42,.12); }

/* Мелкий вариант — в плотных таблицах */
.sel-sm .sel-btn { padding: 5px 9px; font-size: 13px; }
.sel-sm .sel-opt { padding: 7px 9px; font-size: 13px; }
.sel-sm .sel-caret { width: 7px; height: 7px; }

.alert-x { border-radius: var(--radius-sm); padding: 13px 16px; font-size: 14.5px; margin-bottom: 16px; }
.alert-ok   { background: #dcfce7; color: #14532d; }
.alert-err  { background: #fee2e2; color: #7f1d1d; }
.alert-info { background: var(--accent-soft); color: #1e3a8a; }
.alert-warn { background: #fef3c7; color: #78350f; }

/* ============================ Таблицы ============================ */
.table-x { width: 100%; border-collapse: collapse; }
.table-x th {
    text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); font-weight: 600; padding: 13px 14px; border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.table-x td { padding: 13px 14px; border-bottom: 1px solid #F0F2F7; vertical-align: middle; font-size: 14.5px; }
.table-x tr:last-child td { border-bottom: none; }
.table-x tbody tr:hover { background: #FAFBFF; }
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }

.badge-x { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.badge-ok    { background: #dcfce7; color: #166534; }
.badge-blue  { background: var(--accent-soft); color: var(--accent); }
.badge-gray  { background: #F1F5F9; color: #475569; }
.badge-red   { background: #fee2e2; color: #991b1b; }
.badge-amber { background: #fef3c7; color: #92400e; }

.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block;
            margin-right: 7px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }

/* ============================ Подвал ============================ */
footer.site { background: #fff; border-top: 1px solid var(--line); padding: 40px 0; margin-top: 0; }

/* Вход и регистрация: рисунок с книгами, свитками и буквами по краям.
   Он украшение, а не часть страницы — цвет фона задан отдельно и держится,
   пока картинки грузятся, и остаётся, если их вдруг нет.

   Картинка разрезана пополам, и каждая половина прибита к своему краю. Одним
   куском её пришлось бы кадрировать под ширину окна: на широком экране декор
   уезжал бы за края, на узком — сжимался в кашу. Половинки же всегда стоят по
   углам, а середина просто раздвигается.

   Середина у каждой половины пустая, поэтому на узком окне они безвредно
   накладываются друг на друга — там нечему перекрываться. */
body.auth-bg, .bg-books {
    background-color: var(--page);
    background-image: url("../assets/auth-bg-left.jpg"), url("../assets/auth-bg-right.jpg");
    background-position: left top, right top;
    background-repeat: no-repeat, no-repeat;
    background-size: auto 100%, auto 100%;
}

/* На телефоне широкую картинку кадрировать некуда: она ужалась бы до
   неразличимых пятен. Оставляем чистый фон, форме так только лучше. */
@media (max-width: 767px) {
    body.auth-bg, .bg-books { background-image: none; }
}

/* Короткие страницы (вход, регистрация): подвал прижат к низу экрана,
   а не висит посреди пустоты, когда содержимого мало. */
body.foot-bottom { display: flex; flex-direction: column; min-height: 100vh; }
body.foot-bottom > footer.site { margin-top: auto; }
.foot-links a { color: var(--muted); font-size: 14px; margin-right: 18px; }
.foot-links a:hover { color: var(--text); }
.foot-note { color: var(--faint); font-size: 12.5px; line-height: 1.7; margin-top: 18px; }

/* ---------- Галерея снимков ----------
   Та же плитка, что на главной, но общая: чтобы снимки можно было показать
   в любом разделе, а не только там, где лежит своя вёрстка. */
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.gal-item {
    display: block; padding: 0; border: 1px solid var(--line); background: #fff;
    border-radius: 16px; overflow: hidden; cursor: zoom-in; text-align: left; width: 100%;
    box-shadow: 0 1px 2px rgba(15,23,42,.05);
    transition: transform .15s ease, box-shadow .2s ease, border-color .15s ease;
}
.gal-item:hover { transform: translateY(-3px); border-color: var(--line-2);
                  box-shadow: var(--shadow-lg); }
.gal-item img { display: block; width: 100%; height: 190px; object-fit: cover; object-position: top center; }
.gal-cap { display: block; padding: 12px 15px 14px; font-size: 13.5px; line-height: 1.45;
           color: var(--muted); border-top: 1px solid var(--line); }
.gal-cap b { display: block; color: var(--text); font-size: 14.5px; margin-bottom: 2px; }

/* Просмотр во весь экран */
.lb { position: fixed; inset: 0; z-index: 200; display: none;
      background: rgba(8,11,18,.94); align-items: center; justify-content: center; padding: 30px; }
.lb.on { display: flex; }
.lb img { max-width: 100%; max-height: 84vh; border-radius: 12px; }
.lb-cap { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center;
          color: #c9d3e8; font-size: 14.5px; padding: 0 20px; }
.lb-x, .lb-nav { position: absolute; background: rgba(255,255,255,.1); color: #fff;
                 border: 0; border-radius: 50%; width: 44px; height: 44px; cursor: pointer;
                 font-size: 17px; display: flex; align-items: center; justify-content: center; }
.lb-x:hover, .lb-nav:hover { background: rgba(255,255,255,.2); }
.lb-x { top: 22px; right: 22px; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }

/* Блок поддержки в подвале */
.foot-support {
    margin-top: 26px; padding: 22px 24px; border-radius: 16px;
    background: var(--page); border: 1px solid var(--line);
    display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.foot-support-ic { font-size: 30px; color: #e25563; line-height: 1; }

/* ============================ Сетка ============================ */
.grid { display: grid; gap: 22px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split-5-7 { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }

.stack { display: flex; flex-direction: column; gap: 18px; }

/* Плитка карточек: на широком экране столбец из шести карточек уводил
   заголовок раздела далеко вверх — теперь они лежат в два ряда и читаются
   разом. На узком — тот же один столбец. */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
.tiles .card-x { padding: 20px; }
.tiles .card-x h3 { font-size: 16.5px; margin: 12px 0 6px; }
.tiles .card-x p  { font-size: 14px; line-height: 1.6; }
.tiles .ic { width: 38px; height: 38px; font-size: 17px; border-radius: 11px; }
.row-x { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- Поле пароля с показом ----------
   Кнопка лежит поверх поля справа: отдельной колонкой она ломала бы
   ширину полей, а так поле остаётся обычным input-x. */
.pass-wrap { position: relative; }
.pass-wrap .input-x { padding-right: 46px; }
.pass-eye {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; border-radius: 9px; cursor: pointer;
    color: var(--muted); font-size: 17px; line-height: 1; padding: 0;
}
.pass-eye:hover { color: var(--accent); background: var(--accent-soft); }

/* ============================ Админка ============================ */
.adm-wrap { display: flex; min-height: 100vh; align-items: stretch; }
.adm-side {
    width: 252px; flex: 0 0 252px; background: var(--ink); color: #cbd5e1;
    padding: 22px 14px; display: flex; flex-direction: column; gap: 3px;

    /* Меню остаётся на экране при прокрутке. Растянутый на всю страницу
       столбец липнуть не умеет — ему некуда двигаться внутри себя, поэтому
       снимаем растяжение (align-self) и даём ровно высоту окна. Своя
       прокрутка на случай, если разделов станет больше, чем влезает. */
    position: sticky; top: 0; align-self: flex-start;
    height: 100vh; overflow-y: auto;
}
.adm-brand { display: flex; align-items: center; gap: 10px; color: #eef2ff; font-weight: 800;
             letter-spacing: -.02em; padding: 4px 10px 18px; }
.adm-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
            color: #b6c0d4; font-size: 14.5px; }
.adm-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.adm-link.active { background: var(--accent); color: #fff; font-weight: 600; }
.adm-link i { font-size: 16px; width: 18px; text-align: center; }

/* Заголовок группы разделов. Пунктов набралось на полтора десятка, и
   сплошным списком нужный приходилось выискивать глазами */
.adm-group {
    padding: 15px 12px 5px; font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .09em; color: #64748b;
}
.adm-group:first-of-type { padding-top: 8px; }

/* Окно поверх страницы. Нативный <dialog> сам умеет Esc, возврат фокуса и
   подложку — своего кода остаётся на пару строк */
.adm-dialog {
    border: none; border-radius: 16px; padding: 0; color: var(--text);
    max-width: 760px; width: calc(100% - 32px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
}
.adm-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.adm-dialog-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 18px 22px 14px; border-bottom: 1px solid var(--line);
}
.adm-dialog-body { padding: 16px 22px 22px; max-height: 62vh; overflow-y: auto; }
.adm-dialog-x {
    background: none; border: none; cursor: pointer; color: var(--muted);
    font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 8px;
}
.adm-dialog-x:hover { background: var(--line); color: var(--text); }
.adm-side-foot { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid rgba(255,255,255,.08);
                 font-size: 12.5px; color: var(--faint); }
.adm-main { flex: 1 1 auto; min-width: 0; padding: 28px 30px 60px; }
.adm-title { font-size: 26px; margin: 0 0 4px; }
.adm-topbar { display: none; }

.stat { padding: 20px 22px; }
.stat .num { font-size: 32px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.stat .cap { font-size: 13.5px; color: var(--muted); margin-top: 5px; }
.stat .sub { font-size: 12.5px; color: var(--faint); margin-top: 7px; }

.bar { height: 7px; background: #EDF1F9; border-radius: 999px; overflow: hidden; margin-top: 9px; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.bar > i.gray { background: #94A3B8; }

/* Разворот строки в журнале правок */
.exp-btn { background: none; border: none; color: var(--accent); font-size: 13.5px; cursor: pointer;
           padding: 4px 8px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; }
.exp-btn:hover { background: var(--accent-soft); }
.exp-btn .chev { transition: transform .15s ease; display: inline-block; }
.exp-btn[aria-expanded="true"] .chev { transform: rotate(90deg); }
.exp-row > td { background: #FAFBFF; padding: 0 14px 18px; }
.diff-box { border-radius: 10px; padding: 9px 12px; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.diff-old { background: rgba(239,68,68,.05); border-left: 3px solid #ef4444; }
.diff-new { background: rgba(34,197,94,.07); border-left: 3px solid #22c55e; }
.diff-name { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 6px; }

/* ============================ Телефоны ============================ */
@media (max-width: 991px) {
    section { padding: 56px 0; }
    .wrap, .wrap-narrow { padding: 0 18px; }

    .split, .split-5-7 { grid-template-columns: 1fr; gap: 30px; }
    .tiles { grid-template-columns: 1fr; }
    .gal { grid-template-columns: 1fr; }

    /* Размытие за шапкой на телефоне выключено нарочно: backdrop-filter
       делает шапку системой отсчёта для position: fixed внутри неё, и
       шторка меню получала высоту шапки вместо высоты экрана */
    .nav-top { backdrop-filter: none; background: var(--ink); }
    .nav-links { z-index: 60; }

    /* Шапка на телефоне — sticky, а не fixed. В Safari на iOS панель адреса
       при прокрутке то прячется, то возвращается, и fixed-шапку в этот момент
       отрывает от верха: она уезжает и пропадает. Sticky едет вместе со
       страницей. Место в потоке она занимает сама — отступ сверху не нужен */
    body.has-nav { padding-top: 0; }
    .nav-top { position: sticky; }
    .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }

    /* Шторка на весь экран. Всегда в DOM, прячется прозрачностью и сдвигом:
       так открытие анимируется, а не появляется рывком. Анимируются только
       transform и opacity — они не трогают раскладку и не тормозят даже на
       слабых телефонах. */
    .nav-links {
        display: flex; position: fixed; top: 70px; left: 0; right: 0; bottom: 0;
        background: linear-gradient(180deg, var(--ink) 0%, #10151f 100%);
        flex-direction: column; gap: 0; margin: 0;
        padding: 18px 26px 30px; overflow-y: auto;
        opacity: 0; visibility: hidden; transform: translateY(-14px);
        transition: opacity .22s ease, transform .26s cubic-bezier(.32,.72,.28,1),
                    visibility 0s linear .26s;
    }
    .nav-links.open {
        opacity: 1; visibility: visible; transform: translateY(0);
        transition: opacity .22s ease, transform .26s cubic-bezier(.32,.72,.28,1);
    }
    .nav-links a {
        padding: 16px 2px; border-bottom: 1px solid rgba(255,255,255,.07);
        font-size: 19px; font-weight: 600; color: #dfe6f3;
        opacity: 0; transform: translateY(10px);
        transition: opacity .3s ease, transform .3s ease;
    }
    .nav-links.open a { opacity: 1; transform: translateY(0); }
    /* Ступенькой, сверху вниз — лёгкий каскад вместо одновременного скачка */
    .nav-links.open a:nth-child(1) { transition-delay: .04s; }
    .nav-links.open a:nth-child(2) { transition-delay: .08s; }
    .nav-links.open a:nth-child(3) { transition-delay: .12s; }
    .nav-links.open a:nth-child(4) { transition-delay: .16s; }
    .nav-links.open a:nth-child(5) { transition-delay: .20s; }
    .nav-links.open a:nth-child(6) { transition-delay: .24s; }
    .nav-burger { display: inline-block; }
    .nav-inner { position: relative; }
    /* Пока шторка открыта, страница под ней не прокручивается */
    body.nav-open { overflow: hidden; }

    @media (prefers-reduced-motion: reduce) {
        .nav-links, .nav-links a { transition: none; }
    }
    /* В шапке остаётся один бургер: кнопки переезжают в выпадающее меню,
       рядом со значком они лезли друг на друга и обрезались */
    .nav-right .hide-sm, .nav-right .nav-cta { display: none; }
    .nav-links .only-sm { display: block; }

    .page-head { padding: 44px 0 40px; }
    .sec-sub { font-size: 16px; }

    /* Админка: меню сверху, содержимое во всю ширину */
    .adm-wrap { display: block; }
    .adm-side {
        width: auto; flex: none; flex-direction: row; flex-wrap: wrap; gap: 6px;
        padding: 12px; position: sticky; top: 0; z-index: 40;
        /* Сверху полосой, а не столбцом: высота по содержимому */
        height: auto; align-self: auto; overflow: visible;
    }
    /* Название рядом с логотипом на узкой полосе только съедает место
       под кнопки разделов — остаётся один логотип */
    .adm-brand { padding: 0 8px 0 4px; font-size: 15px; }
    .adm-brand .lbl { display: none; }
    .adm-link { padding: 8px 11px; font-size: 13.5px; }
    .adm-link span.lbl { display: none; }
    .adm-link i { width: auto; }
    /* На узкой полосе разделы идут иконками в ряд — заголовкам групп там
       негде встать, да и делить нечего */
    .adm-group { display: none; }
    .adm-side-foot { display: none; }
    .adm-main { padding: 18px 16px 50px; }
    .adm-title { font-size: 22px; }
    .stat .num { font-size: 26px; }
}

@media (max-width: 575px) {
    .btn-lg-x { padding: 13px 20px; font-size: 15px; }
    .card-x { padding: 20px; }
    .table-x th, .table-x td { padding: 11px 10px; font-size: 13.5px; }
}

/* ============================================================================
   Мелкие помощники раскладки.
   Имена совпадают с бутстраповскими: страницы админки писались под него, и
   тащить весь фреймворк ради десятка классов ни к чему — здесь только то,
   что реально используется.
   ========================================================================= */
.row { display: flex; flex-wrap: wrap; margin: 0 -11px; }
.row > [class*="col"] { padding: 0 11px; margin-bottom: 22px; }
.col        { flex: 1 1 0; min-width: 0; }
.col-auto   { flex: 0 0 auto; }
.col-6      { flex: 0 0 50%; max-width: 50%; }
.col-lg-3   { flex: 0 0 25%;  max-width: 25%; }
.col-lg-4   { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-lg-5   { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-lg-7   { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-lg-8   { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-md-6   { flex: 0 0 50%; max-width: 50%; }
.col-sm-6   { flex: 0 0 50%; max-width: 50%; }
.col-12     { flex: 0 0 100%; max-width: 100%; }

.d-flex { display: flex; }
.d-inline { display: inline; }
.flex-wrap { flex-wrap: wrap; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.gap-2 { gap: 8px; } .gap-3 { gap: 14px; }

.text-muted { color: var(--muted); }
.text-primary { color: var(--accent); }
.text-danger { color: var(--danger); }
.text-center { text-align: center; }
.text-end { text-align: right; }
.text-nowrap { white-space: nowrap; }
.small { font-size: 13px; }
.fw-bold { font-weight: 700; }

.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 10px; } .mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 22px; }
.mt-1 { margin-top: 6px; } .mt-2 { margin-top: 10px; } .mt-3 { margin-top: 16px; } .mt-4 { margin-top: 22px; }
.ms-1 { margin-left: 6px; } .ms-2 { margin-left: 10px; } .ms-auto { margin-left: auto; }
.me-1 { margin-right: 6px; }
.p-3 { padding: 16px; } .py-4 { padding-top: 22px; padding-bottom: 22px; }
.ps-3 { padding-left: 16px; } .pe-3 { padding-right: 16px; }
.h-100 { height: 100%; }

.border-bottom { border-bottom: 1px solid var(--line); }
.table-responsive { overflow-x: auto; }

.badge { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.bg-primary   { background: var(--accent-soft); color: var(--accent); }
.bg-success   { background: #dcfce7; color: #166534; }
.bg-secondary { background: #F1F5F9; color: #475569; }
.bg-danger    { background: #fee2e2; color: #991b1b; }
.bg-warning   { background: #fef3c7; color: #92400e; }
.bg-light     { background: #F1F5F9; color: #475569; }
.text-dark    { color: #475569; }

.progress { height: 7px; background: #EDF1F9; border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 999px; background: var(--accent); }
.progress-bar.bg-success   { background: var(--ok); }
.progress-bar.bg-secondary { background: #94A3B8; }

/* Кнопки и поля бутстраповских имён — в нашем виде */
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-sm);
       padding: 10px 18px; font-weight: 600; font-size: 14.5px; border: 1px solid transparent; cursor: pointer; }
.btn-sm { padding: 7px 13px; font-size: 13px; border-radius: 10px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dk); color: #fff; }
.btn-outline-secondary { background: #fff; color: var(--text); border-color: var(--line); }
.btn-outline-secondary:hover { background: #f7f9ff; color: var(--text); border-color: var(--line-2); }
.btn-outline-success { background: #fff; color: #166534; border-color: #bbf7d0; }
.btn-outline-success:hover { background: #f0fdf4; color: #166534; }
.btn-outline-danger { background: #fff; color: var(--danger); border-color: #fecaca; }
.btn-outline-danger:hover { background: #fef2f2; color: var(--danger); }

.form-control, .form-select {
    width: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 10px 13px; font-size: 14.5px; color: var(--text); font-family: inherit;
}
.form-control:focus, .form-select:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(43,95,255,.12);
}
.form-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.form-check { display: flex; align-items: center; gap: 8px; }
.form-check-input { width: 17px; height: 17px; accent-color: var(--accent); }

.alert { border-radius: var(--radius-sm); padding: 13px 16px; font-size: 14.5px; margin-bottom: 16px; }
.alert-success { background: #dcfce7; color: #14532d; }
.alert-danger  { background: #fee2e2; color: #7f1d1d; }
.alert-warning { background: #fef3c7; color: #78350f; }

.pagination { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; }
.page-link { display: block; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line);
             background: #fff; color: var(--text); font-size: 13.5px; }
.page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: #fff; }

@media (max-width: 991px) {
    .col-6, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-7, .col-lg-8, .col-md-6, .col-sm-6 {
        flex: 0 0 100%; max-width: 100%;
    }
}

/* ============ Иврит ============
   Системные ивритские шрифты Windows — David, Frank Ruehl — с засечками и
   для экрана тяжелы: огласовки в них сливаются с буквой. Берём тот же Noto
   Sans Hebrew, что стоит в программе, чтобы буква выглядела одинаково и
   в админке, и в приложении.

   isolate обязателен: ивритский кусок стоит внутри русской фразы, и без
   изоляции соседние скобки и запятые перепрыгивают на другую сторону. */
.he {
    font-family: 'Noto Sans Hebrew', 'Segoe UI Historic', 'Arial Hebrew', 'David', sans-serif;
    direction: rtl;
    unicode-bidi: isolate;
    line-height: 1.85;
}

/* Счётчик на пункте меню админки.

   Прижат вправо: подписи разной длины, и число сразу за словом у одних
   пунктов липнет к тексту, у других висит в пустоте. На выбранном пункте
   фон уже синий, поэтому там цвета меняются местами — иначе значок на нём
   пропадал бы. Раскладку .adm-link не трогаем: она уже flex. */
.adm-link .adm-count {
    background: #2B5FFF;
    color: #fff;
    margin-left: auto;
    min-width: 20px;
    text-align: center;
}

.adm-link.active .adm-count {
    background: #fff;
    color: var(--accent);
}

/* ============ Заявки в админке ============
   Гармошка на <details>: своего скрипта не нужно, и строка раскрывается
   с клавиатуры сама. Стандартный треугольник убираем — рисуем свой,
   чтобы он поворачивался вместе с раскрытием. */
.rep { padding: 0; margin-bottom: 12px; }

.rep > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius);
}

.rep > summary::-webkit-details-marker { display: none; }
.rep > summary:hover { background: var(--accent-soft); }
.rep[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }

/* Своя стрелка. Поворот, а не два разных знака: так видно само движение */
.rep > summary::before {
    content: "";
    width: 7px; height: 7px;
    border-right: 2px solid var(--faint);
    border-bottom: 2px solid var(--faint);
    transform: rotate(-45deg);
    transition: transform .15s ease;
    flex: 0 0 auto;
    margin-right: 2px;
}

.rep[open] > summary::before { transform: rotate(45deg); }

.rep-body { padding: 16px 18px 18px; }

/* Обрывок жалобы в свёрнутой строке: по нему видно, стоит ли раскрывать */
.rep-peek {
    color: var(--muted);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 340px;
}

.rep[open] .rep-peek { display: none; }

/* Сама жалоба. Пунктир, а не заливка: блок стоит среди других текстов,
   и сплошной фон спорил бы с карточкой, в которой он лежит. */
.rep-what {
    border: 1px dashed var(--accent);
    border-radius: 10px;
    padding: 11px 13px;
    white-space: pre-wrap;
}

/* Красная кнопка. В админке её раньше не было: отвязка устройства — первое
   действие, которое стоит отличать от остальных, потому что человек после
   него выйдет из программы на своём компьютере. */
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #9b1c14; color: #fff; border-color: #9b1c14; }

/* ============================ Чаты поддержки (админка) ============================
   Переписка с пользователями через бота в Telegram — в формате мессенджера:
   слева список, справа пузырьки. На телефоне колонки сменяют друг друга. */
.chat-wrap { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - 150px); min-height: 480px;
             background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.chat-list { border-right: 1px solid var(--line); overflow-y: auto; }
.chat-empty { padding: 40px 20px; text-align: center; }
.chat-item { display: flex; align-items: center; gap: 11px; padding: 11px 14px; color: var(--text);
             border-bottom: 1px solid var(--line); text-decoration: none; position: relative; }
.chat-item:hover { background: #f6f8fc; color: var(--text); text-decoration: none; }
.chat-item.on { background: var(--accent-soft); }
.chat-item.unread .chat-item-name { font-weight: 700; }
.chat-ava { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: var(--accent);
            color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.chat-item-body { flex: 1; min-width: 0; }
.chat-item-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.chat-item-name { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-time { font-size: 12px; white-space: nowrap; }
.chat-item-last { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.chat-badge { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent);
              color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.chat-closed-ic { color: var(--faint); font-size: 14px; }

.chat-pane { display: flex; flex-direction: column; min-width: 0; position: relative; }
.chat-pane .chat-empty { margin: auto; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.chat-back { display: none; border: 0; background: transparent; font-size: 20px; color: var(--muted); cursor: pointer; padding: 4px; }
.chat-who { flex: 1; min-width: 0; }
.chat-name { font-weight: 700; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-sub { font-size: 12.5px; margin-top: 1px; }

.chat-msgs { flex: 1; overflow-y: auto; padding: 16px 18px; background: #f6f8fc; display: flex; flex-direction: column; gap: 6px; }
.chat-day { text-align: center; margin: 8px 0 4px; }
.chat-day span { display: inline-block; padding: 3px 10px; border-radius: 10px; background: #e6eaf3; color: var(--muted); font-size: 12px; }
.msg { max-width: min(72%, 620px); padding: 8px 12px 6px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.msg.in  { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.out { align-self: flex-end; background: var(--accent-soft); border: 1px solid #d9e1ff; border-bottom-right-radius: 4px; }
.chat-text { white-space: pre-wrap; word-wrap: break-word; }
.chat-photo { display: block; max-width: 320px; max-height: 320px; border-radius: 10px; margin-bottom: 6px; }
.chat-meta { font-size: 11px; color: var(--faint); text-align: right; margin-top: 3px; }
.msg.out .chat-meta { color: #7b8cc4; }

.chat-compose { display: flex; gap: 8px; align-items: flex-end; padding: 12px 14px; border-top: 1px solid var(--line); }
.chat-compose textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
                         font: inherit; font-size: 14.5px; line-height: 1.45; max-height: 180px; outline: none; }
.chat-compose textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chat-compose .btn { height: 42px; width: 46px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; }
.chat-note { padding: 0 16px 8px; min-height: 18px; }

@media (max-width: 900px) {
    .chat-wrap { grid-template-columns: 1fr; height: calc(100vh - 120px); }
    .chat-list { border-right: 0; }
    .chat-pane { display: none; }
    .chat-wrap.has-chat .chat-list { display: none; }
    .chat-wrap.has-chat .chat-pane { display: flex; }
    .chat-back { display: inline-block; }
    .msg { max-width: 86%; }
}

/* Повторяющиеся адреса в таблицах админки: один цвет — один адрес */
.ip-dup { display: inline-block; padding: 1px 7px; border-radius: 7px; border: 1px solid transparent; cursor: default; }
.ip-dup b { font-weight: 700; opacity: .75; }
.ip-g0 { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.ip-g1 { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.ip-g2 { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.ip-g3 { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.ip-g4 { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.ip-g5 { background: #fce7f3; color: #9d174d; border-color: #fbcfe8; }
.ip-g6 { background: #cffafe; color: #155e75; border-color: #a5f3fc; }
.ip-g7 { background: #ffedd5; color: #9a3412; border-color: #fed7aa; }
tr.ip-hot > td { background: #fffbeb !important; }

/* Блок поддержки в Telegram на странице контактов */
.tg-support { display: flex; gap: 26px; align-items: flex-start; padding: 30px 32px; }
.tg-support:hover { transform: none; }
.tg-support-ic { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 18px; background: #E8F5FD; color: #2AABEE;
                 display: flex; align-items: center; justify-content: center; font-size: 34px; }
.tg-support-body { flex: 1; min-width: 0; }
.tg-support-body h3 { margin-top: 8px; font-size: 22px; }
.tg-support-body p { margin-top: 8px; font-size: 15.5px; }
.tg-support-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--text); font-size: 15px; }
.tg-support-list i { color: #16a34a; margin-right: 6px; }
@media (max-width: 640px) {
    .tg-support { flex-direction: column; gap: 16px; padding: 24px 20px; }
    .tg-support-body h3 { font-size: 19px; }
}

/* Тема обращения и шаблоны ответов в чате поддержки */
.chat-topic { display: inline-block; padding: 0 7px; border-radius: 6px; background: #e6eaf3; color: var(--muted); font-size: 11.5px; font-weight: 600; vertical-align: middle; }
.chat-tpl { position: relative; }
.chat-tpl .btn { height: 42px; width: 46px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; }
.chat-tpl-menu { position: absolute; bottom: 48px; left: 0; min-width: 260px; max-width: 360px; background: #fff; border: 1px solid var(--line);
                 border-radius: 12px; box-shadow: 0 12px 32px rgba(13,17,26,.14); padding: 6px; z-index: 20; }
.chat-tpl-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px;
                 font: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
.chat-tpl-item:hover { background: var(--accent-soft); color: var(--accent); }
.chat-tpl-manage { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; color: var(--muted); font-size: 13px; }
.chat-tpl-editor { position: absolute; inset: 0; background: #fff; padding: 16px 18px; overflow-y: auto; z-index: 15; }
.chat-tpl-row { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; display: grid; gap: 8px; }
.chat-tpl-row input, .chat-tpl-row textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 14px; }

/* Чат: скрытые блоки действительно скрыты (классы с display перебивали
   атрибут hidden), а лента сообщений умеет сжиматься внутри колонки */
.chat-pane [hidden] { display: none !important; }
.chat-msgs { min-height: 0; }
.chat-pane:not(.open) .chat-head, .chat-pane:not(.open) .chat-msgs, .chat-pane:not(.open) .chat-compose { display: none; }

/* Правая колонка чата — это <section>, а у секций сайта отступ 88px сверху
   и снизу: он сдвигал шапку чата и выталкивал ленту за край карточки */
.chat-wrap { grid-template-rows: minmax(0, 1fr); }
.chat-pane { padding: 0 !important; min-height: 0; overflow: hidden; }
.chat-list { min-height: 0; }

/* Вложения в чате: видео, кружки, голосовые, файлы */
.chat-video { display: block; max-width: 360px; max-height: 360px; border-radius: 10px; margin-bottom: 6px; background: #000; }
.chat-round { width: 240px; height: 240px; border-radius: 50%; object-fit: cover; }
.chat-audio { display: block; width: 280px; margin-bottom: 6px; }
.chat-file { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 8px; background: #f0f3fa; font-size: 14px; margin-bottom: 6px; }

/* Ленивые вложения: до загрузки — серая заглушка фиксированного размера,
   после — плавное появление, без прыжков ленты */
.chat-ph { display: block; width: 240px; height: 180px; border-radius: 10px; background: #e6eaf3; margin-bottom: 6px; overflow: hidden; position: relative; }
.chat-ph::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-100%); animation: chat-shimmer 1.4s infinite; }
.chat-ph.ready { width: auto; height: auto; background: transparent; }
.chat-ph.ready::before, .chat-ph.broken::before { animation: none; display: none; }
.chat-ph.broken { background: #fee2e2; }
.chat-photo.lazy { opacity: 0; transition: opacity .25s; }
.chat-photo.lazy.ready { opacity: 1; }
.chat-ph.ready .chat-photo { margin-bottom: 0; }
.chat-video.lazy:not(.ready), .chat-audio.lazy:not(.ready) { background: #e6eaf3; }
@keyframes chat-shimmer { to { transform: translateX(100%); } }

/* Широкий снимок внутри раздела: как элемент галереи (щелчок открывает
   его целиком), но показан полностью, а не обрезанной плиткой */
.shot-wide { width: 100%; }
.shot-wide img { height: auto !important; object-fit: contain !important; }

/* ---- Кружок: круглое видео, кольцо прогресса, кнопка по центру ---- */
.vn { position: relative; width: 240px; height: 240px; border-radius: 50%; overflow: hidden; background: #0d111a; cursor: pointer;
      margin-bottom: 6px; box-shadow: 0 6px 18px rgba(13,17,26,.18); user-select: none; }
.vn-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vn-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.vn-ring circle { fill: none; stroke-width: 3; }
.vn-track { stroke: rgba(255,255,255,.28); }
.vn-prog { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.vn-play { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border: 0; border-radius: 50%;
           background: rgba(13,17,26,.55); color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center;
           cursor: pointer; transition: opacity .15s, transform .15s; backdrop-filter: blur(2px); }
.vn-play:hover { transform: scale(1.06); background: rgba(13,17,26,.7); }
.vn.playing .vn-play { opacity: 0; }
.vn.playing:hover .vn-play { opacity: 1; }
.vn-time { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 3px 10px; border-radius: 10px;
           background: rgba(13,17,26,.6); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; pointer-events: none; }
.vn-mute { position: absolute; right: 16px; top: 16px; width: 32px; height: 32px; border: 0; border-radius: 50%;
           background: rgba(13,17,26,.55); color: #fff; font-size: 15px; display: flex; align-items: center; justify-content: center;
           cursor: pointer; opacity: 0; transition: opacity .15s; }
.vn:hover .vn-mute { opacity: 1; }

/* ---- Голосовое: кнопка, «волна», время — как в мессенджере ---- */
.vc { display: flex; align-items: center; gap: 12px; min-width: 280px; padding: 4px 2px 4px 0; margin-bottom: 4px; }
.vc-play { flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--accent); color: #fff;
           font-size: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, transform .1s; }
.vc-play:hover { background: var(--accent-dk); }
.vc-play:active { transform: scale(.96); }
.vc-body { flex: 1; min-width: 0; }
.vc-wave { display: flex; align-items: center; gap: 2px; height: 30px; cursor: pointer; }
.vc-wave i { flex: 1; min-width: 2px; border-radius: 2px; background: #c3cbe0; transition: background .1s; }
.vc-wave i.on { background: var(--accent); }
.msg.out .vc-wave i { background: #b7c3ee; }
.vc-time { margin-top: 4px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vc.playing .vc-time { color: var(--accent); }

/* ---- Эмодзи набора Apple ---- */
.emo { width: 1.3em; height: 1.3em; vertical-align: -0.28em; margin: 0 .02em; display: inline-block; }
.chat-item-last .emo { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }

/* Аватар из Telegram поверх буквы-заглушки; нет аватара — остаётся буква */
.chat-ava { position: relative; overflow: hidden; }
.chat-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chat-ava-head { flex: 0 0 40px; width: 40px; height: 40px; margin-right: 2px; }