*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
    font-family: "Geologica", sans-serif;
    color: #fff;
}

canvas {
    display: block;
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
/* ── News modal ── */
#news-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 100;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 40px 20px;
}
#news-modal.open     { display: block; }
#news-modal-inner    {
    max-width: 680px;
    margin: 0 auto;
    background: #0d1117;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    overflow: hidden;
    transition: max-width 0.3s ease, border-radius 0.3s ease, border-color 0.3s ease;
}
#news-modal-close {
    position: sticky;
    top: 16px;
    float: right;
    margin: 16px 16px 0 0;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    line-height: 32px;
    text-align: center;
    z-index: 1;
}
#news-modal-close:hover { background: rgba(255,255,255,0.18); }
#news-modal-content     { padding: 24px; }

/* ── Carousel ── */
.carousel {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 20px;
}
.carousel-track {
    display: flex;
    transition: transform 0.35s ease;
}
.carousel-track img {
    flex-shrink: 0;
    width: 100%;
    height: 320px;
    object-fit: cover;
}
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    border: none;
    color: #fff;
    font-size: 22px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}
.carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    cursor: pointer;
    transition: background 0.2s;
}
.carousel-dot.active { background: #fff; }

/* ── Адаптивность модала новости ── */

/* Широкие экраны — больше ширина */
@media (min-width: 900px) {
    #news-modal-inner { max-width: 860px; }
    .carousel-track img { height: 420px; }
    #news-modal-title { font-size: 26px; }
    #news-modal-content { padding: 32px; }
}
@media (min-width: 1400px) {
    #news-modal-inner { max-width: 1000px; }
    .carousel-track img { height: 480px; }
}

/* Телефон — полный экран */
@media (max-width: 600px) {
    #news-modal { padding: 0; }
    #news-modal-inner {
        max-width: 100%;
        min-height: 100dvh;
        border-radius: 0;
        border: none;
    }
    .carousel-track img { height: 220px; }
    #news-modal-content { padding: 16px; }
    #news-modal-title { font-size: 18px; }
    #news-modal-body  { font-size: 13px; }
    /* Картинки в тексте — всегда на всю ширину на телефоне */
    #news-modal-body img,
    #news-modal-body img.img-left,
    #news-modal-body img.img-right {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: .6em 0 !important;
    }
    #news-modal-close {
        top: 10px;
        margin: 10px 10px 0 0;
    }
}

#news-modal-meta  { font-size: 12px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
#news-modal-title { font-size: 22px; font-weight: 700; margin-bottom: 16px; line-height: 1.3; }
#news-modal-body  { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.8; overflow-wrap: break-word; word-break: break-word; }

/* Стили HTML-контента внутри тела новости */
#news-modal-body img  { max-width: 100%; height: auto; border-radius: 4px; display: block; margin: .6em auto; }
#news-modal-body img.img-left  { float: left;  margin: 0 14px .6em 0; display: inline; max-width: 50%; }
#news-modal-body img.img-right { float: right; margin: 0 0 .6em 14px; display: inline; max-width: 50%; }
/* Clearfix после float-картинок */
#news-modal-body p { overflow: hidden; margin: .4em 0; }
#news-modal-body h1   { font-size: 1.75em; font-weight: 700; margin: .6em 0 .3em; }
#news-modal-body h2   { font-size: 1.4em;  font-weight: 700; margin: .6em 0 .3em; }
#news-modal-body h3   { font-size: 1.18em; font-weight: 700; margin: .5em 0 .3em; }
#news-modal-body h4   { font-size: 1.04em; font-weight: 600; margin: .5em 0 .3em; }
#news-modal-body ul, #news-modal-body ol { padding-left: 1.6em; margin: .3em 0; }
#news-modal-body li   { margin: .2em 0; }
#news-modal-body blockquote { border-left: 3px solid rgba(120,80,255,.55); margin: .6em 0; padding: 4px 14px; color: rgba(255,255,255,.6); font-style: italic; }
#news-modal-body pre  { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1); border-radius: 5px; padding: 8px 12px; font-family: monospace; font-size: 12px; overflow-x: auto; white-space: pre-wrap; }
#news-modal-body a    { color: #7eb4ff; text-decoration: underline; }
#news-modal-body hr   { border: none; border-top: 1px solid rgba(255,255,255,.15); margin: .8em 0; }
#news-modal-body table { border-collapse: collapse; max-width: 100%; margin: .6em 0; }
#news-modal-body td, #news-modal-body th { border: 1px solid rgba(255,255,255,.2); padding: 5px 10px; min-width: 48px; }
#news-modal-body th   { background: rgba(255,255,255,.06); font-weight: 600; }

/* ── Hero image in modal ── */
#news-modal-hero {
    width: calc(100% + 48px);
    margin: -24px -24px 24px;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}
#news-modal-hero-img {
    width: 100%;
    height: auto;        /* показываем изображение целиком, не обрезаем */
    max-height: 600px;   /* ограничиваем максимальную высоту */
    object-fit: contain;
    display: block;
    background: #000;    /* чёрный фон если изображение не занимает всю ширину */
}
@media (min-width: 900px) {
    #news-modal-hero {
        width: calc(100% + 64px);
        margin: -32px -32px 24px;
        border-radius: 10px 10px 0 0;
    }
}
@media (max-width: 600px) {
    #news-modal-hero {
        width: 100%;
        margin: 0 0 16px;
        border-radius: 0;
    }
    #news-modal-hero-img { max-height: 300px; }
}

/* ── Video in modal ── */
#news-modal-video {
    margin: 24px 0;
}
#news-modal-video .video-wrap iframe {
    min-height: 320px;
    border-radius: 10px;
}

/* ── Reactions in modal ── */
#news-modal-reactions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    margin: 20px 0 4px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.07);
}

/* ── Comments in modal ── */
#news-modal-comments {
    margin-top: 8px;
    padding-top: 4px;
}
.cb-section-title {
    font-size: 16px; font-weight: 700;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ══════════════════════════════════════════════════════════
   PHOTO VIEWER MODE  (Telegram-style)
   .news-modal.photo-mode  — activates photo view
══════════════════════════════════════════════════════════ */

/* When in photo mode — hide article content, show photo view */
#news-modal.photo-mode #news-modal-content {
    display: none;
}
#news-modal.photo-mode #news-modal-close {
    display: none;  /* replaced by back button */
}

/* Photo view panel — fills the modal inner */
#modal-photo-view {
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 80vh;
    background: #000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#news-modal.photo-mode #modal-photo-view {
    display: flex;
}
#news-modal.photo-mode #news-modal-inner {
    max-width: 100vw;
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    border-color: transparent;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#news-modal.photo-mode {
    padding: 0;
    overflow: hidden;
}

/* Back button */
#modal-photo-back {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 10;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background 0.15s;
}
#modal-photo-back:hover { background: rgba(0,0,0,0.8); }

/* Photo track */
#modal-photo-track-wrap {
    width: 100%;
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
#modal-photo-track {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.modal-photo-slide {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    animation: photo-fade-in 0.2s ease;
}
.modal-photo-slide.active {
    display: flex;
}
.modal-photo-slide img {
    max-width: 100%;
    max-height: calc(100vh - 120px);
    object-fit: contain;
    border-radius: 4px;
    user-select: none;
    -webkit-user-drag: none;
}
@keyframes photo-fade-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* Nav arrows */
.modal-photo-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 22px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    backdrop-filter: blur(4px);
}
.modal-photo-nav:hover { background: rgba(0,0,0,0.75); }
#modal-photo-prev { left: 16px; }
#modal-photo-next { right: 16px; }

/* Caption and counter */
#modal-photo-caption {
    position: absolute;
    bottom: 40px;
    left: 0; right: 0;
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    padding: 0 60px;
    pointer-events: none;
}
#modal-photo-counter {
    position: absolute;
    bottom: 16px;
    left: 0; right: 0;
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    pointer-events: none;
}

/* Zoom cursor on clickable images in article mode */
#news-modal-hero-img { cursor: zoom-in; }
#carousel-track img  { cursor: zoom-in; }
/* Also for gallery blocks */
.dyn-gallery-img     { cursor: zoom-in; }

/* ══════════════════════════════════════════════════════════
   SURF-MOD-PROFILE — карточка профиля / форма логина
   Живёт в #surface-module-zone как обычный surf-mod виджет.
   Два состояния: user-card (залогинен) и form (гость).
══════════════════════════════════════════════════════════ */

/* ── Анимация появления (общая) ── */
@keyframes smp-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Размер виджета ── */
.surf-mod-profile {
    width: min(300px, 82vw);
    max-width: 100%;
    animation: smp-in 0.18s ease;
}

/* ─────────────────────────────────────────────────────────
   USER CARD
───────────────────────────────────────────────────────── */
.surf-mod-profile:not(.surf-mod-profile--form):not(.surf-mod-profile--verify) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 18px 16px;
}

/* Аватар */
.smp-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(255,255,255,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    overflow: hidden;
    flex-shrink: 0;
    user-select: none;
}
.smp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* Имя + кристалл */
.smp-name {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    text-align: center;
}

/* Подпись роли */
.smp-role {
    font-size: 12px;
    color: rgba(255,255,255,0.42);
    margin-top: -6px;
    text-align: center;
    letter-spacing: 0.02em;
}

/* Строка кнопок Просмотр/Редактор */
.smp-buttons {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Базовая кнопка */
.smp-btn {
    padding: 6px 14px;
    border-radius: 6px;
    font-family: "Geologica", sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Просмотр / Редактор */
.smp-btn-view,
.smp-btn-edit {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
}
.smp-btn-view:hover,
.smp-btn-edit:hover {
    background: rgba(255,255,255,0.13);
    color: #fff;
}
.smp-btn-view.active {
    background: rgba(255,255,255,0.11);
    border-color: rgba(255,255,255,0.38);
    color: #fff;
}
.smp-btn-edit.active {
    background: rgba(100,180,255,0.16);
    border-color: rgba(100,180,255,0.45);
    color: #9fd8ff;
}

/* Выйти */
.smp-btn-logout {
    background: transparent;
    border: 1px solid rgba(255,80,80,0.22);
    color: rgba(255,110,110,0.65);
}
.smp-btn-logout:hover {
    background: rgba(255,50,50,0.08);
    border-color: rgba(255,80,80,0.42);
    color: #ff9090;
}

/* ─────────────────────────────────────────────────────────
   FORM (гость)
───────────────────────────────────────────────────────── */
.surf-mod-profile--form {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 18px 18px 14px;
}

/* Табы */
.smp-tabs {
    display: flex;
    gap: 3px;
    margin-bottom: 14px;
    background: rgba(255,255,255,0.05);
    border-radius: 7px;
    padding: 3px;
}
.smp-tab {
    flex: 1;
    padding: 7px 0;
    background: transparent;
    border: none;
    border-radius: 5px;
    color: rgba(255,255,255,0.38);
    font-family: "Geologica", sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.14s, color 0.14s;
}
.smp-tab--active          { background: rgba(255,255,255,0.1); color: #fff; }
.smp-tab:hover:not(.smp-tab--active) { color: rgba(255,255,255,0.62); }

/* Ошибка */
.smp-error {
    min-height: 15px;
    font-size: 11px;
    color: #ff6b6b;
    margin-bottom: 8px;
    text-align: center;
}

/* Панель (одна активна) */
.smp-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.smp-panel--hidden { display: none; }

/* Инпуты */
.smp-input {
    display: block;
    width: 100%;
    margin-bottom: 9px;
    padding: 9px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: #fff;
    font-family: "Geologica", sans-serif;
    font-size: 13px;
    outline: none;
    transition: border-color 0.18s;
    box-sizing: border-box;
}
.smp-input::placeholder { color: rgba(255,255,255,0.24); }
.smp-input:focus         { border-color: rgba(255,255,255,0.36); }

/* Кнопка отправки формы */
.smp-submit {
    display: block;
    width: 100%;
    padding: 10px 0;
    margin-top: 2px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: #fff;
    font-family: "Geologica", sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: background 0.18s;
}
.smp-submit:hover    { background: rgba(255,255,255,0.15); }
.smp-submit:disabled { opacity: 0.5; cursor: default; }

/* ─────────────────────────────────────────────────────────
   VERIFY (экран подтверждения email)
───────────────────────────────────────────────────────── */
.surf-mod-profile--verify {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 18px 16px;
    text-align: center;
}
.smp-verify-icon  { font-size: 28px; line-height: 1; }
.smp-verify-title { font-size: 15px; font-weight: 700; color: #fff; }
.smp-verify-desc  {
    font-size: 12px;
    color: rgba(255,255,255,0.52);
    line-height: 1.6;
    margin-bottom: 4px;
}
.smp-verify-status {
    min-height: 16px;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
}
/* ── Underground overlay ── */
#underground-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    transform: translateY(100vh);
    will-change: transform;
    z-index: 10;
}
#underground-overlay.active {
    pointer-events: all;
}


/* ── News feed (programmatic scroll driven by underground.scrollY) ── */
#news-feed {
    flex: 1;
    overflow-y: scroll;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    padding: 72px 0 80px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}
#news-feed::-webkit-scrollbar       { width: 4px; }
#news-feed::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }

/* ── News feed inner wrapper ──
   flex + justify-content:center — единственный способ правильно
   центрировать 1, 2, N карточек на любом размере экрана.
   Карточка имеет фиксированную ширину (flex: 0 1 380px),
   браузер сам переносит строки. */

#news-feed-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}

/* sentinel и loader — всегда на всю ширину */
#news-feed-inner > #news-sentinel,
#news-feed-inner > #news-loader {
    width: 100%;
    flex-basis: 100%;
    flex-shrink: 0;
}

/* Карточки: фиксированная ширина, не растягиваются */
#news-feed-inner .news-card {
    flex: 0 1 380px;
    width: 380px;
    min-width: 0;
}

/* Мобилка — на всю ширину */
@media (max-width: 639px) {
    #news-feed-inner {
        padding: 0 12px;
        gap: 12px;
    }
    #news-feed-inner .news-card {
        flex: 0 1 100%;
        width: 100%;
    }
}

/* Планшет (640–1099px) — до 2 карточек в строку */
@media (min-width: 640px) and (max-width: 1099px) {
    #news-feed-inner .news-card {
        flex: 0 1 calc(50% - 10px);
        width: calc(50% - 10px);
        max-width: 460px;
    }
}

/* Десктоп (1100px+) — 3 карточки в строку */
@media (min-width: 1100px) {
    #news-feed-inner {
        max-width: 1300px;
        padding: 0 40px;
    }
    #news-feed-inner .news-card {
        flex: 0 1 calc(33.333% - 14px);
        width: calc(33.333% - 14px);
    }
}

/* Широкий экран (1600px+) — 4 карточки в строку */
@media (min-width: 1600px) {
    #news-feed-inner {
        max-width: 1700px;
    }
    #news-feed-inner .news-card {
        flex: 0 1 calc(25% - 15px);
        width: calc(25% - 15px);
    }
}

/* ── News cards ── */
.news-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px;
    margin-bottom: 24px;
    overflow: hidden;
    transition: border-color 0.2s, background 0.2s;
}
.news-card:hover {
    border-color: rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.06);
}

/* Image frame — fixed aspect ratio 3:2 (765×510) */
.news-card-img-wrap {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
}
.news-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.news-card:hover .news-card-img { transform: scale(1.03); }

.news-card-body   { padding: 20px 22px 22px; }
.news-card-meta   {
    font-size: 11px;
    color: rgba(255,255,255,0.38);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.news-card-title  {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.45;
    letter-spacing: -0.01em;
}
.news-card-excerpt {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    line-height: 1.65;
    margin-bottom: 18px;
}
.news-card-btn {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    color: rgba(255,255,255,0.85);
    background: transparent;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.news-card-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.55);
    color: #fff;
}

/* ── Infinite scroll sentinel + loader ── */
.news-load-sentinel { height: 1px; }

.news-loader {
    display: none;
    justify-content: center;
    padding: 20px 0;
}
.news-loader.visible { display: flex; }

.news-loader-ring {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: rgba(255,255,255,0.6);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── News card skeleton (shimmer placeholder) ── */
/* Структура: .news-card--skeleton > .ncs-img + .ncs-body > .ncs-line* */

@keyframes ncs-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

/* Общий shimmer-фон для всех частей skeleton */
.news-card--skeleton .ncs-img,
.news-card--skeleton .ncs-line {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.10) 40%,
        rgba(255,255,255,0.04) 80%
    );
    background-size: 800px 100%;
    animation: ncs-shimmer 1.6s ease-in-out infinite;
    border-radius: 6px;
}

/* Картинка-заглушка — такой же aspect-ratio как реальная */
.news-card--skeleton .ncs-img {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 0;
}

/* Тело */
.news-card--skeleton .ncs-body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Строки-заглушки */
.ncs-line            { height: 12px; width: 100%; }
.ncs-line--meta      { width: 38%;  height: 10px; opacity: 0.6; }
.ncs-line--title     { height: 18px; width: 90%; }
.ncs-line--text      { height: 11px; }
.ncs-line--btn       { height: 32px; width: 140px; border-radius: 6px; margin-top: 4px; }
.ncs-line--short     { width: 65%; }


/* ── Surface go-underground button ── */
#go-underground-btn {
    position: fixed;
    bottom: 68px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 24px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
    letter-spacing: 0.06em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, background 0.2s;
    z-index: 5;
}
#go-underground-btn.visible { opacity: 1; pointer-events: all; }
#go-underground-btn:hover   { background: rgba(255,255,255,0.15); }

/* ── Up-arrow (return to surface) ── */
#up-arrow-btn {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: rgba(10,14,22,0.88);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 24px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, background 0.15s, border-color 0.15s;
    z-index: 50;
    backdrop-filter: blur(10px);
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    font-family: inherit;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
#up-arrow-btn::before {
    content: "↑";
    font-size: 15px;
    color: rgba(255,255,255,0.6);
}
#up-arrow-btn.visible  { opacity: 1; pointer-events: all; }
#up-arrow-btn:hover    { background: rgba(20,26,38,0.96); border-color: rgba(255,255,255,0.35); color: #fff; }
#up-arrow-btn img      { display: none; }

/* ── Generic HTML page instance container ── */
#page-instance-container {
    flex: 1;
    overflow-y: scroll;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 72px 24px 80px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}
#page-instance-container::-webkit-scrollbar       { width: 4px; }
#page-instance-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }

/* ══════════════════════════════════════════════════════════
   DYNAMIC SECTION PAGE
══════════════════════════════════════════════════════════ */
/* dynamic sections reuse #page-instance-container for scroll support */
#dynamic-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Block wrapper ── */
.dyn-block-wrapper {
    position: relative;
    margin-bottom: 32px;
    min-height: 40px; /* гарантирует что даже пустой блок можно навести */
}
/* Контейнерные блоки (tabs/grid) — controls те же, но wrapper нужен padding сверху */
.dyn-block-container {
    padding-top: 0;
}
.dyn-block-container .dyn-ctrl-tap-toggle {
    top: 4px; right: 4px;
}
/* Заглушка для пустых блоков */
.dyn-block-empty-hint {
    padding: 12px 16px;
    color: rgba(255,255,255,0.25);
    font-size: 13px;
    font-style: italic;
    border: 1px dashed rgba(255,255,255,0.12);
    border-radius: 8px;
    text-align: center;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ── Admin controls — float INSIDE block at top-right ── */
.dyn-block-controls {
    position: absolute;
    top: 4px; right: 4px;        /* ВНУТРИ блока, не за его краем */
    display: flex;
    flex-direction: row;         /* горизонтально */
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 20;
    background: rgba(14,18,28,0.85);
    border-radius: 8px;
    padding: 3px 5px;
    border: 1px solid rgba(255,255,255,0.1);
    /* Не нужны padding-left/margin-left — больше нет выноса вправо */
}
/* Controls shown on hover (desktop) or via JS .visible (touch) */
.dyn-block-wrapper:hover .dyn-block-controls,
.dyn-block-controls.visible {
    opacity: 1;
    pointer-events: all;
}
/* Контейнеры — controls видны при наведении на весь блок */
.dyn-block-container:hover .dyn-block-controls {
    opacity: 1;
    pointer-events: all;
}
.dyn-ctrl-btn {
    width: 36px; height: 36px;
    background: rgba(20,24,32,0.92);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.dyn-ctrl-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.4); }
.dyn-ctrl-del:hover { background: rgba(200,40,40,0.25); border-color: rgba(255,80,80,0.5); }
.dyn-ctrl-btn:disabled { opacity: 0.25; cursor: default; pointer-events: none; }

/* ── Add between ── */
.dyn-add-between {
    display: flex; justify-content: center;
    margin: 4px 0 12px;
    opacity: 0;
    transition: opacity 0.15s;
}
#dynamic-inner:hover .dyn-add-between { opacity: 1; }
.dyn-add-between-btn {
    padding: 3px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.2);
    border-radius: 20px;
    color: rgba(255,255,255,0.4);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.15s;
}
.dyn-add-between-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}

/* ── Block content ── */
.dyn-block-title {
    font-size: 22px; font-weight: 700;
    margin: 0 0 18px;
    letter-spacing: -0.01em;
    line-height: 1.45;
}
.dyn-block-text {
    font-size: 14px; line-height: 1.85;
    color: rgba(255,255,255,0.75);
}
.dyn-html-block { line-height: 1.7; font-size: 14px; }
.dyn-media-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.dyn-media-img  { margin: 0; }
.dyn-media-img img { max-width: 100%; border-radius: 8px; display: block; }
.dyn-media-img figcaption { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 4px; }
.dyn-media-doc {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: rgba(255,255,255,0.8);
    text-decoration: none; font-size: 13px;
    transition: background 0.15s;
}
.dyn-media-doc:hover { background: rgba(255,255,255,0.12); }

/* ── Team cards ── */
.team-cards {
    display: flex; flex-wrap: wrap; gap: 16px;
    margin-top: 12px;
}
.team-card {
    width: 140px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 18px 12px 14px;
    display: flex; flex-direction: column; align-items: center;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.18s;
    text-align: center;
}
.team-card:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-2px);
}
.team-card-photo {
    width: 72px; height: 72px; border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 700; color: #fff;
    margin-bottom: 12px;
}
.team-card-photo img { width:100%; height:100%; object-fit:cover; }
.team-card-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.team-card-role { font-size: 11px; color: rgba(255,255,255,0.45); }

/* ── Gallery ── */
.dyn-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px; margin-top: 12px;
}
.gallery-item img {
    width: 100%; aspect-ratio: 1;
    object-fit: cover; border-radius: 8px; display: block;
}

/* ══════════════════════════════════════════════════════════
   TEAM BIO MODAL
══════════════════════════════════════════════════════════ */
#team-bio-modal {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.18s;
}
#team-bio-modal.visible { opacity: 1; }
#team-bio-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
}
#team-bio-box {
    position: relative; z-index: 1;
    width: min(400px, 90vw);
    background: rgba(12,16,24,0.97);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 32px 28px 28px;
    display: flex; flex-direction: column; align-items: center;
    animation: modal-in 0.18s ease;
}
#team-bio-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none; color: rgba(255,255,255,0.5);
    font-size: 18px; cursor: pointer;
}
#team-bio-photo {
    width: 88px; height: 88px; border-radius: 50%;
    overflow: hidden; background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; font-weight: 700; color: #fff;
    margin-bottom: 16px;
}
#team-bio-photo img { width:100%; height:100%; object-fit:cover; }
#team-bio-name  { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
#team-bio-role  { font-size: 13px; color: rgba(255,255,255,0.45); margin-bottom: 14px; }
#team-bio-text  { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.7); text-align: center; }
#team-bio-links { font-size: 12px; color: rgba(255,255,255,0.35); margin-top: 12px; text-align: center; }

/* ══════════════════════════════════════════════════════════
   BLOCK EDITOR MODAL
══════════════════════════════════════════════════════════ */
#block-editor-modal {
    position: fixed; inset: 0; z-index: 300;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s;
}
#block-editor-modal.visible { opacity: 1; }
#be-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.72); backdrop-filter: blur(6px);
}
#be-box {
    position: relative; z-index: 1;
    width: min(860px, 96vw);
    max-height: 90vh;
    display: flex; flex-direction: column;
    background: rgba(10,14,22,0.99);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    animation: modal-in 0.15s ease;
    overflow: hidden;
}
#be-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 24px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 16px; font-weight: 600;
    flex-shrink: 0;
}
#be-close {
    background: none; border: none; color: rgba(255,255,255,0.5);
    font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 4px;
    transition: color 0.15s;
}
#be-close:hover { color: #fff; }
#be-type-row {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 14px 24px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.be-type-btn {
    padding: 6px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    color: rgba(255,255,255,0.5);
    font-family: inherit; font-size: 12px; cursor: pointer;
    transition: all 0.15s;
}
.be-type-btn.active, .be-type-btn:hover {
    background: rgba(255,255,255,0.13);
    border-color: rgba(255,255,255,0.4);
    color: #fff;
}
#be-fields {
    padding: 16px 24px 0;
    display: flex; flex-direction: column; gap: 8px;
    overflow-y: auto; flex: 1;
}
.be-label  { font-size: 11px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: .08em; margin-top: 8px; }
.be-input  {
    padding: 9px 13px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 7px;
    color: #fff; font-family: inherit; font-size: 13px; outline: none;
}
.be-input:focus { border-color: rgba(255,255,255,0.35); }
.be-textarea {
    padding: 9px 13px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 7px;
    color: #fff; font-family: inherit; font-size: 13px; outline: none;
    resize: vertical; min-height: 60px;
}
.be-textarea-code { font-family: monospace; font-size: 12px; }
.be-btn-secondary {
    padding: 7px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    color: rgba(255,255,255,0.65);
    font-family: inherit; font-size: 12px; cursor: pointer;
    align-self: flex-start; transition: background 0.15s;
}
.be-btn-secondary:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Media rows */
.be-media-row {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 6px;
}
.be-media-row .be-input { flex: 1; }
.be-media-type { font-size: 16px; flex-shrink: 0; }
.be-media-remove {
    background: none; border: none;
    color: rgba(255,80,80,0.6); font-size: 14px; cursor: pointer;
    padding: 4px 6px; border-radius: 4px; flex-shrink: 0;
}
.be-media-remove:hover { background: rgba(255,60,60,0.15); color: #ff6b6b; }

/* Team rows */
.be-team-row {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 12px; margin-bottom: 8px;
    display: flex; gap: 10px;
}
.be-team-fields { flex: 1; display: flex; flex-direction: column; gap: 5px; }

#be-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
#be-error { font-size: 12px; color: #ff6b6b; }
#be-save {
    padding: 10px 28px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 7px;
    color: #fff; font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: background 0.2s;
}
#be-save:hover { background: rgba(255,255,255,0.18); }

/* ══════════════════════════════════════════════════════════
   SECTION EDITOR (surface inline)
══════════════════════════════════════════════════════════ */
#section-editor-overlay {
    position: fixed; z-index: 50;
    display: none;
    gap: 6px;
}
#section-editor-overlay button {
    width: 34px; height: 34px;
    background: rgba(10,14,22,0.9);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
#se-delete-btn:hover { background: rgba(180,30,30,0.4) !important; border-color: rgba(255,80,80,0.5) !important; }

/* ── Section editor dialog ── */
#se-dialog {
    position: fixed; inset: 0; z-index: 300;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s;
}
#se-dialog.visible { opacity: 1; }
#se-dialog-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
}
#se-dialog-box {
    position: relative; z-index: 1;
    width: min(480px, 92vw);
    background: rgba(10,14,22,0.98);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 24px;
    display: flex; flex-direction: column; gap: 8px;
    animation: modal-in 0.15s ease;
}
#se-dialog-header {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 16px; font-weight: 600; margin-bottom: 8px;
}
#se-dialog-close {
    background: none; border: none; color: rgba(255,255,255,0.5);
    font-size: 18px; cursor: pointer;
}
#se-dialog-footer {
    display: flex; justify-content: space-between; align-items: center; margin-top: 8px;
}
#se-dialog-error { font-size: 12px; color: #ff6b6b; }
#se-dialog-save {
    padding: 10px 28px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 7px;
    color: #fff; font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: background 0.2s;
}
#se-dialog-save:hover { background: rgba(255,255,255,0.18); }

@keyframes modal-in {
    from { opacity:0; transform: scale(0.97) translateY(6px); }
    to   { opacity:1; transform: scale(1)    translateY(0);   }
}

/* ══════════════════════════════════════════════════════════
   ACCORDION BLOCK
══════════════════════════════════════════════════════════ */
.acc-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.acc-item {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s;
}
.acc-item[open] { border-color: rgba(255,255,255,0.2); }
.acc-summary {
    padding: 13px 16px;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex; align-items: center; justify-content: space-between;
    user-select: none;
}
.acc-summary::-webkit-details-marker { display: none; }
.acc-summary::after {
    content: "›";
    font-size: 18px; font-weight: 400;
    color: rgba(255,255,255,0.35);
    transition: transform 0.2s;
    display: inline-block;
}
.acc-item[open] .acc-summary::after { transform: rotate(90deg); }
.acc-body {
    padding: 0 16px 14px;
    font-size: 13px; line-height: 1.7;
    color: rgba(255,255,255,0.65);
}
/* Стили HTML-форматирования внутри аккордеона */
.acc-body p { margin: .35em 0; }
.acc-body b, .acc-body strong { font-weight: 700; }
.acc-body i, .acc-body em { font-style: italic; }
.acc-body u { text-decoration: underline; }
.acc-body s { text-decoration: line-through; }
.acc-body a { color: #7eb4ff; text-decoration: underline; }
.acc-body ul, .acc-body ol { padding-left: 1.5em; margin: .3em 0; }
.acc-body li { margin: .15em 0; }
.acc-body h1 { font-size: 1.6em; font-weight: 700; margin: .5em 0 .3em; }
.acc-body h2 { font-size: 1.3em; font-weight: 700; margin: .5em 0 .3em; }
.acc-body h3 { font-size: 1.1em; font-weight: 700; margin: .5em 0 .3em; }
.acc-body blockquote {
    border-left: 3px solid rgba(120,80,255,.5);
    margin: .4em 0; padding: 3px 12px;
    color: rgba(255,255,255,.55); font-style: italic;
}
.acc-body pre {
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 5px; padding: 8px 12px;
    font-family: monospace; font-size: 12px;
    overflow-x: auto; white-space: pre-wrap;
}

/* ══════════════════════════════════════════════════════════
   DOC LIST BLOCK
══════════════════════════════════════════════════════════ */
.doclist-wrap {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 8px;
}
.doclist-wrap[open] { border-color: rgba(255,255,255,0.2); }
.doclist-toggle {
    padding: 13px 16px;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex; align-items: center; gap: 10px;
    user-select: none;
}
.doclist-toggle::-webkit-details-marker { display: none; }
.doclist-toggle::before { content: "📁"; }
.doclist-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,0.6);
}
.doclist-body { padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.doclist-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 7px;
    text-decoration: none; color: rgba(255,255,255,0.8);
    font-size: 13px;
    transition: background 0.15s, border-color 0.15s;
}
.doclist-item:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.2); color: #fff; }
.doclist-icon  { font-size: 16px; flex-shrink: 0; }
.doclist-name  { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doclist-arrow { font-size: 14px; color: rgba(255,255,255,0.3); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   LINKS BLOCK
══════════════════════════════════════════════════════════ */
.links-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.links-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.links-item:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.22);
    transform: translateX(3px);
}
.links-icon  { font-size: 18px; flex-shrink: 0; }
.links-label { font-size: 14px; font-weight: 600; color: #fff; flex: 1; }
.links-url   { font-size: 11px; color: rgba(255,255,255,0.3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }

/* ══════════════════════════════════════════════════════════
   USERS BLOCK
══════════════════════════════════════════════════════════ */
.users-list    { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.users-loading,
.users-empty   { font-size: 13px; color: rgba(255,255,255,0.3); padding: 12px 0; }
.users-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    transition: background 0.15s;
}
.users-row:hover { background: rgba(255,255,255,0.06); }
.users-av {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.1);
    overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700;
}
.users-av img    { width: 100%; height: 100%; object-fit: cover; display: block; }
.users-av-init   { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.users-info      { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.users-name      { font-size: 14px; font-weight: 600; }
.users-role      { font-size: 11px; color: rgba(255,255,255,0.38); text-transform: uppercase; letter-spacing: .06em; }
.users-days      { font-size: 12px; color: rgba(255,255,255,0.28); flex-shrink: 0; }

/* ── Block editor: accordion/link rows ── */
.be-accordion-row {
    display: flex; flex-direction: column; gap: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 7px; padding: 10px; margin-bottom: 6px;
}
.be-accordion-row-header {
    display: flex; gap: 8px; align-items: center;
}
.be-accordion-row-header .be-acc-title { flex: 1; min-width: 0; }
.be-accordion-row-header .be-acc-del   { flex-shrink: 0; }
.be-link-row {
    display: flex; gap: 6px; align-items: center; margin-bottom: 6px;
}

/* ══════════════════════════════════════════════════════════
   REACTIONS  (Telegram-style)
══════════════════════════════════════════════════════════ */
.news-card-reactions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    margin-bottom: 12px; min-height: 0;
}

/* Existing reaction pill */
.reaction-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px 4px 7px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 20px;
    font-family: inherit;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
    user-select: none;
    white-space: nowrap;
}
.reaction-btn:hover {
    background: rgba(255,255,255,0.11);
    border-color: rgba(255,255,255,0.28);
    transform: scale(1.06);
}
.reaction-btn.active {
    background: rgba(100,180,255,0.15);
    border-color: rgba(100,180,255,0.45);
    color: #fff;
}
.reaction-btn.active:hover {
    background: rgba(100,180,255,0.22);
}
.reaction-emoji { font-size: 16px; line-height: 1; }
.reaction-count { font-size: 12px; font-weight: 700; letter-spacing: -0.01em; }

/* "+" add button */
.reaction-add-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 28px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    font-size: 17px; line-height: 1;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    user-select: none;
}
.reaction-add-btn:hover {
    background: rgba(255,255,255,0.11);
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.85);
}

/* Emoji picker popup */
.reaction-picker {
    position: fixed; z-index: 500;
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 8px 10px;
    background: rgba(15,19,28,0.97);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55);
    backdrop-filter: blur(12px);
    animation: picker-in 0.14s ease;
    max-width: 260px;
}
.reaction-picker-btn {
    width: 38px; height: 38px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 20px; line-height: 1;
    cursor: pointer;
    transition: background 0.12s, transform 0.1s, border-color 0.12s;
    display: flex; align-items: center; justify-content: center;
}
.reaction-picker-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    transform: scale(1.22);
}

@keyframes picker-in {
    from { opacity: 0; transform: scale(0.88) translateY(6px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* ══════════════════════════════════════════════════════════
   VIDEO BLOCK
══════════════════════════════════════════════════════════ */
.video-wrap {
    position: relative;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    margin-top: 8px;
    /* preserve natural iframe ratio or default to 16:9 */
}
.video-wrap iframe {
    display: block;
    width: 100% !important;
    min-height: 360px;
    border: none;
}
.video-empty {
    padding: 20px;
    font-size: 13px;
    color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════
   COMMENTS BLOCK
══════════════════════════════════════════════════════════ */
.comments-block { margin-top: 8px; }
.cb-list { display: flex; flex-direction: column; gap: 1px; margin-bottom: 16px; }
.cb-empty {
    font-size: 13px; color: rgba(255,255,255,0.3);
    padding: 20px 0; text-align: center;
}
.cb-comment {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cb-comment:last-child { border-bottom: none; }
.cb-av {
    width: 36px; height: 36px; border-radius: 50%;
    overflow: hidden; flex-shrink: 0;
    background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
}
.cb-av img    { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-av-init   { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.cb-body      { flex: 1; min-width: 0; }
.cb-meta      { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.cb-username  { font-size: 13px; font-weight: 600; }
.cb-date      { font-size: 11px; color: rgba(255,255,255,0.3); }
.cb-edited    { font-size: 11px; color: rgba(255,255,255,0.2); font-style: italic; }
.cb-text      { font-size: 13px; line-height: 1.65; color: rgba(255,255,255,0.75); word-break: break-word; }
.cb-actions {
    display: flex; flex-direction: column; gap: 4px;
    flex-shrink: 0; align-self: flex-start; margin-top: 2px;
}
.cb-del-btn, .cb-edit-btn {
    background: none; border: none;
    font-size: 13px; cursor: pointer;
    padding: 2px 6px; border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}
.cb-del-btn  { color: rgba(255,80,80,0.4); }
.cb-edit-btn { color: rgba(255,255,255,0.3); }
.cb-del-btn:hover  { color: #ff6b6b; background: rgba(255,60,60,0.1); }
.cb-edit-btn:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.08); }
.cb-edit-area {
    margin-top: 8px;
}
.cb-edit-input {
    width: 100%;
    margin-bottom: 0;
}

/* Form */
.cb-form { display: flex; flex-direction: column; gap: 6px; }
.cb-input {
    padding: 10px 13px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #fff; font-family: inherit; font-size: 13px;
    outline: none; resize: none;
    transition: border-color 0.15s;
}
.cb-input:focus { border-color: rgba(255,255,255,0.3); }
.cb-form-footer {
    display: flex; justify-content: space-between; align-items: center;
}
.cb-char-count { font-size: 11px; color: rgba(255,255,255,0.25); }
.cb-send-btn {
    padding: 8px 20px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: #fff; font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background 0.15s;
}
.cb-send-btn:hover { background: rgba(255,255,255,0.15); }
.cb-form-error { font-size: 12px; color: #ff6b6b; min-height: 16px; }
.cb-login-hint {
    font-size: 13px; color: rgba(255,255,255,0.3);
    text-align: center; padding: 14px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Comments pagination ── */
.cb-header { margin-bottom: 12px; }
.cb-total  { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.5); }

.cb-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 4px; margin: 16px 0;
}
.cb-page-btn {
    min-width: 34px; height: 34px; padding: 0 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 7px;
    color: rgba(255,255,255,0.6);
    font-family: inherit; font-size: 13px; cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cb-page-btn:hover:not(:disabled) { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); color: #fff; }
.cb-page-btn.active { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.4); color: #fff; font-weight: 700; }
.cb-page-btn:disabled { opacity: 0.25; cursor: default; }
.cb-page-dots { font-size: 13px; color: rgba(255,255,255,0.3); padding: 0 4px; }

/* ── Prevent background scroll when modal is open ── */
body.modal-open {
    overflow: hidden;
    touch-action: none;
}
/* Разрешить touch-скролл внутри модалов */
body.modal-open #news-modal-inner,
body.modal-open #be-box,
body.modal-open [data-scrollable] {
    touch-action: pan-y;
}

/* ══════════════════════════════════════════════════════════
   GALLERY VIEWER (standalone lightbox for gallery blocks)
══════════════════════════════════════════════════════════ */
#gallery-viewer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 400;
    align-items: center;
    justify-content: center;
}
#gallery-viewer.open { display: flex; }

#gv-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(6px);
}
#gv-img-wrap {
    position: relative;
    z-index: 1;
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#gv-img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 6px;
    transition: opacity 0.18s;
    user-select: none;
    -webkit-user-drag: none;
}
#gv-close {
    position: fixed;
    top: 18px; right: 20px;
    z-index: 2;
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    color: #fff; font-size: 20px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
#gv-close:hover { background: rgba(255,255,255,0.22); }

#gv-back, #gv-next {
    position: fixed;
    top: 50%; transform: translateY(-50%);
    z-index: 2;
    width: 48px; height: 48px;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    color: #fff; font-size: 26px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
    backdrop-filter: blur(4px);
}
#gv-back:hover, #gv-next:hover { background: rgba(0,0,0,0.75); }
#gv-back { left: 16px; }
#gv-next { right: 16px; }

#gv-caption {
    position: fixed;
    bottom: 36px; left: 0; right: 0;
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    padding: 0 80px;
    pointer-events: none;
    z-index: 2;
}
#gv-counter {
    position: fixed;
    bottom: 14px; left: 0; right: 0;
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,0.3);
    pointer-events: none;
    z-index: 2;
}

/* ══════════════════════════════════════════════════════════════
   ROLE CRYSTALS & SHIMMER NICKNAMES
══════════════════════════════════════════════════════════════ */

/* Кристалл — базовый SVG-иконка через CSS */
.role-crystal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.role-crystal .crystal-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    position: relative;
    top: -1px;
}
.role-crystal .crystal-icon svg { width: 100%; height: 100%; }

/* Переливание — общий */
@keyframes shimmer-gold {
    0%   { color: #ffd700; text-shadow: 0 0 8px #ffa500aa; }
    25%  { color: #ffe066; text-shadow: 0 0 14px #ffcc00cc; }
    50%  { color: #ffb300; text-shadow: 0 0 10px #ff8c00bb; }
    75%  { color: #fff0a0; text-shadow: 0 0 16px #ffd700dd; }
    100% { color: #ffd700; text-shadow: 0 0 8px #ffa500aa; }
}
@keyframes shimmer-purple {
    0%   { color: #b57aff; text-shadow: 0 0 8px #8a2be2aa; }
    25%  { color: #d4a5ff; text-shadow: 0 0 14px #c084ffcc; }
    50%  { color: #9c40ff; text-shadow: 0 0 10px #7b00ffbb; }
    75%  { color: #e0c0ff; text-shadow: 0 0 16px #b57affdd; }
    100% { color: #b57aff; text-shadow: 0 0 8px #8a2be2aa; }
}
@keyframes shimmer-cyan {
    0%   { color: #40e0ff; text-shadow: 0 0 8px #00bcd4aa; }
    25%  { color: #80f0ff; text-shadow: 0 0 14px #40e0ffcc; }
    50%  { color: #00c8e8; text-shadow: 0 0 10px #0088aabb; }
    75%  { color: #b0f8ff; text-shadow: 0 0 16px #40e0ffdd; }
    100% { color: #40e0ff; text-shadow: 0 0 8px #00bcd4aa; }
}
@keyframes crystal-glow-gold {
    0%, 100% { filter: drop-shadow(0 0 3px #ffd700) drop-shadow(0 0 6px #ffa500); }
    50%       { filter: drop-shadow(0 0 6px #ffe066) drop-shadow(0 0 12px #ffcc00); }
}
@keyframes crystal-glow-purple {
    0%, 100% { filter: drop-shadow(0 0 3px #b57aff) drop-shadow(0 0 6px #8a2be2); }
    50%       { filter: drop-shadow(0 0 6px #d4a5ff) drop-shadow(0 0 12px #c084ff); }
}
@keyframes crystal-glow-cyan {
    0%, 100% { filter: drop-shadow(0 0 3px #40e0ff) drop-shadow(0 0 6px #00bcd4); }
    50%       { filter: drop-shadow(0 0 6px #80f0ff) drop-shadow(0 0 12px #40e0ff); }
}

.nick-admin    { animation: shimmer-gold   2.5s ease-in-out infinite; font-weight: 700; }
.nick-team     { animation: shimmer-purple 2.5s ease-in-out infinite; font-weight: 700; }
.nick-subscriber { animation: shimmer-cyan 3s ease-in-out infinite; font-weight: 600; }

.crystal-admin    { animation: crystal-glow-gold   2.5s ease-in-out infinite; }
.crystal-team     { animation: crystal-glow-purple 2.5s ease-in-out infinite; }
.crystal-subscriber { animation: crystal-glow-cyan 3s ease-in-out infinite; }

/* Дропдаун ролей — фикс отображения */
.adm-role-select {
    background: #1a1a2e !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    font-size: 13px !important;
    cursor: pointer !important;
    min-width: 140px !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
}
.adm-role-select option {
    background: #1a1a2e !important;
    color: #fff !important;
    padding: 6px !important;
}
.adm-role-select:focus {
    outline: none !important;
    border-color: rgba(255,255,255,0.35) !important;
}

/* Модал профиля участника */
.member-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }

.member-modal {
    background: #0f1520;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 32px;
    max-width: 440px;
    width: 90%;
    position: relative;
    max-height: 85vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.member-modal-close {
    position: absolute;
    top: 14px; right: 16px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}
.member-modal-close:hover { color: #fff; }
.member-modal-avatar {
    width: 88px; height: 88px;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: block;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
}
.member-modal-avatar-initials {
    width: 88px; height: 88px;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    background: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.6);
}
.member-modal-nick {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.member-modal-nick .crystal-icon { width: 22px; height: 22px; }
.member-modal-meta {
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    margin-bottom: 22px;
}
.member-modal-section {
    margin-bottom: 14px;
}
.member-modal-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,0.3);
    margin-bottom: 4px;
}
.member-modal-value {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
}
.member-modal-value:empty::before {
    content: "—";
    color: rgba(255,255,255,0.2);
}

/* ── Loading spinner (показывается пока грузится контент подземелья) ── */
/* ── Underground loading — skeleton вместо спиннера ──
   Имитирует реальную разметку dynamic-блоков:
   заголовок блока + строки текста + список участников с аватарами */
/* Underground loading — точно повторяет page-instance-container > dynamic-inner:
   padding: 72px 40px 80px (как у #page-instance-container)
   inner: max-width 1400px, margin auto, padding 0 40px (как у #dynamic-inner) */
#underground-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    /* page-instance-container padding */
    padding: 72px 40px 80px;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.25s ease;
    overflow: hidden;
    box-sizing: border-box;
}
#underground-loading.visible {
    opacity: 1;
}
/* Блоки — как dynamic-inner: max-width + inner padding */
.ug-skel-block {
    width: 100%;
    max-width: 1400px;
    /* Горизонтальный padding как у dynamic-inner */
    padding: 20px 40px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Shimmer-анимация — общая для всех skeleton элементов */
.ug-skel-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.10) 50%,
        rgba(255,255,255,0.04) 100%
    );
    background-size: 600px 100%;
    animation: ug-skel-anim 1.8s ease-in-out infinite;
    border-radius: 4px;
}
@keyframes ug-skel-anim {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

/* Блок — точно как dyn-block-wrapper */
.ug-skel-block {
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Заголовок блока */
.ug-skel-block-title {
    height: 18px;
    width: 180px;
    margin-bottom: 4px;
}

/* Строка текста */
.ug-skel-text {
    height: 13px;
}
.ug-skel-text--full  { width: 100%; }
.ug-skel-text--long  { width: 75%; }
.ug-skel-text--short { width: 45%; }

/* Строка участника — как users-row */
.ug-skel-user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ug-skel-user-row:last-child {
    border-bottom: none;
}

/* Аватар — круглый как users-av */
.ug-skel-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Имя и роль */
.ug-skel-user-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}
.ug-skel-user-name {
    height: 13px;
    width: 100px;
}
.ug-skel-user-role {
    height: 10px;
    width: 70px;
}

/* Спиннер для profile/admin страниц */
.ug-spinner-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ug-spinner-ring {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255,255,255,0.08);
    border-top-color: rgba(255,255,255,0.55);
    border-radius: 50%;
    animation: ug-spin 0.75s linear infinite;
}
@keyframes ug-spin { to { transform: rotate(360deg); } }

/* TextMedia */
.ug-skel-row { display:flex; gap:16px; align-items:flex-start; }
.ug-skel-col { flex:1; display:flex; flex-direction:column; gap:8px; }
.ug-skel-media { width:160px; height:120px; border-radius:8px; flex-shrink:0; }

/* Gallery */
.ug-skel-gallery { display:flex; gap:8px; flex-wrap:wrap; }
.ug-skel-gallery-item { flex:1 1 calc(33% - 6px); min-width:80px; height:100px; border-radius:8px; }

/* Video */
.ug-skel-video { width:100%; height:240px; border-radius:8px; }

/* Music */
.ug-skel-music-icon { width:32px; height:32px; border-radius:6px; flex-shrink:0; }

/* News feed карточки */
.ug-skel-block--news {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    border-bottom: none !important;
}
.ug-skel-news-card {
    flex: 0 1 calc(33.333% - 14px);
    display: flex; flex-direction: column; gap: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 0 0 16px;
    overflow: hidden;
}
.ug-skel-news-img { width:100%; height:180px; border-radius:0; margin-bottom:8px; }

/* Спиннер для profile/admin */
.ug-spinner-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ug-spinner-ring {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255,255,255,0.08);
    border-top-color: rgba(255,255,255,0.55);
    border-radius: 50%;
    animation: ug-spin 0.75s linear infinite;
}
@keyframes ug-spin { to { transform: rotate(360deg); } }

/* Адаптивность skeleton */
@media (max-width: 639px) {
    #underground-loading { padding: 16px 16px 40px !important; }
    .ug-skel-block { padding: 16px !important; }
    .ug-skel-media { width:100px; height:80px; }
    .ug-skel-news-card { flex: 0 1 100%; }
    .ug-skel-video { height:160px; }
    .ug-skel-gallery-item { flex: 0 1 calc(50% - 4px); }
}
@media (min-width: 640px) and (max-width: 1099px) {
    .ug-skel-news-card { flex: 0 1 calc(50% - 10px); }
}

/* ══════════════════════════════════════════════════════════
   COMMENT ENHANCEMENTS v2
══════════════════════════════════════════════════════════ */
.cb-form-wrap { position:relative; display:flex; gap:6px; align-items:flex-start; }
.cb-form-wrap .cb-input { flex:1; }
.cb-emoji-btn {
    flex-shrink:0; width:34px; height:34px;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
    border-radius:8px; font-size:16px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.15s; margin-top:2px;
}
.cb-emoji-btn:hover { background:rgba(255,255,255,0.14); }
.cb-emoji-picker:not(.cb-emoji-picker--portal) {
    position:absolute; top:calc(100% + 6px); right:0;
    display:flex; flex-wrap:wrap; gap:4px; padding:8px;
    background:rgba(14,18,28,0.97); border:1px solid rgba(255,255,255,0.15);
    border-radius:12px; z-index:200; width:220px;
    box-shadow:0 8px 24px rgba(0,0,0,0.5);
}
/* Portal-пикер — монтируется в body, position:fixed, не режется overflow:hidden.
   Ширина фиксирована: 6 кнопок × 32px + gap 4px × 5 + padding 8px × 2 = 228px */
.cb-emoji-picker--portal {
    position: fixed !important;   /* !important защищает от перезаписи дублями */
    z-index: 9999;
    display: grid;
    grid-template-columns: repeat(6, 32px);
    gap: 4px;
    padding: 8px;
    width: 228px;
    background: rgba(14, 18, 28, 0.98);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.75);
    /* Начальная позиция — будет заменена JS через rAF */
}
.cb-emoji-opt {
    width:32px; height:32px; background:none; border:none;
    font-size:18px; cursor:pointer; border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.1s;
}
.cb-emoji-opt:hover { background:rgba(255,255,255,0.12); }
.cb-link { color:#7b8cf6; text-decoration:underline; word-break:break-all; }
.cb-link:hover { color:#a0abf8; }
.cb-link-hidden { color:rgba(255,255,255,0.25); font-style:italic; font-size:.9em; cursor:default; }
.cb-reaction-bar {
    display:flex; flex-wrap:wrap; gap:4px; margin-top:6px;
    min-height:0; position:relative;
}
.cb-react-btn {
    display:inline-flex; align-items:center; gap:4px; padding:3px 9px;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
    border-radius:20px; font-size:14px; color:rgba(255,255,255,0.7);
    cursor:pointer; transition:all 0.15s;
}
.cb-react-btn span { font-size:12px; }
.cb-react-btn:hover { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.3); }
.cb-react-btn.mine { background:rgba(123,108,246,0.18); border-color:rgba(123,108,246,0.45); color:#b0aaff; }
.cb-react-btn.mine:hover { background:rgba(123,108,246,0.28); }
.cb-react-add {
    width:26px; height:26px; background:rgba(255,255,255,0.05);
    border:1px dashed rgba(255,255,255,0.2); border-radius:50%;
    color:rgba(255,255,255,0.4); font-size:14px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:all 0.15s;
}
.cb-react-add:hover { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.5); color:#fff; }
.cb-react-picker:not(.cb-emoji-picker--portal) { position:absolute; bottom:calc(100% + 6px); left:0; z-index:201; }

/* aliases for commentsBlock new classes */
.cb-emoji-item {
    width:32px; height:32px; background:none; border:none;
    font-size:18px; cursor:pointer; border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.1s;
}
.cb-emoji-item:hover { background:rgba(255,255,255,0.12); }
/* cb-emoji-picker и cb-react-picker grid — только для non-portal вариантов */
.cb-emoji-picker:not(.cb-emoji-picker--portal) {
    display:grid; grid-template-columns:repeat(6,32px);
}
.cb-react-picker:not(.cb-emoji-picker--portal) {
    display:grid; grid-template-columns:repeat(6,32px);
    padding:6px; background:rgba(14,18,28,0.97);
    border:1px solid rgba(255,255,255,0.15); border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,0.5);
}
.cb-reactions { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:6px; position:relative; }
.cb-react-add-wrap { position:relative; }
.cb-emoji-wrap { position:relative; }
.cb-react-btn.active { background:rgba(123,108,246,0.18); border-color:rgba(123,108,246,0.45); color:#b0aaff; }
.cb-react-btn.active:hover { background:rgba(123,108,246,0.28); }

/* ══════════════════════════════════════════════════════════
   SURFACE OVERLAY  — HTML UI replacing canvas drawText
   Sits above canvas, pointer-events managed by JS
══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   SURFACE OVERLAY — 5-row CSS Grid layout
   Row 1: Title carousel   (fixed height based on font)
   Row 2: Subtitle content (max 4 lines, auto height)
   Row 3: Surface module   (widget, auto height)
   Row 4: Spacer           (pushes character zone clear, 1fr but min 120px)
   Row 5: Dots + button    (fixed bottom)
═══════════════════════════════════════════════════════════ */
#surface-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    display: grid;
    /* Персонаж стоит на groundWorldY = 100vh - 192px.
       Row4 (spacer) = 192px ВСЕГДА — никогда не сжимается.
       Row3 (module) = minmax(0, 1fr) — получает остаток или сжимается до 0.
       Если viewport слишком маленький — module-zone просто обрезается,
       персонаж всегда виден. */
    grid-template-rows:
        /* row1: title */   auto
        /* row2: content */ auto
        /* row3: module */  minmax(0, 1fr)
        /* row4: spacer */  192px
        /* row5: ui */      auto;
    grid-template-columns: 1fr;
    align-items: start;
    padding-top: clamp(36px, 7vw, 80px);
    padding-bottom: 0;
    transition: opacity 0.05s linear;
    overflow: hidden;
}

/* ── Row 1: Title carousel ── */
#surface-titles {
    grid-row: 1;
    position: relative;
    width: 100%;
    height: clamp(40px, 8vw, 80px);
    pointer-events: none;
    overflow: visible;
}

.surf-title {
    background: none;
    border: none;
    outline: none;
    padding: 0;
    cursor: pointer;
    font-family: "Geologica", sans-serif;
    font-weight: 600;
    color: #888;
    white-space: nowrap;
    font-size: clamp(28px, 7vw, 56px);
    line-height: 1;
    transition: color 0.15s ease;
    will-change: transform, opacity;
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    pointer-events: none;
}
.surf-title.active   { color: #fff; pointer-events: auto; }
.surf-title.private  { color: #994444; }
.surf-title.private.active { color: #ff8888; }
.surf-title.private:hover  { color: #ffaaaa; }
.surf-title:not(.private):hover { color: rgba(255,255,255,0.85); }
/* Соседние заголовки — показываем что они кликабельны */
.surf-title:not(.active):not([style*="pointer-events: none"]):hover {
    color: rgba(255,255,255,0.75) !important;
    text-shadow: 0 0 20px rgba(120,80,255,0.4);
}
.surf-lock {
    font-size: 0.55em;
    vertical-align: middle;
    margin-left: 4px;
    position: relative;
    top: -2px;
}

/* ── Row 2: Subtitle text (max 4 lines) ── */
#surface-content {
    grid-row: 2;
    justify-self: center;
    width: min(560px, 84vw);
    margin-top: clamp(6px, 1.5vw, 18px);
    text-align: center;
    font-family: "Geologica", sans-serif;
    font-size: clamp(13px, 2.2vw, 20px);
    color: rgba(255,255,255,0.85);
    padding: 0 12px;
    pointer-events: none;
    line-height: 1.55;
    will-change: transform, opacity;
    transition: none; /* JS updates each frame */
    word-break: break-word;   /* длинные строки без пробелов переносятся */
    overflow-wrap: break-word;
    /* Max 4 lines */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    max-height: calc(1.55em * 4);
}

/* ── Row 3: Surface module zone ── */
#surface-module-zone {
    grid-row: 3;
    justify-self: center;
    width: min(580px, 90vw);
    margin-top: clamp(6px, 1.5vw, 16px);
    pointer-events: auto;
    z-index: 6;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

/* ── Row 4: Spacer = 192px — точно соответствует groundWorldY = 100vh - 192px.
   Персонаж ВСЕГДА виден — этот row никогда не сжимается. */
#surface-spacer {
    grid-row: 4;
    height: 192px;
}

/* ── Row 5: Dots + под землю button ── */
#surface-dots {
    grid-row: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1.8vw, 22px);
    pointer-events: auto;
    padding-bottom: 8px;
}

.surf-dot {
    background: rgba(255,255,255,0.35);
    border: none;
    outline: none;
    border-radius: 50%;
    width: 5px; height: 5px;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, width 0.2s, height 0.2s, transform 0.2s;
    position: relative;
}
.surf-dot::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
}
.surf-dot.active {
    background: rgba(255,255,255,0.9);
    width: 10px; height: 10px;
    transform: translateY(-2.5px);
}
.surf-dot:hover:not(.active) {
    background: rgba(255,255,255,0.65);
    transform: scale(1.4);
}

/* ── Responsive ── */
@media (max-width: 520px) {
    #surface-overlay { padding-top: 40px; }
    .surf-dot { width: 4px; height: 4px; }
    .surf-dot.active { width: 8px; height: 8px; }
    .surf-mod-news,
    .surf-mod-text,
    .surf-mod-search,
    .surf-mod-steam  { width: min(300px, 88vw); }
    .surf-mod-music  { width: min(280px, 86vw); }
    #surface-module-zone { width: min(300px, 90vw); }
}

/* Большие экраны — модули крупнее */
@media (min-width: 1200px) {
    #surface-module-zone { width: min(480px, 50vw); }
    .surf-mod-news,
    .surf-mod-text,
    .surf-mod-search,
    .surf-mod-steam  { width: min(420px, 45vw); }
    .surf-mod-music  { width: min(380px, 40vw); }
    .surf-mod-news-img-wrap { height: 180px; }
    .surf-mod-news-title { font-size: 17px; }
    .surf-mod-news-excerpt { font-size: 13px; -webkit-line-clamp: 3; }
    #surface-content { font-size: clamp(16px, 1.8vw, 24px); width: min(720px, 70vw); }
}

@media (min-width: 1600px) {
    #surface-module-zone { width: min(560px, 40vw); }
    .surf-mod-news,
    .surf-mod-text,
    .surf-mod-search,
    .surf-mod-steam  { width: min(500px, 38vw); }
    .surf-mod-news-img-wrap { height: 200px; }
}



/* ═══════════════════════════════════════════════════════════════
   TABS CONTAINER BLOCK
═══════════════════════════════════════════════════════════════ */

.tabs-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tabs-header {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 0 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 12px;
}

.tabs-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: rgba(255,255,255,0.55);
    font-family: inherit;
    font-size: 13px;
    padding: 5px 14px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tabs-btn:hover {
    background: rgba(120,80,255,0.15);
    color: #fff;
    border-color: rgba(120,80,255,0.4);
}

.tabs-btn.active {
    background: rgba(120,80,255,0.3);
    border-color: rgba(120,80,255,0.7);
    color: #fff;
    font-weight: 600;
}

.tabs-body { display: contents; }

.tabs-panel {
    display: none;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.tabs-panel.active { display: flex; }

.tabs-add-btn {
    background: rgba(120,80,255,0.12);
    border: 1px dashed rgba(120,80,255,0.4);
    border-radius: 8px;
    color: rgba(120,80,255,0.8);
    font-size: 12px;
    padding: 6px 14px;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 8px;
}
.tabs-add-btn:hover { background: rgba(120,80,255,0.22); color: #fff; }

.tabs-add-cell {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 4px 0;
}

/* ═══════════════════════════════════════════════════════════════
   GRID CONTAINER BLOCK
═══════════════════════════════════════════════════════════════ */

.grid-container {
    display: grid;
    gap: 12px;
    width: 100%;
    grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
    grid-template-rows: repeat(var(--grid-rows, 3), auto);
}

.grid-cell {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.grid-add-btn {
    background: rgba(120,80,255,0.10);
    border: 1px dashed rgba(120,80,255,0.35);
    border-radius: 8px;
    color: rgba(120,80,255,0.7);
    font-size: 18px;
    cursor: pointer;
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.grid-add-btn:hover { background: rgba(120,80,255,0.2); color: #fff; }

.grid-add-cell {
    display: contents;
}

/* ═══════════════════════════════════════════════════════════════
   CHILD BLOCKS (inside tabs/grid)
═══════════════════════════════════════════════════════════════ */

.child-block-wrapper {
    position: relative;
    border-radius: 8px;
    transition: outline 0.1s;
}

.child-block-wrapper:hover { outline: 1px solid rgba(120,80,255,0.2); }

.child-block-controls {
    position: absolute;
    top: 4px;
    right: 4px;
    display: none;
    flex-direction: row;
    gap: 3px;
    z-index: 10;
    background: rgba(15,10,30,0.85);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 7px;
    padding: 3px 4px;
    backdrop-filter: blur(6px);
}

.child-block-wrapper:hover .child-block-controls,
.child-block-controls.visible { display: flex; }

.child-ctrl-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 5px;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s;
    padding: 0;
}

.child-ctrl-btn:hover { background: rgba(255,255,255,0.12); }
.child-ctrl-btn:disabled { opacity: 0.25; pointer-events: none; }

.child-ctrl-tap {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(15,10,30,0.7);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 11;
}

/* Планшеты и телефоны — показываем шестерёнку всегда */
.child-ctrl-tap.active { display: none !important; }

@media (hover: none), (max-width: 1024px) {
    .child-ctrl-tap { display: flex; }
    .child-block-wrapper:hover .child-block-controls { display: none; }
    .child-block-controls.visible { display: flex !important; }
    .child-ctrl-tap.active { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   DYN BLOCK MOBILE TAP TOGGLE
═══════════════════════════════════════════════════════════════ */

.dyn-ctrl-tap-toggle {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(15,10,30,0.75);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 7px;
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 12;
    backdrop-filter: blur(4px);
    transition: background 0.12s, color 0.12s;
}

.dyn-ctrl-tap-toggle.active { display: none !important; }

@media (hover: none), (max-width: 1024px) {
    .dyn-ctrl-tap-toggle { display: flex; }
    .dyn-block-wrapper:hover .dyn-block-controls { display: none; }
    .dyn-block-controls.visible { display: flex !important; opacity: 1 !important; pointer-events: all !important; }
    .dyn-ctrl-tap-toggle.active { display: none !important; }
}

.dyn-block-content { display: contents; }
.dyn-block-unknown { color: rgba(255,255,255,0.3); font-size: 12px; font-style: italic; }

/* ═══════════════════════════════════════════════════════════════
   BLOCK EDITOR ADDITIONS (tabs/grid/hint)
═══════════════════════════════════════════════════════════════ */

.be-hint {
    font-size: 11px;
    color: rgba(255,255,255,0.32);
    line-height: 1.5;
    margin-top: 2px;
}

.be-btn-icon {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 5px;
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s;
    padding: 0;
}
.be-btn-icon:hover { background: rgba(255,255,255,0.1); color: #fff; }

.be-tab-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.be-tab-label-input { flex: 1; }
.be-tab-del, .be-acc-del, .be-link-del, .be-media-del { flex-shrink: 0; }

.be-media-url     { flex: 2; min-width: 0; }
.be-media-caption { flex: 1.5; min-width: 0; }
.be-media-isdoc   { flex-shrink: 0; margin: 0 4px; accent-color: #7850ff; }

.be-link-icon  { width: 60px; flex-shrink: 0; }
.be-link-label { flex: 1; min-width: 0; }
.be-link-url   { flex: 2; min-width: 0; }
.be-link-del   { flex-shrink: 0; }

.be-acc-title   { flex: 1; min-width: 0; }
.be-acc-content { width: 100%; }
.be-acc-del     { flex-shrink: 0; align-self: flex-start; }

/* ═══════════════════════════════════════════════════════════════
   SURFACE MODULES (поверхность секций)
═══════════════════════════════════════════════════════════════ */

.surf-mod {
    background: rgba(10,8,24,0.55);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(120,80,255,0.22);
    border-radius: 16px;
    padding: 14px 18px;
    color: rgba(255,255,255,0.88);
    font-family: inherit;
    font-size: 14px;
    position: relative;
    user-select: none;
    box-sizing: border-box;
    width: fit-content;
    min-width: 220px;
    max-width: 100%;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.4),
        0 1px 0 rgba(255,255,255,0.06) inset;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.surf-mod:hover {
    border-color: rgba(120,80,255,0.45);
    box-shadow:
        0 12px 40px rgba(0,0,0,0.5),
        0 0 0 1px rgba(120,80,255,0.15),
        0 1px 0 rgba(255,255,255,0.08) inset;
}

.surf-mod-loading { opacity: .45; font-size: 13px; text-align: center; padding: 12px 0; }
.surf-mod-empty   { opacity: .35; font-size: 13px; text-align: center; padding: 12px 0; }

/* Виджеты с фиксированной шириной — вписываются в zone */
.surf-mod-news,
.surf-mod-text,
.surf-mod-search,
.surf-mod-steam   { width: min(360px, 88vw); max-width: 100%; }
.surf-mod-music   { width: min(340px, 86vw); max-width: 100%; }
.surf-mod-banner  { width: min(340px, 86vw); max-width: 100%; padding: 0; }
.surf-mod-online  { width: fit-content; }

.surf-mod-add-btn {
    background: rgba(120,80,255,0.08);
    border: 1px dashed rgba(120,80,255,0.3);
    border-radius: 10px;
    color: rgba(120,80,255,0.7);
    font-size: 12px;
    font-family: inherit;
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
}
.surf-mod-add-btn:hover { background: rgba(120,80,255,0.18); color: #fff; }
.surf-mod-plus { font-size: 16px; }

/* Обёртка виджет + toolbar — центрируется как единый блок в zone */
.surf-mod-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: fit-content;
    max-width: 100%;
}

.surf-mod-toolbar {
    display: flex;
    gap: 4px;
    margin-top: 5px;
    justify-content: center;
    width: 100%;
}
.surf-mod-tb-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px;
    color: rgba(255,255,255,0.45);
    font-size: 11px;
    padding: 3px 8px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}
.surf-mod-tb-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.surf-mod-tb-del:hover { background: rgba(200,40,40,0.2); border-color: rgba(255,80,80,0.4); color: #ff8080; }

/* Music player */
.surf-mod-music { display: flex; flex-direction: column; gap: 10px; }
.surf-mod-music-icon { font-size: 24px; text-align: center; }
.surf-mod-music-title {
    font-size: 14px; font-weight: 700; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: -.01em;
}
.surf-mod-music-controls { display: flex; align-items: center; gap: 10px; }
.surf-mod-music-btn {
    background: rgba(120,80,255,0.3);
    border: 1px solid rgba(120,80,255,0.4);
    border-radius: 50%; width: 34px; height: 34px;
    color: #fff; font-size: 13px; cursor: pointer; flex-shrink: 0;
    transition: background 0.15s, transform 0.1s;
    display: flex; align-items: center; justify-content: center;
}
.surf-mod-music-btn:hover { background: rgba(120,80,255,0.6); transform: scale(1.08); }
.surf-mod-music-bar {
    flex: 1; height: 5px;
    background: rgba(255,255,255,0.12);
    border-radius: 3px; overflow: hidden; cursor: pointer;
}
.surf-mod-music-progress { height: 100%; background: linear-gradient(90deg, #7850ff, #a855f7); border-radius: 3px; transition: width .5s linear; width: 0; }
.surf-mod-music-time { font-size: 11px; opacity: .5; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.surf-mod-music-upload { font-size: 11px; opacity: .4; cursor: pointer; text-align: center; padding-top: 2px; }
.surf-mod-music-upload:hover { opacity: .7; }

/* Online counter */
.surf-mod-online { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 16px; }
.surf-mod-online-icon { font-size: 22px; }
.surf-mod-online-count { font-size: 36px; font-weight: 700; line-height: 1; }
.surf-mod-online-label { font-size: 11px; opacity: .5; text-transform: uppercase; letter-spacing: .06em; }

/* News preview */
.surf-mod-news {
    display: flex;
    flex-direction: column;
    gap: 0;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    border-radius: 16px;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.surf-mod-news:hover {
    border-color: rgba(120,80,255,0.6);
    transform: translateY(-2px);
    box-shadow:
        0 16px 48px rgba(0,0,0,0.55),
        0 0 0 1px rgba(120,80,255,0.2);
}
.surf-mod-news:active { transform: translateY(0); }

/* Картинка обложки */
.surf-mod-news-img-wrap {
    width: 100%;
    height: 140px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
.surf-mod-news-img-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 30%, rgba(10,8,24,0.85) 100%);
}
.surf-mod-news-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.surf-mod-news:hover .surf-mod-news-img { transform: scale(1.06); }

/* Лейбл — идёт ДО img-wrap в DOM */
.surf-mod-news-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    color: rgba(255,255,255,0.45);
    padding: 10px 14px 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
/* Если лейбл идёт после img-wrap — скрываем (на случай нового surface.js) */
.surf-mod-news-img-wrap + .surf-mod-news-label { display: none; }
/* Если лейбл plain (без картинки) */
.surf-mod-news-label--plain {
    padding: 12px 14px 4px;
}

/* Текстовый блок */
.surf-mod-news-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    padding: 12px 14px 5px;
    letter-spacing: -.01em;
}
.surf-mod-news-excerpt {
    font-size: 12px;
    opacity: .5;
    line-height: 1.5;
    padding: 0 14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.surf-mod-news-cta {
    font-size: 11px;
    color: rgba(150,110,255,0.9);
    padding: 8px 14px 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
/* ─── Online — двухстрочный виджет: участники + гости ─── */
.surf-mod-online {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 22px;
    width: fit-content;
    min-width: 200px;
}
.surf-mod-online-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.surf-mod-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.surf-mod-online-dot--reg   { background: #4ade80; box-shadow: 0 0 6px #4ade8088; }
.surf-mod-online-dot--guest { background: #888;    box-shadow: none; }
.surf-mod-online-num {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #c8b0ff;
    min-width: 28px;
    text-align: right;
}
.surf-mod-online-lbl {
    font-size: 11px;
    opacity: .5;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.2;
}

/* ─── Text с прокруткой ─── */
.surf-mod-text {
    max-height: 140px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(120,80,255,0.4) transparent;
}
.surf-mod-text-body {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255,255,255,0.8);
    white-space: pre-wrap;
}

/* ─── Banner ─── */
.surf-mod-banner { padding: 0; overflow: hidden; }
.surf-mod-banner-link { display: block; text-decoration: none; color: inherit; }
.surf-mod-banner-img {
    width: 100%;
    max-height: 80px;
    object-fit: cover;
    display: block;
    border-radius: 10px 10px 0 0;
}
.surf-mod-banner-label {
    padding: 8px 12px;
    font-size: 12px;
    opacity: .7;
    text-align: center;
}

/* ─── Search ─── */
.surf-mod-search { display: flex; flex-direction: column; gap: 8px; }
.surf-mod-search-row { display: flex; gap: 6px; }
.surf-mod-search-input {
    flex: 1;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    padding: 8px 12px;
    outline: none;
    transition: border-color 0.15s;
}
.surf-mod-search-input:focus { border-color: rgba(120,80,255,0.55); }
.surf-mod-search-input::placeholder { color: rgba(255,255,255,0.25); }
.surf-mod-search-btn {
    background: rgba(120,80,255,0.25);
    border: 1px solid rgba(120,80,255,0.4);
    border-radius: 8px;
    color: #fff;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    transition: background 0.15s;
}
.surf-mod-search-btn:hover { background: rgba(120,80,255,0.5); }
.surf-mod-search-results { display: flex; flex-direction: column; gap: 3px; max-height: 120px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(120,80,255,0.3) transparent; }
.surf-search-item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.12s;
}
.surf-search-item:hover { background: rgba(255,255,255,0.07); }
.surf-search-type { font-size: 14px; flex-shrink: 0; padding-top: 1px; }
.surf-search-info { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.surf-search-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,0.85); }
.surf-search-excerpt { font-size: 11px; color: rgba(255,255,255,0.45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Подсветка найденного блока */
@keyframes search-highlight-pulse {
    0%   { outline: 2px solid rgba(168,120,255,0); background: transparent; }
    20%  { outline: 2px solid rgba(168,120,255,0.9); background: rgba(168,120,255,0.12); }
    100% { outline: 2px solid rgba(168,120,255,0); background: transparent; }
}
.search-highlight { animation: search-highlight-pulse 2s ease-out forwards; border-radius: 6px; }

/* ─── Steam — горизонтальная карточка ─── */
.surf-mod-steam { padding: 0; overflow: hidden; }
.surf-mod-steam-link {
    display: flex;
    align-items: stretch;
    gap: 0;
    text-decoration: none;
    color: inherit;
    background: linear-gradient(135deg, #1b2838 0%, #2a475e 100%);
    border-radius: 10px;
    overflow: hidden;
    transition: filter 0.15s;
}
.surf-mod-steam-link:hover { filter: brightness(1.1); }
.surf-mod-steam-art {
    width: 90px;
    height: 90px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}
.surf-mod-steam-art--placeholder {
    width: 90px;
    height: 90px;
    background: #2a475e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
}
.surf-mod-steam-info {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
    min-width: 0;
}
.surf-mod-steam-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: #c6d4df;
    opacity: .7;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.surf-mod-steam-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.surf-mod-steam-name {
    font-size: 14px;
    font-weight: 700;
    color: #c6d4df;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.surf-mod-steam-desc {
    font-size: 11px;
    color: rgba(198,212,223,0.55);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}
.surf-mod-steam-cta {
    font-size: 11px;
    color: #4c9fdb;
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════
   SURFACE MODULE EDITOR MODAL
   (#surf-mod-editor, #surf-mod-editor-box, surf-mod-*)
═══════════════════════════════════════════════════════ */
#surf-mod-editor {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
#surf-mod-editor.visible {
    opacity: 1;
    pointer-events: auto;
}
#surf-mod-editor-box {
    background: #12101e;
    border: 1px solid rgba(120,80,255,0.35);
    border-radius: 16px;
    padding: 24px 22px 20px;
    width: min(460px, 94vw);
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: #fff;
    font-family: inherit;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
#surf-mod-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 12px;
}
#surf-mod-editor-header b { color: #fff; }
#surf-mod-editor-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 18px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    line-height: 1;
    transition: all 0.15s;
}
#surf-mod-editor-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Описание выбранного типа */
#surf-mod-editor-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.38);
    min-height: 16px;
    text-align: center;
    letter-spacing: 0.01em;
}

/* Сетка типов модулей */
.surf-mod-type-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.surf-mod-type-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: rgba(255,255,255,0.6);
    font-family: inherit;
    font-size: 11px;
    line-height: 1.3;
    padding: 10px 6px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transition: all 0.12s;
    text-align: center;
}
.surf-mod-type-btn:hover { background: rgba(120,80,255,0.16); color: #fff; border-color: rgba(120,80,255,0.3); }
.surf-mod-type-btn.active { background: rgba(120,80,255,0.32); border-color: rgba(120,80,255,0.7); color: #fff; }
.surf-mod-type-icon { font-size: 22px; line-height: 1; }
.surf-mod-type-label { font-size: 11px; }

/* Поля настройки */
#surf-mod-editor-fields { display: flex; flex-direction: column; gap: 8px; }
.surf-mod-field-label {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    margin-bottom: -4px;
    display: block;
}
.surf-mod-field-input {
    width: 100%;
    padding: 9px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    outline: none;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.surf-mod-field-input:focus { border-color: rgba(120,80,255,0.55); }
.surf-mod-field-input::placeholder { color: rgba(255,255,255,0.2); }

/* Загрузка музыки */
#surf-mod-music-upload-row { display: flex; flex-direction: column; gap: 6px; }
.surf-mod-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px;
    border: 1.5px dashed rgba(120,80,255,0.4);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    transition: all 0.15s;
    text-align: center;
}
.surf-mod-upload-label:hover { border-color: rgba(120,80,255,0.8); color: #fff; background: rgba(120,80,255,0.08); }
.surf-mod-upload-hint { font-size: 11px; color: rgba(255,255,255,0.3); }
.surf-mod-upload-status-info { font-size: 12px; color: rgba(255,255,255,0.4); text-align: center; }
.surf-mod-upload-status-ok   { font-size: 12px; color: rgba(100,220,120,0.8); text-align: center; }
.surf-mod-upload-status-err  { font-size: 12px; color: rgba(255,100,100,0.8); text-align: center; }

/* Footer */
#surf-mod-editor-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 14px;
}
#surf-mod-editor-error { flex: 1; font-size: 12px; color: #ff6b6b; min-height: 16px; }
#surf-mod-editor-save {
    padding: 9px 22px;
    background: rgba(120,80,255,0.75);
    border: 1px solid rgba(120,80,255,0.9);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
#surf-mod-editor-save:hover { background: rgba(120,80,255,1); }

/* ═══════════════════════════════════════════════════════════════
   UNDERGROUND MUSIC BLOCK
═══════════════════════════════════════════════════════════════ */

.music-block { display: flex; flex-direction: column; gap: 4px; }
.music-empty { color: rgba(255,255,255,0.25); font-size: 13px; padding: 12px 0; text-align: center; }

/* ── Skeleton ────────────────────────────────────────────────── */
.music-skeleton { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.music-skeleton-track {
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.09) 40%,
        rgba(255,255,255,0.04) 100%);
    background-size: 200% 100%;
    animation: music-skeleton-pulse 1.6s ease-in-out infinite;
    border: 1px solid rgba(255,255,255,0.06);
}
@keyframes music-skeleton-pulse {
    0%   { background-position: 200% 0; opacity: 0.7; }
    50%  { background-position:   0% 0; opacity: 1;   }
    100% { background-position: 200% 0; opacity: 0.7; }
}

/* ── Track list ──────────────────────────────────────────────── */
.music-track-list { display: flex; flex-direction: column; gap: 4px; }

.music-track-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03);
    transition: background 0.15s, border-color 0.15s;
}
.music-track-row:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
}
.music-track-row.music-track-active {
    background: rgba(120,80,255,0.12);
    border-color: rgba(120,80,255,0.35);
}

.music-track-play {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(120,80,255,0.25);
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, transform 0.1s;
}
.music-track-play:hover { background: rgba(120,80,255,0.55); transform: scale(1.08); }
.music-track-active .music-track-play { background: rgba(120,80,255,0.6); }

.music-track-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.music-track-title {
    font-size: 13px; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.music-track-bar-wrap { display: flex; align-items: center; gap: 7px; }
.music-track-bar {
    flex: 1; height: 3px;
    background: rgba(255,255,255,0.12);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    transition: height 0.15s;
}
.music-track-bar:hover { height: 5px; }
.music-track-progress {
    height: 100%;
    background: #7850ff;
    border-radius: 2px;
    width: 0;
    transition: width 0.3s linear;
    pointer-events: none;
}
.music-track-active .music-track-progress { background: #9b78ff; }
.music-track-time { font-size: 10px; opacity: 0.4; flex-shrink: 0; width: 30px; text-align: right; }

.music-track-del {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.2);
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.music-track-row:hover .music-track-del { opacity: 1; }
.music-track-del:hover { color: #ff6b6b; background: rgba(255,60,60,0.12); }

/* ── Add track button ────────────────────────────────────────── */
.music-track-add-wrap { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

.music-track-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px dashed rgba(120,80,255,0.35);
    background: rgba(120,80,255,0.06);
    color: rgba(200,180,255,0.7);
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    align-self: flex-start;
}
.music-track-add-btn:hover {
    border-color: rgba(120,80,255,0.7);
    background: rgba(120,80,255,0.15);
    color: #c8b4ff;
}

.music-track-upload-status {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    min-height: 14px;
    padding-left: 2px;
}
.music-track-upload-status.uploading { color: rgba(120,180,255,0.8); }
.music-track-upload-status.error     { color: #ff6b6b; }

/* ── RichEditor в BlockEditor ────────────────────────────── */
.be-rich-wrap { display: flex; flex-direction: column; gap: 4px; }
.be-rich-editor-wrap {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,.04);
}
.be-rich-toolbar {
    display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 8px;
    background: rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.1);
    user-select: none;
}
.be-rich-area {
    min-height: 120px; max-height: 360px; overflow-y: auto;
    padding: 12px 14px;
    color: rgba(255,255,255,.9);
    font-family: "Geologica", sans-serif;
    font-size: 13px; line-height: 1.6;
    outline: none; word-break: break-word;
}
.be-rich-area:empty::before {
    content: attr(data-placeholder);
    color: rgba(255,255,255,.2);
    pointer-events: none;
}
/* Переиспользуем стили anf-editor-area для be-rich-area */
.be-rich-area p { margin: .3em 0; }
.be-rich-area b, .be-rich-area strong { font-weight: 700; }
.be-rich-area i, .be-rich-area em { font-style: italic; }
.be-rich-area u { text-decoration: underline; }
.be-rich-area s { text-decoration: line-through; }
.be-rich-area a { color: #7eb4ff; text-decoration: underline; }
.be-rich-area ul, .be-rich-area ol { padding-left: 1.5em; margin: .25em 0; }
.be-rich-area li { margin: .1em 0; }
.be-rich-area blockquote {
    border-left: 3px solid rgba(120,80,255,.6);
    margin: .4em 0; padding: 3px 12px;
    color: rgba(255,255,255,.6); font-style: italic;
}

/* Текст с форматированием в блоках на сайте */
.dyn-block-text b, .dyn-block-text strong { font-weight: 700; }
.dyn-block-text i, .dyn-block-text em { font-style: italic; }
.dyn-block-text u { text-decoration: underline; }
.dyn-block-text s { text-decoration: line-through; }
.dyn-block-text a { color: #7eb4ff; text-decoration: underline; }
.dyn-block-text ul, .dyn-block-text ol { padding-left: 1.5em; margin: .4em 0; }
.dyn-block-text li { margin: .15em 0; }
.dyn-block-text blockquote {
    border-left: 3px solid rgba(120,80,255,.5);
    margin: .5em 0; padding: 4px 14px;
    color: rgba(255,255,255,.65); font-style: italic;
}
.dyn-block-text h1 { font-size: 1.7em; font-weight: 700; margin: .5em 0 .3em; }
.dyn-block-text h2 { font-size: 1.4em; font-weight: 700; margin: .5em 0 .3em; }
.dyn-block-text h3 { font-size: 1.15em; font-weight: 700; margin: .5em 0 .3em; }
.dyn-block-text p { margin: .35em 0; }
.dyn-block-text pre {
    background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1);
    border-radius: 4px; padding: 8px 12px;
    font-family: monospace; font-size: 12px;
    overflow-x: auto; white-space: pre-wrap;
}
.dyn-block-text--before { margin-bottom: .75em; }
.dyn-block-text--after  { margin-top: .75em; }

/* ── RichEditor global styles (needed for BlockEditor too) ── */
.anf-tb-btn{min-width:26px;height:26px;padding:0 5px;background:transparent;border:1px solid transparent;border-radius:4px;color:rgba(255,255,255,.75);font-family:"Geologica",sans-serif;font-size:12px;cursor:pointer;transition:background .12s,border-color .12s,color .12s;display:flex;align-items:center;justify-content:center;white-space:nowrap;}
.anf-tb-btn:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.18);}
.anf-tb-btn.active{background:rgba(120,80,255,.25);color:#c4aaff;border-color:rgba(120,80,255,.4);}
.anf-editor-area{min-height:120px;max-height:520px;overflow-y:auto;padding:14px 16px;color:rgba(255,255,255,.9);font-family:"Geologica",sans-serif;font-size:14px;line-height:1.65;outline:none;word-break:break-word;}
.anf-editor-area:empty::before{content:attr(data-placeholder);color:rgba(255,255,255,.22);pointer-events:none;}
.anf-editor-area h1,.be-rich-area h1{font-size:1.8em;font-weight:700;margin:.5em 0 .3em;}
.anf-editor-area h2,.be-rich-area h2{font-size:1.45em;font-weight:700;margin:.5em 0 .3em;}
.anf-editor-area h3,.be-rich-area h3{font-size:1.2em;font-weight:700;margin:.5em 0 .3em;}
.anf-editor-area h4,.be-rich-area h4{font-size:1.05em;font-weight:600;margin:.5em 0 .3em;}
.anf-editor-area p{margin:.35em 0;}
.anf-editor-area blockquote{border-left:3px solid rgba(120,80,255,.6);margin:.5em 0;padding:4px 14px;color:rgba(255,255,255,.65);font-style:italic;}
.anf-editor-area pre{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);border-radius:5px;padding:8px 12px;font-family:monospace;font-size:12px;overflow-x:auto;white-space:pre-wrap;}
.anf-editor-area a{color:#7eb4ff;text-decoration:underline;cursor:pointer;}
.anf-editor-area ul,.anf-editor-area ol{padding-left:1.6em;margin:.3em 0;}
.anf-editor-area li{margin:.15em 0;}
.anf-editor-area hr{border:none;border-top:1px solid rgba(255,255,255,.2);margin:.8em 0;}
.anf-editor-area table{border-collapse:collapse;margin:.5em 0;max-width:100%;}
.anf-editor-area td,.anf-editor-area th{border:1px solid rgba(255,255,255,.2);padding:5px 10px;min-width:60px;}
.anf-editor-area th{background:rgba(255,255,255,.06);font-weight:600;}
.anf-editor-area img{max-width:100%;height:auto;border-radius:4px;display:block;margin:.4em auto;cursor:pointer;}
/* Editor modals — high z-index to appear over BlockEditor */
.anf-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(4px);z-index:10000;display:flex;align-items:center;justify-content:center;}
.anf-modal{background:#0f1118;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:24px;width:min(440px,calc(100vw - 32px));box-shadow:0 20px 60px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:12px;}
.anf-modal-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:2px;}
.anf-modal-row{display:flex;flex-direction:column;gap:4px;}
.anf-modal-label{font-size:11px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.07em;}
.anf-modal-input{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:8px 12px;color:#fff;font-family:"Geologica",sans-serif;font-size:13px;outline:none;transition:border-color .18s;box-sizing:border-box;width:100%;}
.anf-modal-input:focus{border-color:rgba(255,255,255,.35);}
.anf-modal-row-h{display:flex;gap:8px;align-items:flex-end;}
.anf-modal-row-h .anf-modal-row{flex:1;}
.anf-modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:4px;}
.anf-modal-ok{padding:8px 20px;background:rgba(120,80,255,.7);border:1px solid rgba(120,80,255,.9);border-radius:6px;color:#fff;font-family:"Geologica",sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s;}
.anf-modal-ok:hover{background:rgba(120,80,255,1);}
.anf-modal-cancel{padding:8px 16px;background:transparent;border:1px solid rgba(255,255,255,.15);border-radius:6px;color:rgba(255,255,255,.55);font-family:"Geologica",sans-serif;font-size:13px;cursor:pointer;}
.anf-modal-cancel:hover{color:#fff;border-color:rgba(255,255,255,.3);}
.anf-special-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;max-height:240px;overflow-y:auto;}
.anf-special-btn{aspect-ratio:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:4px;color:rgba(255,255,255,.85);font-size:14px;cursor:pointer;transition:background .1s;display:flex;align-items:center;justify-content:center;}
.anf-special-btn:hover{background:rgba(120,80,255,.35);}

/* ── Toolbar groups and selects (needed globally for BlockEditor) ── */
.anf-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 8px; background: rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.1); user-select: none; }
.anf-tb-group { display: flex; gap: 1px; align-items: center; padding-right: 6px; margin-right: 4px; border-right: 1px solid rgba(255,255,255,.1); }
.anf-tb-group:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.anf-tb-select { height: 26px; padding: 0 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 4px; color: rgba(255,255,255,.75); font-family: "Geologica", sans-serif; font-size: 11px; cursor: pointer; outline: none; max-width: 110px; }
.anf-tb-select option { background: #1a1a2e; color: #fff; }

/* ── Accordion content wrap ── */
.be-acc-content-wrap { width: 100%; }
.be-acc-content-wrap .be-rich-wrap { margin-top: 0; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — адаптивная верстка
══════════════════════════════════════════════════════════ */

/* ── Широкие экраны (1200px+) — используем больше пространства ── */
@media (min-width: 1200px) {
    #dynamic-inner {
        max-width: 1100px;
        padding: 0 40px;
    }
    #page-instance-container {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* ── Очень широкие экраны (1600px+) ── */
@media (min-width: 1600px) {
    #dynamic-inner {
        max-width: 1400px;
    }
}

/* ── Планшеты (768px–1199px) ── */
@media (max-width: 1199px) and (min-width: 768px) {
    #dynamic-inner {
        max-width: 100%;
        padding: 0 20px;
    }
    #news-feed-inner {
        padding: 0 20px;
    }
}

/* ── Мобильные (до 767px) ── */
@media (max-width: 767px) {
    #page-instance-container {
        padding: 56px 12px 60px;
    }
    #dynamic-inner {
        padding: 0 4px;
    }
    #news-feed-inner {
        padding: 0 12px;
    }

    /* Сетка блоков — на телефоне всегда 1 колонка */
    .grid-container {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }
    .grid-cell {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    /* Табы — кнопки переносятся */
    .tabs-header { gap: 4px; }
    .tabs-btn { font-size: 12px; padding: 4px 10px; }

    /* Новости */
    .news-card { margin-bottom: 16px; }
    .news-card-body { padding: 14px 16px 16px; }
    .news-card-title { font-size: 15px; }

    /* Аккордеон */
    .acc-summary { font-size: 13px; padding: 10px 14px; }
    .acc-body { padding: 0 12px 12px; }

    /* Документы */
    .doclist-item { padding: 8px 12px; font-size: 12px; }

    /* Блоки управления — меньше */
    .dyn-block-wrapper { margin-bottom: 20px; }

    /* Медиа */
    .dyn-media-list { gap: 8px; }
    .dyn-gallery { grid-template-columns: repeat(2, 1fr) !important; }

    /* Блок-редактор */
    #be-box { width: 100vw; max-height: 100dvh; border-radius: 0; }
    #be-type-row { padding: 10px 14px 8px; gap: 4px; }
    .be-type-btn { font-size: 11px; padding: 4px 10px; }
    #be-fields { padding: 12px 14px 0; }
    #be-footer { padding: 12px 14px; }

    /* Новостной модал */
    #news-modal-box { width: 100vw; max-height: 100dvh; border-radius: 0; }
}

/* ── Очень маленькие телефоны (до 400px) ── */
@media (max-width: 400px) {
    .anf-toolbar { gap: 1px; padding: 4px 6px; }
    .anf-tb-btn { min-width: 22px; height: 22px; font-size: 11px; }
    .anf-tb-group { padding-right: 4px; margin-right: 2px; }
}

/* ── Music toggle button ── */
#music-toggle-btn {
    position: fixed;
    top: 14px; right: 14px;
    z-index: 200;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.15);
    background: rgba(10,8,24,0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: rgba(255,255,255,0.5);
    font-size: 20px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.15s, opacity 0.2s;
    pointer-events: auto;
}
#music-toggle-btn:hover {
    border-color: rgba(120,80,255,0.5);
    background: rgba(20,12,40,0.8);
    transform: scale(1.08);
}
#music-toggle-btn.active {
    border-color: rgba(120,80,255,0.7);
    background: rgba(40,20,80,0.75);
    color: #c4aaff;
    box-shadow: 0 0 14px rgba(120,80,255,0.35);
}
#music-toggle-btn.muted {
    color: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.08);
}
/* Скрываем когда открыт модал новости */
#news-modal.open ~ #music-toggle-btn,
body:has(#news-modal.open) #music-toggle-btn {
    opacity: 0;
    pointer-events: none;
}
/* Скрываем в подземке */
body:has(#underground-overlay.visible) #music-toggle-btn {
    opacity: 0;
    pointer-events: none;
}

/* Кнопка музыки — ожидание первого клика */
@keyframes music-btn-pulse {
    0%, 100% { box-shadow: 0 0 14px rgba(120,80,255,0.35); }
    50%       { box-shadow: 0 0 22px rgba(120,80,255,0.7), 0 0 40px rgba(120,80,255,0.25); }
}
#music-toggle-btn.pending {
    animation: music-btn-pulse 1.4s ease-in-out infinite;
    border-color: rgba(120,80,255,0.9);
}

/* Кнопка музыки — приглашение включить (есть музыка, но выключена) */
@keyframes music-btn-invite {
    0%, 100% { opacity: 0.45; }
    50%       { opacity: 0.85; }
}
#music-toggle-btn.invite {
    animation: music-btn-invite 2s ease-in-out infinite;
}