/* L2comerce — тёмная эпик-тема в стиле Lineage 2 (референс bohpts.com) */
:root {
    --bg: #0f0e0c;             /* тёплый почти-чёрный */
    --bg-card: #191510;        /* тёмная тёплая панель */
    --bg-elev: #221c14;        /* приподнятый блок */
    --border: #3d3120;         /* бронза */
    --border-lt: #5c4b30;      /* светлее — для заметных рамок форм/панелей */
    --text: #efe7d3;           /* яркий пергамент — контраст ~15:1 на панелях */
    --text-dim: #c4b898;       /* приглушённый, но читаемый (~9:1) */
    --accent: #e0b768;         /* золото ярче для контраста на тёмном (~9:1) */
    --accent-dim: #7a5d31;     /* бронза (тёмное золото) */
    --accent-bright: #ffe9b3;  /* светлый золотой блик */
    --danger: #e05a5a;
    --online: #5aba47;
    /* цвета ролей/статусов — у каждой свой */
    --role-developer: #b98be0;  /* разработчик — фиолетовый */
    --role-admin: #e0645a;      /* клан-лидер — красный */
    --role-moderator: #4fb0c0;  /* модератор — бирюзовый */
    --role-member: #86b06a;     /* боец — зелёный */
    --role-officer: #e0954a;    /* офицер (лидер КП) — оранжевый */
    --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
    --font-serif: "Cormorant Garamond", Georgia, serif;
    --font-body: -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* атрибут hidden всегда прячет — даже если у элемента задан display: flex/grid */
[hidden] { display: none !important; }

body {
    /* L2-картинка фоном (меньший масштаб — contain) + затемняющий градиент */
    background:
        linear-gradient(180deg, rgba(13,11,9,0.60), rgba(13,11,9,0.74) 55%, rgba(13,11,9,0.86)),
        url('/static/img/img_L2.jpg') center 30% / contain no-repeat;
    background-color: var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* контент — над фоном и ambient-слоем */
.site-header, .container, .site-footer { position: relative; z-index: 2; }

/* --- «Живой» слой: птицы, искры, туман (поверх фона, под контентом) --- */
.ambient {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.ambient .mist {
    position: absolute;
    left: -20%; bottom: 0;
    width: 140%; height: 42%;
    background: linear-gradient(0deg, rgba(210,190,155,0.10), transparent 80%);
    animation: mistDrift 42s ease-in-out infinite alternate;
}
@keyframes mistDrift { from { transform: translateX(-4%);} to { transform: translateX(4%);} }

.ambient .ember {
    position: absolute;
    bottom: -12px;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe9b8, #daaa56 70%);
    box-shadow: 0 0 7px 1px rgba(218,170,86,0.7);
    opacity: 0;
    animation: emberRise linear infinite;
}
@keyframes emberRise {
    0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
    12%  { opacity: 0.9; }
    100% { transform: translateY(-92vh) translateX(28px) scale(0.35); opacity: 0; }
}
.ambient .ember:nth-child(1)  { left: 8%;  animation-duration: 14s; animation-delay: 0s; }
.ambient .ember:nth-child(2)  { left: 16%; animation-duration: 18s; animation-delay: 3s; }
.ambient .ember:nth-child(3)  { left: 24%; animation-duration: 12s; animation-delay: 6s; }
.ambient .ember:nth-child(4)  { left: 33%; animation-duration: 20s; animation-delay: 1s; }
.ambient .ember:nth-child(5)  { left: 42%; animation-duration: 15s; animation-delay: 5s; }
.ambient .ember:nth-child(6)  { left: 51%; animation-duration: 17s; animation-delay: 8s; }
.ambient .ember:nth-child(7)  { left: 60%; animation-duration: 13s; animation-delay: 2s; }
.ambient .ember:nth-child(8)  { left: 68%; animation-duration: 19s; animation-delay: 7s; }
.ambient .ember:nth-child(9)  { left: 76%; animation-duration: 16s; animation-delay: 4s; }
.ambient .ember:nth-child(10) { left: 84%; animation-duration: 21s; animation-delay: 9s; }
.ambient .ember:nth-child(11) { left: 90%; animation-duration: 14s; animation-delay: 6s; }
.ambient .ember:nth-child(12) { left: 96%; animation-duration: 18s; animation-delay: 2s; }

/* искры разного вида: крупные и холодные (лёд High Five) */
.ambient .ember.big { width: 4px; height: 4px; }
.ambient .ember.ice {
    background: radial-gradient(circle, #e6f4ff, #8fb8d6 70%);
    box-shadow: 0 0 7px 1px rgba(150,190,220,0.6);
}

/* падающие листья */
.ambient .leaf {
    position: absolute;
    top: -24px;
    width: 9px; height: 9px;
    background: linear-gradient(135deg, #b98a3e, #6b4a1f);
    border-radius: 0 100% 0 100%;
    opacity: 0;
    animation: leafFall linear infinite;
}
@keyframes leafFall {
    0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
    10%  { opacity: 0.5; }
    88%  { opacity: 0.5; }
    100% { transform: translateY(103vh) translateX(70px) rotate(340deg); opacity: 0; }
}
.ambient .l1 { left: 22%; animation-duration: 16s; animation-delay: 2s; }
.ambient .l2 { left: 40%; animation-duration: 21s; animation-delay: 8s; }
.ambient .l3 { left: 57%; animation-duration: 18s; animation-delay: 13s; }
.ambient .l4 { left: 73%; animation-duration: 23s; animation-delay: 5s; }
.ambient .l5 { left: 88%; animation-duration: 19s; animation-delay: 10s; }

@media (prefers-reduced-motion: reduce) {
    .ambient .ember, .ambient .leaf, .ambient .mist { animation: none; }
    .ambient .ember { opacity: 0.5; }
    .ambient .leaf { opacity: 0.3; }
}

h1, h2, h3, .logo { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; }
/* заголовки часто лежат поверх картинки — лёгкая тень для читаемости */
h1, h2, h3 { text-shadow: 0 1px 10px rgba(0,0,0,0.6); }

a { color: var(--accent); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--accent-bright); text-decoration: none; }

.site-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0.9rem 2rem;
    background: linear-gradient(180deg, #201a12, var(--bg-card));
    border-bottom: 1px solid var(--accent-dim);
    box-shadow: 0 1px 0 rgba(218,170,86,0.12), 0 6px 20px rgba(0,0,0,0.4);
    /* липкая панель — всегда доступна при full-page скролле */
    position: sticky;
    top: 0;
    z-index: 30;
}

.logo {
    font-size: 1.4rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);  /* fallback, если градиент-текст не поддержан */
    background: linear-gradient(180deg, var(--accent-bright), var(--accent) 55%, var(--accent-dim));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.logo:hover { text-decoration: none; filter: brightness(1.12); }

.site-header nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.site-header nav a {
    color: var(--text-dim);
    font-family: var(--font-display);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}
.site-header nav a.active { color: var(--accent); border-bottom-color: var(--accent-dim); }
.site-header nav a:hover { color: var(--accent-bright); text-decoration: none; }

.container {
    flex: 1;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 2rem;
}

/* --- Герой в эпик-стиле --- */
.hero {
    text-align: center;
    padding: 4.5rem 1.5rem 4rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--accent-dim);
    border-radius: 10px;
    /* прозрачный — сквозь герой видно фоновую L2-картинку и птиц;
       лёгкая виньетка держит читаемость заголовка */
    background: radial-gradient(600px 260px at 50% 50%, rgba(10,8,6,0.5), transparent 78%);
    box-shadow: inset 0 0 70px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}
.hero h1 { text-shadow: 0 2px 24px rgba(0,0,0,0.7); }
.hero p { text-shadow: 0 1px 12px rgba(0,0,0,0.8); }
.hero h1 {
    font-size: 2.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    color: var(--accent);  /* fallback */
    background: linear-gradient(180deg, var(--accent-bright), var(--accent) 60%, var(--accent-dim));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero p { color: var(--text-dim); font-family: var(--font-serif); font-size: 1.25rem; }
.hero-cta { display: flex; gap: 0.8rem; justify-content: center; margin-top: 1.6rem; flex-wrap: wrap; }
/* декоративная золотая линия под заголовком */
.hero h1::after {
    content: "";
    display: block;
    width: 120px;
    height: 2px;
    margin: 0.8rem auto 0;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* --- Главная: полноэкранные секции со скролл-снапом --- */
html { font-size: 15px; scroll-snap-type: y mandatory; scroll-behavior: smooth; }
.snap-section {
    /* во всю ширину экрана (вырываемся из container max-width) */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    min-height: 100vh;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.2rem;
}
/* на низких экранах снап мягче — чтобы длинный контент не «залипал» */
@media (max-height: 720px) { html { scroll-snap-type: y proximity; } }
.sec-inner {
    width: 100%; max-width: 900px; text-align: center;
    /* мягкий тёмный подслой под контентом — читаемость поверх картинки */
    padding: 2rem 1.5rem;
    background: radial-gradient(ellipse 92% 82% at 50% 50%, rgba(9,7,5,0.72), rgba(9,7,5,0.25) 70%, transparent 85%);
    border-radius: 20px;
}
.sec-title {
    font-size: clamp(1.8rem, 5vw, 3rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    background: linear-gradient(180deg, var(--accent-bright), var(--accent) 60%, var(--accent-dim));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 24px rgba(0,0,0,0.6);
    margin-bottom: 0.4rem;
}
.sec-sub { color: var(--text-dim); font-family: var(--font-serif); font-size: 1.25rem; margin-bottom: 1.4rem; text-shadow: 0 1px 8px rgba(0,0,0,0.7); }
.sec-more { display: inline-block; margin-top: 1.4rem; }
.scroll-hint {
    margin-top: 2rem; color: var(--text-dim); font-size: 0.82rem; letter-spacing: 0.1em;
    animation: bounce 2s infinite;
}
@keyframes bounce { 0%,100% { transform: translateY(0);} 50% { transform: translateY(6px);} }

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.2rem;
}
.tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 1 / 1;
    padding: 1.1rem;
    background: linear-gradient(180deg, #221b12, #14100b);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
a.tile:hover { border-color: var(--accent-dim); box-shadow: 0 8px 24px rgba(0,0,0,0.45); transform: translateY(-3px); text-decoration: none; }
.tile-body h3 {
    font-family: var(--font-display); font-size: 1.02rem; color: var(--text); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.news-tile.official { border-left: 3px solid var(--accent); }
.tile-foot { display: flex; justify-content: space-between; gap: 0.5rem; color: var(--text-dim); font-size: 0.78rem; }
.server-tile .server-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--online); box-shadow: 0 0 8px var(--online); margin-bottom: 0.5rem; }

/* --- Новостные карточки с обложкой (стиль bohpts) --- */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.2rem;
    margin-top: 1.2rem;
    text-align: left;
}
.post-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #221b12, #14100b);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.post-card:hover {
    border-color: var(--accent);
    box-shadow: 0 12px 34px rgba(0,0,0,0.55);
    transform: translateY(-4px);
    text-decoration: none;
}
.post-pic {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #14100b;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transition: transform 0.4s ease;
}
.post-card:hover .post-pic { transform: scale(1.06); }
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* золотистый градиент снизу картинки для «сшивки» с текстом */
.post-pic::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(20,16,11,0.9));
}
.post-badge {
    position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2;
    display: inline-flex; align-items: center; gap: 0.28rem;
    background: linear-gradient(180deg, var(--accent), var(--accent-dim));
    color: #1a1408; font-family: var(--font-display); font-size: 0.68rem;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0.22rem 0.55rem; border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.post-badge svg { display: block; }
.post-content { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.post-title {
    font-family: var(--font-display); font-size: 1.02rem; color: var(--text); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-summary {
    color: var(--text-dim); font-size: 0.85rem; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-meta { display: flex; justify-content: space-between; gap: 0.6rem; color: var(--text-dim); font-size: 0.8rem; margin-top: auto; }
.post-date::before { content: "◆ "; color: var(--accent-dim); }
.post-card.official { border-color: var(--accent-dim); }

/* --- Карусель новостей на главной --- */
.news-carousel { position: relative; margin-top: 1.4rem; }
.news-track {
    display: flex;
    gap: 1.2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0.4rem 0.2rem 1.1rem;
    scrollbar-width: none;
    text-align: left;
}
.news-track::-webkit-scrollbar { display: none; }
.news-track .post-card {
    flex: 0 0 clamp(240px, 26vw, 300px);
    scroll-snap-align: start;
}
.nc-arrow {
    position: absolute;
    top: calc(50% - 0.6rem);
    transform: translateY(-50%);
    z-index: 5;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid var(--border-lt);
    background: rgba(18,14,9,0.82);
    color: var(--accent);
    font-size: 1.7rem; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.2s, transform 0.15s;
}
.nc-arrow:hover { background: var(--accent); color: #1a1408; border-color: var(--accent); }
.nc-arrow:active { transform: translateY(-50%) scale(0.92); }
.nc-prev { left: -14px; }
.nc-next { right: -14px; }
.nc-arrow:disabled { opacity: 0; pointer-events: none; }
.news-carousel.nc-static .nc-arrow { display: none; }
@media (max-width: 640px) {
    .nc-prev { left: 4px; }
    .nc-next { right: 4px; }
}

/* появление карточек при входе секции в зону видимости */
.nc-item { opacity: 0; transform: translateY(26px); }
.news-carousel.nc-reveal .nc-item {
    animation: ncReveal 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
    animation-delay: calc(var(--i, 0) * 85ms);
}
@keyframes ncReveal { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .nc-item, .news-carousel.nc-reveal .nc-item { opacity: 1; transform: none; animation: none; }
    .news-track { scroll-behavior: auto; }
}

/* --- Пикер обложек в форме статьи --- */
.cover-picker { margin-bottom: 1rem; }
.cover-picker-label { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 0.5rem; }
.cover-picker-label.sub { margin-top: 0.4rem; }
.cover-presets { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.8rem; }
.cover-opt { margin: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.cover-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cover-thumb {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    width: 110px; height: 62px;
    border: 2px solid var(--border); border-radius: 8px;
    color: var(--text-dim); font-size: 0.72rem; font-weight: 600;
}
.cover-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-opt-label { font-size: 0.72rem; color: var(--text-dim); }
.cover-none { background: var(--bg-card); }
.cover-opt input:checked + .cover-thumb { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(218,170,86,0.35); }
.cover-upload-label { display: block; color: var(--text-dim); font-size: 0.9rem; }
.cover-manage-link { display: inline-block; margin-top: 0.5rem; font-size: 0.85rem; }

/* живое превью-кадрирование в форме */
.cover-frame { margin-bottom: 0.9rem; }
.cover-frame-stage {
    position: relative; width: 100%; max-width: 460px; aspect-ratio: 16 / 9;
    overflow: hidden; border: 1px solid var(--accent-dim); border-radius: 8px;
    background: #14100b; cursor: grab;
}
.cover-frame-stage:active { cursor: grabbing; }
.cover-frame-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
/* уголки-ручки для растягивания (как в фотошопе) */
.cf-handle {
    position: absolute; width: 16px; height: 16px; z-index: 3;
    background: var(--accent); border: 2px solid #14100b; border-radius: 3px;
    box-shadow: 0 0 6px rgba(0,0,0,0.6);
}
.cf-handle.h-nw { top: 4px; left: 4px; cursor: nwse-resize; }
.cf-handle.h-ne { top: 4px; right: 4px; cursor: nesw-resize; }
.cf-handle.h-sw { bottom: 4px; left: 4px; cursor: nesw-resize; }
.cf-handle.h-se { bottom: 4px; right: 4px; cursor: nwse-resize; }
.cf-zoom-row { display: flex; align-items: center; gap: 0.7rem; color: var(--text-dim); font-size: 0.9rem; max-width: 460px; margin: 0.6rem 0 0.3rem; }
.cf-zoom-row input[type="range"] { flex: 1; accent-color: var(--accent); }

/* заявки в клан (админка) */
.app-msg { max-width: 320px; font-size: 0.85rem; color: var(--text); }
.admin-table tr.app-done { opacity: 0.55; }

/* карточка как контейнер (обёртка ссылки + кнопка удаления) */
.post-card { position: relative; }
.post-link { display: flex; flex-direction: column; flex: 1; color: inherit; }
.post-link:hover { text-decoration: none; }
.post-del { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 4; margin: 0; }
.post-del button {
    width: 26px; height: 26px; border-radius: 6px; border: 1px solid #6e3038;
    background: rgba(20,10,10,0.72); color: #e8a0a8; font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.post-del button:hover { background: #6e3038; color: #fff; }

/* цвета бейджей и рамок по типу новости */
.post-badge.nt-news   { background: linear-gradient(180deg, var(--accent), var(--accent-dim)); color: #1a1408; }
.post-badge.nt-event  { background: linear-gradient(180deg, #9d7be0, #4a3388); color: #fff; }
.post-badge.nt-siege  { background: linear-gradient(180deg, #e0954a, #7a4620); color: #1a1006; }
.post-badge.nt-gather { background: linear-gradient(180deg, #5aba47, #2f5e3d); color: #08140c; }
.post-badge.nt-boss   { background: linear-gradient(180deg, #d65a5a, #7a2a2a); color: #fff; }
.post-badge.nt-pvp    { background: linear-gradient(180deg, #d64a7a, #6e1f3d); color: #fff; }
.post-card.nt-event:hover  { border-color: #9d7be0; }
.post-card.nt-siege:hover  { border-color: #e0954a; }
.post-card.nt-gather:hover { border-color: #5aba47; }
.post-card.nt-boss:hover   { border-color: #d65a5a; }
.post-card.nt-pvp:hover    { border-color: #d64a7a; }


.sec-head-row { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.sec-head-row .sec-title { margin-bottom: 0; }

.join-inner .btn-lg { padding: 0.85rem 2.2rem; font-size: 1rem; }
.join-inner .hint { margin-top: 1.2rem; }

/* Экран «О клане»: слева описание, справа панель проектов */
.about-inner { max-width: 1000px; }
.about-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2rem;
    align-items: center;
    text-align: left;
}
@media (max-width: 760px) { .about-layout { grid-template-columns: 1fr; text-align: center; } }
.about-text .sec-title { text-align: inherit; }
.about-desc { color: var(--text); font-size: 1.15rem; margin: 0.8rem 0 1.6rem; text-shadow: 0 1px 8px rgba(0,0,0,0.7); }

.clan-panel {
    background: linear-gradient(180deg, #221b12, #14100b);
    border: 1px solid var(--accent-dim);
    border-radius: 12px;
    padding: 1.4rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.clan-count { text-align: center; padding-bottom: 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.clan-count-num { display: block; font-family: var(--font-display); font-size: 2.8rem; color: var(--accent); line-height: 1; }
.clan-count-lbl { color: var(--text-dim); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; }
.clan-projects-head { color: var(--text-dim); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.6rem; }
.project-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem 0; border-bottom: 1px solid var(--border);
}
.project-row:last-child { border-bottom: none; }
.project-name { display: flex; align-items: center; gap: 0.5rem; color: var(--text); font-size: 0.95rem; }
.project-count {
    min-width: 34px; text-align: center;
    background: rgba(90,186,71,0.12); color: var(--online);
    border: 1px solid rgba(90,186,71,0.4); border-radius: 20px;
    font-size: 0.82rem; padding: 0.1rem 0.5rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .scroll-hint { animation: none; } }

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.category-card {
    display: block;
    padding: 1.4rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-align: center;
    transition: border-color 0.15s;
}
.category-card:hover { border-color: var(--accent-dim); text-decoration: none; }
.category-card h2 { font-size: 1.05rem; color: var(--text); font-weight: 600; }

/* --- Главная: две колонки + клан --- */
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.5rem 0; }
@media (max-width: 640px) { .home-grid { grid-template-columns: 1fr; } }
.home-col { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 1.2rem; }
.home-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.6rem; }
.home-head h2 { color: var(--accent); font-size: 1.1rem; }
.home-news, .home-boards { list-style: none; }
.home-news li, .home-boards li {
    display: flex; justify-content: space-between; gap: 0.6rem;
    padding: 0.45rem 0; border-bottom: 1px solid var(--border);
}
.home-clan { margin-top: 1.5rem; text-align: center; }

/* --- Индекс форума: список досок --- */
.board-list { margin-top: 1.2rem; }
.board-row {
    display: grid;
    grid-template-columns: 1fr auto 1.4fr;
    gap: 1rem;
    align-items: center;
    padding: 0.9rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.6rem;
}
@media (max-width: 640px) { .board-row { grid-template-columns: 1fr; } .board-stats, .board-last { display: none; } }
.board-row { transition: border-color 0.15s, box-shadow 0.15s; }
.board-row:hover { border-color: var(--accent-dim); box-shadow: 0 0 0 1px rgba(218,170,86,0.15), 0 4px 16px rgba(0,0,0,0.4); }
.board-name { font-size: 1.1rem; font-weight: 600; color: var(--accent); font-family: var(--font-display); letter-spacing: 0.03em; }
.home-col { transition: border-color 0.15s; }
.home-col:hover { border-color: var(--accent-dim); }
.news-card { transition: border-color 0.15s, box-shadow 0.15s; }
.news-card:hover { border-color: var(--accent-dim); box-shadow: 0 4px 16px rgba(0,0,0,0.35); }
.board-desc { color: var(--text-dim); font-size: 0.85rem; margin-top: 0.2rem; }
.board-stats { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.8rem; color: var(--text-dim); text-align: right; white-space: nowrap; }
.board-stats b { color: var(--text); }
.board-last { font-size: 0.85rem; min-width: 0; }
.board-last a { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Индекс форума (стиль XenForo): группы → разделы --- */
.node-group {
    margin-bottom: 1.4rem;
    border: 1px solid var(--border-lt);
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(180deg, #1b1610, #14100b);
}
.node-group-head {
    background: #241d13;
    color: var(--accent);
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--accent-dim);
}
.node-row {
    display: grid;
    grid-template-columns: 1fr auto minmax(190px, 230px);
    gap: 1.4rem;
    align-items: center;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.node-row:last-child { border-bottom: none; }
.node-row:hover { background: rgba(218,170,86,0.05); }
.node-title { font-family: var(--font-display); font-size: 0.98rem; color: var(--accent); }
.node-title:hover { color: var(--accent-bright); }
.node-desc { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.15rem; }
.node-stats { text-align: right; font-size: 0.74rem; color: var(--text-dim); white-space: nowrap; }
.node-stats b { color: var(--text); }
.node-last { display: flex; align-items: center; gap: 0.6rem; min-width: 0; font-size: 0.85rem; }
.node-last-info { min-width: 0; }
.node-last-info a { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-last-info .meta { margin: 0.1rem 0 0; }
@media (max-width: 720px) {
    .node-row { grid-template-columns: 1fr; }
    .node-stats, .node-last { display: none; }
}

.forum-stats {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.9rem 1.2rem;
    background: var(--bg-card);
    margin-top: 0.5rem;
}
.forum-stats-title { color: var(--accent); font-family: var(--font-display); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.forum-stats-row { display: flex; flex-wrap: wrap; gap: 1.2rem; color: var(--text-dim); font-size: 0.88rem; }
.forum-stats-row b { color: var(--text); }
.forum-newest { margin-left: auto; }

/* --- Форум на всю ширину + правая колонка --- */
body.forum-wide .container { max-width: 1360px; }
/* Форум и админка — сплошной тёмный фон без картинки и без декора */
body.forum-wide, body.admin-wide { background: #100d0a; }
body.forum-wide .ambient, body.admin-wide .ambient { display: none; }

/* Раздел «Клан»: фоновая картинка на всю страницу с затемнением */
body.clan-bg {
    background:
        linear-gradient(180deg, rgba(9,7,5,0.82), rgba(9,7,5,0.9)),
        url('/static/img/clan.png') center top / cover no-repeat fixed;
    background-color: #0d0b09;
}
body.clan-bg .ambient { display: none; }

/* Единый фон для вспомогательных страниц (заявка, профиль, вход/регистрация) */
body.page-bg {
    background:
        linear-gradient(180deg, rgba(8,6,4,0.88), rgba(8,6,4,0.94)),
        url('/static/img/hero/2.png') center top / cover no-repeat fixed;
    background-color: #0d0b09;
}
body.page-bg .ambient { display: none; }

/* --- Главная: полноэкранный слайдер со сменой фона (стиль bohpts) --- */
body.home-hero { background: #060403; height: 100vh; overflow: hidden; }
body.home-hero .ambient { display: none; }
body.home-hero .container { padding: 0; max-width: none; flex: 1; }
body.home-hero .site-footer { display: none; }

.hero-deck { position: fixed; inset: 0; z-index: 1; }
.hero-slide {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 5rem 1.2rem 3rem;
    opacity: 1; visibility: hidden; z-index: 0;
}
/* новый экран проявляется ПОВЕРХ предыдущего (тот держит картинку) —
   без провала в темноту между слайдами */
.hero-slide.is-prev { visibility: visible; z-index: 1; }
.hero-slide.is-active {
    visibility: visible; z-index: 2;
    animation: heroIn 0.85s cubic-bezier(0.33, 0, 0.2, 1) both;
}
@keyframes heroIn { from { opacity: 0; } to { opacity: 1; } }

/* живой фон (Ken Burns): картинка медленно зумится/плывёт на активном экране */
.hero-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    transform: scale(1.04);
    will-change: transform;
}
.hero-slide.is-active .hero-bg { animation: kenburns 20s ease-out both; }
.hero-slide:nth-child(2) .hero-bg { transform-origin: 30% 40%; }
.hero-slide:nth-child(3) .hero-bg { transform-origin: 70% 60%; }
@keyframes kenburns {
    from { transform: scale(1.04) translate(0, 0); }
    to   { transform: scale(1.18) translate(-1.6%, -1.2%); }
}

/* сильная виньетка: центр ярче, края уходят в темноту */
.hero-slide::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(ellipse 62% 72% at 50% 46%,
            rgba(6,4,3,0) 0%, rgba(6,4,3,0.35) 45%, rgba(6,4,3,0.84) 78%, rgba(3,2,1,0.98) 100%),
        linear-gradient(180deg, rgba(3,2,1,0.5), rgba(3,2,1,0.32) 40%, rgba(3,2,1,0.66));
}
.hero-slide .sec-inner {
    position: relative; z-index: 2;
    background: radial-gradient(ellipse 88% 78% at 50% 50%,
        rgba(6,4,3,0.5), rgba(6,4,3,0.12) 68%, transparent 88%);
    /* плавный въезд контента активного экрана */
    opacity: 0; transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.hero-slide.is-active .sec-inner { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .hero-slide.is-active .hero-bg { animation: none; }
}

/* точки-навигация справа */
.hero-dots {
    position: fixed; right: 1.4rem; top: 50%; transform: translateY(-50%);
    z-index: 5; display: flex; flex-direction: column; gap: 0.7rem;
}
.hero-dots button {
    width: 11px; height: 11px; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--accent-dim); background: rgba(0,0,0,0.4); padding: 0;
    transition: background 0.2s, transform 0.2s, border-color 0.2s;
}
.hero-dots button:hover { border-color: var(--accent); }
.hero-dots button.is-on { background: var(--accent); border-color: var(--accent); transform: scale(1.25); }
@media (max-width: 640px) { .hero-dots { right: 0.7rem; } }

@media (prefers-reduced-motion: reduce) {
    .hero-slide, .hero-slide .sec-inner { transition: none; }
}
.forum-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .forum-layout { grid-template-columns: 1fr; } }
.forum-main { min-width: 0; }
.forum-side { display: flex; flex-direction: column; gap: 1.2rem; position: sticky; top: 80px; }
@media (max-width: 900px) { .forum-side { position: static; } }

.side-widget {
    background: linear-gradient(180deg, #1b1610, #14100b);
    border: 1px solid var(--border-lt);
    border-radius: 10px;
    overflow: hidden;
}
.side-widget-head {
    background: #241d13;
    color: var(--accent);
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.78rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--accent-dim);
    display: flex; align-items: center; justify-content: space-between;
}
.online-count {
    background: rgba(90,186,71,0.15); color: var(--online);
    border: 1px solid rgba(90,186,71,0.4); border-radius: 20px;
    font-size: 0.72rem; padding: 0.05rem 0.5rem; font-family: var(--font-body);
}
.side-recent { list-style: none; }
.side-recent li { display: flex; gap: 0.6rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border); }
.side-recent li:last-child { border-bottom: none; }
.side-recent-info { min-width: 0; }
.side-recent-info a { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.side-recent-info .meta { margin: 0.1rem 0 0; font-size: 0.75rem; }
.online-list { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.8rem 0.9rem; }
.online-chip {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.25rem 0.6rem 0.25rem 0.3rem;
    background: var(--bg); border: 1px solid var(--border); border-radius: 20px;
    color: var(--text); font-size: 0.82rem;
}
.online-chip:hover { border-color: var(--accent-dim); text-decoration: none; }
.side-widget .empty { padding: 0.9rem; font-size: 0.85rem; }

/* --- Доска: список тем --- */
.topic-list { margin-top: 1rem; border: 1px solid var(--border-lt); border-radius: 8px; overflow: hidden; }
.topic-head, .topic-row {
    display: grid;
    grid-template-columns: 1fr 80px 80px 150px;
    gap: 0.7rem;
    align-items: center;
    padding: 0.5rem 0.9rem;
}
.topic-head { background: var(--bg-card); color: var(--text-dim); font-size: 0.74rem; }
.topic-row { border-top: 1px solid var(--border); }
.topic-row:hover { background: rgba(218,170,86,0.04); }
.topic-row.official { background: linear-gradient(90deg, rgba(201,169,96,0.07), transparent 60%); }
.th-num, .topic-num { text-align: center; color: var(--text-dim); font-size: 0.78rem; }
.topic-num b { color: var(--text); font-size: 0.88rem; }
.topic-title a { font-weight: 600; font-size: 0.9rem; }
.topic-title .meta { margin: 0.15rem 0 0; }
.topic-last { text-align: right; }
@media (max-width: 640px) {
    .topic-head { display: none; }
    .topic-row { grid-template-columns: 1fr; }
    .topic-num, .topic-last { display: none; }
}

/* --- Лента новостей --- */
.news-feed { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1rem; }
.news-card { padding: 1rem 1.2rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; }
.news-card.official { border-left: 3px solid var(--accent); }
.news-card h2 { font-size: 1.1rem; }
.news-card .meta { margin: 0.3rem 0 0; }

.news-block h2 { color: var(--accent); font-size: 1.2rem; margin-bottom: 0.8rem; }
.news-block ul, .article-list { list-style: none; }
.news-block li, .article-list li {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.meta { color: var(--text-dim); font-size: 0.85rem; margin-left: auto; white-space: nowrap; }
.empty { color: var(--text-dim); padding: 2rem 0; }

.pin {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    align-self: center;
}

.breadcrumbs { margin-bottom: 1.2rem; color: var(--text-dim); font-size: 0.9rem; }

.article h1 { color: var(--accent); margin-bottom: 0.4rem; }
.article > .meta { margin: 0 0 1.5rem; }

.article-body h2, .article-body h3 { color: var(--text); margin: 1.4rem 0 0.6rem; }
.article-body p, .article-body ul, .article-body ol { margin-bottom: 0.9rem; }
.article-body ul, .article-body ol { padding-left: 1.5rem; }
.article-body code {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.1em 0.35em;
    font-size: 0.9em;
}
.article-body table { border-collapse: collapse; margin-bottom: 1rem; width: 100%; }
.article-body th, .article-body td {
    border: 1px solid var(--border);
    padding: 0.4rem 0.7rem;
    text-align: left;
}
.article-body th { background: var(--bg-card); color: var(--accent); }

/* --- Шапка: блок пользователя --- */
.header-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.user-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text);
}
.user-chip:hover { text-decoration: none; color: var(--accent); }
.dim-link { color: var(--text-dim); font-size: 0.9rem; }

/* --- Выпадающее меню пользователя --- */
.user-menu { position: relative; }
button.user-chip {
    background: none; border: 1px solid transparent; border-radius: 20px;
    padding: 0.2rem 0.6rem 0.2rem 0.25rem; cursor: pointer; font-family: inherit;
    font-size: 0.92rem; color: var(--text);
}
button.user-chip:hover, .user-menu [aria-expanded="true"] { border-color: var(--accent-dim); background: rgba(218,170,86,0.08); }
.user-chip .chevron { color: var(--text-dim); font-size: 0.7rem; }
.user-dropdown {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
    min-width: 200px;
    background: linear-gradient(180deg, #221b12, #16110b);
    border: 1px solid var(--accent-dim); border-radius: 10px;
    box-shadow: 0 12px 34px rgba(0,0,0,0.55); overflow: hidden;
}
.user-dropdown-head { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); }
.udh-name { display: block; font-family: var(--font-display); color: var(--accent); }
.udh-role { color: var(--text-dim); font-size: 0.78rem; }
.user-dropdown a {
    display: block; padding: 0.6rem 0.9rem; color: var(--text); font-size: 0.9rem;
}
.user-dropdown a:hover { background: rgba(218,170,86,0.1); color: var(--accent-bright); text-decoration: none; }
.dropdown-sep { height: 1px; background: var(--border); margin: 0.2rem 0; }
.user-dropdown a.dropdown-danger { color: #e8a0a8; }
.user-dropdown a.dropdown-danger:hover { background: rgba(224,90,90,0.12); color: #f0b0b8; }

/* --- Аватары --- */
.avatar { border-radius: 50%; object-fit: cover; display: inline-flex; }
.avatar-sm { width: 28px; height: 28px; }
.avatar-lg { width: 96px; height: 96px; font-size: 2.2rem; }
.avatar-fallback {
    align-items: center;
    justify-content: center;
    background: var(--accent-dim);
    color: var(--bg);
    font-weight: 700;
}

/* --- Смена аватарки кликом --- */
.avatar-upload {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    line-height: 0;
}
.avatar-upload .avatar-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 0.35rem 0 0.45rem;
    background: rgba(0, 0, 0, 0.65);
    color: var(--text);
    font-size: 0.7rem;
    line-height: 1;
    text-align: center;
    opacity: 0;
    transition: opacity 0.15s;
}
.avatar-upload:hover .avatar-overlay { opacity: 1; }

/* стильная кнопка загрузки файла (вместо «choose file») */
.upload-btn {
    display: inline-block; cursor: pointer;
    padding: 0.5rem 1.2rem; border: 1px solid var(--accent-dim); border-radius: 6px;
    background: transparent; color: var(--accent);
    font-family: var(--font-display); font-size: 0.82rem;
    text-transform: uppercase; letter-spacing: 0.04em; text-align: center;
}
.upload-btn:hover { background: rgba(218,170,86,0.12); color: var(--accent-bright); border-color: var(--accent); }

/* --- Кнопки --- */
.btn {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    border: 1px solid var(--accent-dim);
    border-radius: 6px;
    background: transparent;
    color: var(--accent);
    font-size: 0.82rem;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}
.btn:hover { background: rgba(218,170,86,0.12); color: var(--accent-bright); border-color: var(--accent); text-decoration: none; }
.btn-accent {
    background: linear-gradient(180deg, var(--accent), var(--accent-dim));
    border-color: var(--accent);
    color: #1a1408;
    font-weight: 600;
}
.btn-accent:hover { background: linear-gradient(180deg, var(--accent-bright), var(--accent)); color: #1a1408; }
.btn-sm { padding: 0.3rem 0.8rem; font-size: 0.72rem; }

/* --- Формы --- */
form label { display: block; margin-bottom: 1rem; color: var(--text-dim); font-size: 0.9rem; }
input[type="text"], input[type="password"], input[type="number"], select, textarea {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.55rem 0.7rem;
    background: #14100b;
    border: 1px solid var(--border-lt);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.95rem;
    font-family: inherit;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent-dim);
}
input[type="file"] { margin-top: 0.3rem; color: var(--text-dim); font-size: 0.85rem; }
textarea { resize: vertical; }

.hint { color: var(--text-dim); font-size: 0.9rem; margin: 0.8rem 0; }
.hint-inline { color: var(--text-dim); font-size: 0.8rem; font-weight: 400; }

.alert {
    padding: 0.7rem 1rem;
    border-radius: 6px;
    margin-bottom: 1.2rem;
    font-size: 0.92rem;
}
.alert-error { background: #3a1f22; border: 1px solid #6e3038; color: #e8a0a8; }
.alert-ok { background: #1f3326; border: 1px solid #2f5e3d; color: #9fd8ae; }

/* --- Регистрация / вход --- */
.auth-card {
    max-width: 420px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.auth-card h1 { color: var(--accent); margin-bottom: 0.5rem; font-size: 1.5rem; }

/* --- Личный кабинет --- */
.profile-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
@media (max-width: 720px) {
    .profile-layout { grid-template-columns: 1fr; }
}
.profile-card, .profile-edit {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
}
.profile-card { text-align: center; }
.profile-card h2 { margin-top: 0.8rem; font-size: 1.2rem; }
.profile-class { color: var(--accent); font-size: 0.95rem; margin-top: 0.2rem; }
.badges { margin: 0.8rem 0; display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; }
.badge {
    padding: 0.15rem 0.6rem;
    border-radius: 20px;
    font-size: 0.78rem;
    border: 1px solid var(--border);
}
.badge-status { color: #9fd8ae; border-color: #2f5e3d; }
.badge-role { color: var(--accent); border-color: var(--accent-dim); }
.badge-cp {
    color: #c8b485; border: none;
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    font-family: var(--font-display); letter-spacing: 0.02em;
}
a.badge-cp:hover { color: var(--accent-bright); background: color-mix(in srgb, var(--accent) 16%, transparent); text-decoration: none; }

/* форумная подпись */
.profile-sig, .comment-sig {
    border-top: 1px dashed var(--border);
    margin-top: 0.6rem; padding-top: 0.5rem;
    color: var(--text-dim); font-size: 0.82rem; font-style: italic;
    white-space: pre-line;
}
.profile-sig { text-align: left; }

/* смена клан-пака руководством (в профиле) */
.cp-assign { text-align: left; }
.cp-assign-label { color: var(--text-dim); font-size: 0.82rem; margin-bottom: 0.4rem; }
.cp-assign select { margin-bottom: 0.5rem; }

/* --- Профиль форумного типа --- */
.avatar-xl { width: 120px; height: 120px; font-size: 3rem; }
.uprofile { margin-top: 0.5rem; }
.uprofile-cover {
    height: 200px; border-radius: 12px 12px 0 0;
    background-size: cover; background-position: center;
    border: 1px solid var(--accent-dim); border-bottom: none;
    box-shadow: inset 0 -60px 80px -20px rgba(15,13,10,0.9);
}
.uprofile-header.has-cover { border-radius: 0 0 12px 12px; margin-top: -1px; }
.uprofile-header {
    display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
    padding: 1.4rem 1.6rem;
    background: linear-gradient(180deg, #221a10, #14100b);
    border: 1px solid var(--accent-dim);
    border-radius: 12px;
}
.uprofile-ava { position: relative; flex-shrink: 0; }
.online-dot {
    position: absolute; right: 6px; bottom: 6px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #6b6b6b; border: 3px solid #14100b;
}
.online-dot.is-online { background: var(--online); box-shadow: 0 0 8px var(--online); }
.uprofile-id { min-width: 0; }
.uprofile-id h1 { font-size: 2rem; color: var(--accent); }
.uprofile-role {
    display: inline-block; margin: 0.3rem 0; font-family: var(--font-display);
    text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; color: var(--accent);
}
.uprofile-role.role-admin, .uprofile-role.role-admin ~ *,
.pa-role.role-admin, .pa-name.role-admin, .author-admin, .badge-role.role-admin { color: var(--role-admin); }
.uprofile-role.role-moderator,
.pa-role.role-moderator, .pa-name.role-moderator, .author-moderator, .badge-role.role-moderator { color: var(--role-moderator); }
.uprofile-role.role-developer,
.pa-role.role-developer, .pa-name.role-developer, .author-developer, .badge-role.role-developer { color: var(--role-developer); }
.uprofile-role.role-officer,
.pa-role.role-officer, .pa-name.role-officer, .author-officer, .badge-role.role-officer { color: var(--role-officer); }
.uprofile-role.role-member,
.pa-role.role-member, .pa-name.role-member, .author-member, .badge-role.role-member { color: var(--role-member); }
.badge-role.role-admin { border-color: var(--role-admin); }
.badge-role.role-moderator { border-color: var(--role-moderator); }
.badge-role.role-officer { border-color: var(--role-officer); }
.badge-role.role-developer { border-color: var(--role-developer); }
.badge-role.role-member { border-color: var(--role-member); }
.uprofile-id .badge-cp { display: block; width: fit-content; margin-top: 0.2rem; }
.uprofile-stats { display: flex; gap: 1.6rem; margin-left: auto; text-align: center; }
.uprofile-stats .num { display: block; font-family: var(--font-display); font-size: 1.4rem; color: var(--text); }
.uprofile-stats .lbl { color: var(--text-dim); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }

.uprofile-body { display: grid; grid-template-columns: 1fr 320px; gap: 1.2rem; margin-top: 1.2rem; align-items: start; }
@media (max-width: 820px) { .uprofile-body { grid-template-columns: 1fr; } }
.uprofile-main { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }

.panel { background: var(--bg-card); border: 1px solid var(--border-lt); border-radius: 10px; overflow: hidden; }
.panel-head {
    background: #241d13; color: var(--accent); font-family: var(--font-display);
    text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.78rem;
    padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--accent-dim);
}
.panel-in { padding: 0.9rem; }

.uprofile-topics { list-style: none; }
.uprofile-topics li { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border); }
.uprofile-topics li:last-child { border-bottom: none; }
.uprofile-topics .meta { white-space: nowrap; }

.wall-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.wall-form textarea { margin-top: 0; }
.wall-post { display: flex; gap: 0.7rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
.wall-post:last-child { border-bottom: none; }
.wall-main { flex: 1; min-width: 0; }
.wall-head { display: flex; align-items: baseline; gap: 0.5rem; }
.wall-author { font-weight: 600; }
.wall-head .meta { margin-left: 0; }
.wall-body { margin-top: 0.2rem; font-size: 0.92rem; white-space: pre-line; }

.info-list { padding: 0.4rem 0.9rem 0.9rem; font-size: 0.88rem; }
.info-list dt { color: var(--text-dim); float: left; clear: left; width: 42%; padding: 0.28rem 0; }
.info-list dd { margin-left: 44%; padding: 0.28rem 0; word-break: break-word; }
.uprofile-side .panel .btn { margin: 0 0.9rem 0.9rem; }

/* вкладки профиля */
.ptabs { display: flex; gap: 0.2rem; padding: 0.4rem 0.5rem 0; background: #241d13; border-bottom: 1px solid var(--accent-dim); }
.ptab {
    background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--text-dim); font-family: var(--font-display); font-size: 0.82rem;
    text-transform: uppercase; letter-spacing: 0.04em; padding: 0.5rem 0.9rem; cursor: pointer;
}
.ptab.active { color: var(--accent); border-bottom-color: var(--accent); }
.ptab:hover { color: var(--accent-bright); }
.uprofile-activity { list-style: none; }
.uprofile-activity li { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border); }
.uprofile-activity li:last-child { border-bottom: none; }
.act-body { font-size: 0.9rem; }
.uprofile-activity .meta { margin: 0.2rem 0 0; }

/* лайки */
.react-row { margin-top: 0.4rem; }
.like-btn {
    background: none; border: 1px solid var(--border); border-radius: 20px;
    color: var(--text-dim); font-size: 0.82rem; padding: 0.12rem 0.7rem; cursor: pointer;
    font-family: inherit; transition: all 0.15s;
}
.like-btn:hover { border-color: #6e3038; color: #e8a0a8; }
.like-btn.liked { border-color: #6e3038; background: rgba(224,90,90,0.12); color: #e8a0a8; }
.like-static { cursor: default; }
.cover-upload-form { margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }

/* --- Настройки --- */
.settings { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-card); margin-top: 1rem; }
.settings-body { padding: 1.2rem; display: grid; grid-template-columns: 240px 1fr; gap: 1.6rem; align-items: start; }
@media (max-width: 720px) { .settings-body { grid-template-columns: 1fr; } }
.settings-media { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; }
.settings-media form { text-align: center; }
.settings-ava { text-align: center; margin-bottom: 0.3rem; }
.settings-form { min-width: 0; }
.account-info { grid-column: 1 / -1; display: flex; gap: 1.5rem; color: var(--text-dim); font-size: 0.9rem; margin-bottom: 0.4rem; }
.account-info b { color: var(--text); }
.profile-contacts { text-align: left; margin: 1rem 0; font-size: 0.9rem; }
.profile-contacts dt { color: var(--text-dim); float: left; clear: left; width: 40%; }
.profile-contacts dd { margin-left: 45%; margin-bottom: 0.3rem; word-break: break-word; }
.profile-about {
    text-align: left;
    font-size: 0.9rem;
    color: var(--text);
    border-top: 1px solid var(--border);
    padding-top: 0.8rem;
    margin-top: 0.8rem;
    white-space: pre-line;
}
.profile-card .meta { margin: 1rem 0 0; white-space: normal; }
.profile-edit h2 { font-size: 1.1rem; margin-bottom: 1.2rem; color: var(--accent); }

/* --- Списки статей: официальные и модерация --- */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.article-list li { justify-content: space-between; }
.article-row-main { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.article-list li.official {
    border-left: 3px solid var(--accent);
    padding-left: 0.7rem;
    background: linear-gradient(90deg, rgba(201, 169, 96, 0.07), transparent 60%);
}
.badge-official { color: var(--accent); border-color: var(--accent-dim); }
.badge-officer { color: var(--role-officer); border-color: color-mix(in srgb, var(--role-officer) 45%, transparent); background: color-mix(in srgb, var(--role-officer) 10%, transparent); }
.badge-pinned { color: #9fc4d8; border-color: #2f4a5e; }
.badge-locked { color: var(--text-dim); border-color: var(--border); }
.comment-count { color: var(--text-dim); }

.article-official {
    border: 1px solid var(--accent-dim);
    border-radius: 8px;
    padding: 1.2rem 1.5rem;
    background: linear-gradient(180deg, rgba(201, 169, 96, 0.05), transparent 30%);
}
.article-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.mod-toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 1rem 0;
    padding: 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.mod-toolbar form { margin: 0; }
.btn-danger { color: #e8a0a8; border-color: #6e3038; }
.btn-danger:hover { background: #6e3038; color: var(--text); }

/* --- Визуальный редактор (WYSIWYG) --- */
.editor-label { display: block; color: var(--text-dim); font-size: 0.9rem; margin-bottom: 0.4rem; }
.wyz { border: 1px solid var(--border-lt); border-radius: 8px; overflow: hidden; margin-bottom: 1rem; }
.wyz-toolbar { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.45rem; background: #241d13; border-bottom: 1px solid var(--border-lt); }
.wyz-toolbar button {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px;
    background: none; border: 1px solid transparent; border-radius: 5px;
    color: var(--text-dim); padding: 0 0.5rem; cursor: pointer;
    font-family: inherit; font-size: 0.88rem; line-height: 1;
}
.wyz-toolbar button:hover { color: var(--accent); border-color: var(--accent-dim); background: rgba(218,170,86,0.08); }
.wyz-toolbar button.active { color: var(--accent); border-color: var(--accent-dim); background: rgba(224,183,104,0.18); }
.wyz-toolbar button svg { display: block; }
.tb-code { font-family: ui-monospace, monospace; font-size: 0.8rem; }
.wyz-area {
    min-height: 260px; padding: 1rem 1.1rem; background: var(--bg);
    color: var(--text); line-height: 1.6; outline: none; font-size: 0.98rem;
}
.wyz-area.is-empty:before { content: attr(data-placeholder); color: var(--text-dim); pointer-events: none; }
.wyz-area:focus { box-shadow: inset 0 0 0 1px var(--accent-dim); }
.wyz-area h2 { color: var(--accent); font-size: 1.3rem; margin: 0.8rem 0 0.4rem; }
.wyz-area h3 { color: var(--text); font-size: 1.1rem; margin: 0.7rem 0 0.3rem; }
.wyz-area ul, .wyz-area ol { padding-left: 1.5rem; margin: 0.5rem 0; }
.wyz-area blockquote { border-left: 3px solid var(--accent-dim); padding-left: 0.9rem; color: var(--text-dim); margin: 0.6rem 0; }
.wyz-area img { max-width: 100%; border-radius: 6px; margin: 0.4rem 0; }
.wyz-area a { color: var(--accent); }
.news-fields { margin-bottom: 0.5rem; }

/* --- Редактор статей (старый, markdown) --- */
.editor { margin-bottom: 1rem; }
.editor-tabs { display: flex; gap: 0.3rem; margin-bottom: 0.4rem; }
.editor-tab {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px 6px 0 0;
    color: var(--text-dim);
    padding: 0.35rem 0.9rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.88rem;
}
.editor-tab.active {
    color: var(--accent);
    border-color: var(--border);
    background: var(--bg-card);
}
.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.4rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px 6px 0 0;
    border-bottom: none;
}
.editor-toolbar.disabled { opacity: 0.4; pointer-events: none; }
.editor-toolbar button {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-dim);
    padding: 0.25rem 0.55rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
}
.editor-toolbar button:hover {
    color: var(--accent);
    border-color: var(--accent-dim);
}
.tb-sep { width: 1px; background: var(--border); margin: 0.2rem 0.3rem; }
.editor textarea {
    margin-top: 0;
    border-radius: 0 0 6px 6px;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.55;
}
.editor-preview {
    border: 1px solid var(--border);
    border-radius: 0 0 6px 6px;
    padding: 1rem;
    min-height: 200px;
    background: var(--bg);
}
.article-body img { max-width: 100%; border-radius: 6px; }

.form-page { max-width: 760px; }
.form-page h1 { color: var(--accent); margin-bottom: 1.2rem; font-size: 1.5rem; }
.form-actions { display: flex; gap: 0.6rem; }

/* секции формы — каждая в своей рамке */
.form-section {
    background: var(--bg-card);
    border: 1px solid var(--border-lt);
    border-radius: 10px;
    padding: 1.1rem 1.2rem;
    margin-bottom: 1rem;
}
.form-section .field { display: block; margin-bottom: 0.9rem; }
.form-section .field:last-child { margin-bottom: 0; }
.field-label { display: block; color: var(--text-dim); font-size: 0.88rem; margin-bottom: 0.4rem; }
.form-section input[type="text"],
.form-section textarea,
.form-section select { width: 100%; }
/* плашка «в каком разделе создаём» */
.field-where {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; color: var(--text-dim);
    background: rgba(224,183,104,0.08);
    border: 1px solid var(--accent-dim); border-radius: 20px;
    padding: 0.25rem 0.8rem; margin-bottom: 0.9rem;
}
.field-where a { color: var(--accent); font-family: var(--font-display); }

/* --- Тема форума (стиль XenForo) --- */
.thread-head { margin-bottom: 0.9rem; }
.thread-head h1 { color: var(--accent); font-size: 1.25rem; }
.thread-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.4rem 0; }
.thread-sub { margin: 0; }
.thread { display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0 1.5rem; }
.post-block {
    display: grid; grid-template-columns: 148px 1fr;
    background: var(--bg-card); border: 1px solid var(--border-lt);
    border-radius: 6px; overflow: hidden;
}
.post-block.post-official { border-color: var(--accent-dim); }

/* Статья (первое сообщение) — выделяется; ответы — спокойнее */
.post-op {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border-lt));
    border-top: 2px solid var(--accent);
    box-shadow: 0 0 0 1px rgba(224,183,104,0.18),
                0 0 26px -6px rgba(224,183,104,0.22),
                0 12px 34px -18px rgba(0,0,0,0.75);
}
.post-op .post-author {
    background: linear-gradient(180deg, #322610, #18120b);
    border-right-color: var(--accent-dim);
}
.post-op .post-author .avatar-lg {
    width: 68px; height: 68px; font-size: 1.8rem;
    box-shadow: 0 0 0 2px var(--accent), 0 0 14px -2px rgba(224,183,104,0.55);
}
.post-op .post-main { background: linear-gradient(180deg, rgba(224,183,104,0.06), transparent 45%); }
.post-op .post-message { font-size: 0.96rem; line-height: 1.6; }
.op-tag {
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em;
    font-size: 0.62rem; color: #1a1408;
    background: linear-gradient(180deg, var(--accent), var(--accent-dim));
    padding: 0.1rem 0.5rem; border-radius: 5px; margin-right: auto;
}
.post-reply { border-color: var(--border); background: #16110b; }
.post-reply .post-author { background: linear-gradient(180deg, #1c160e, #14100b); }
.post-reply .post-author .avatar-lg { width: 48px; height: 48px; font-size: 1.3rem; }

.post-author {
    background: linear-gradient(180deg, #221b12, #17110b);
    border-right: 1px solid var(--border);
    padding: 0.7rem 0.55rem; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 0.22rem;
}
.post-author .avatar-lg { width: 56px; height: 56px; font-size: 1.5rem; }
.pa-name { font-family: var(--font-display); font-size: 0.9rem; }
.pa-role { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; }
.pa-role.role-admin, .pa-name.role-admin { color: var(--role-admin); }
.pa-role.role-moderator, .pa-name.role-moderator { color: var(--role-moderator); }
.pa-role.role-developer, .pa-name.role-developer { color: var(--role-developer); }
.pa-role.role-member, .pa-name.role-member { color: var(--role-member); }
/* клан-пак в панели автора — тоньше, без подложки, чтобы не спорил со званием */
.post-author .badge-cp {
    background: none; padding: 0; margin-top: 0.15rem;
    font-size: 0.72rem; color: #bda874;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-author a.badge-cp:hover { background: none; color: var(--accent-bright); }
/* класс — одна строка, мелко, мягкая подсветка, без рамки */
.pa-class {
    color: #9fb6cc; font-size: 0.7rem; letter-spacing: 0.02em; margin-top: 0.05rem;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-shadow: 0 0 8px rgba(159,182,204,0.22);
}
.pa-stats {
    display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.5rem;
    width: 100%; margin-top: 0.45rem; padding-top: 0.45rem;
    border-top: 1px solid var(--border); font-size: 0.72rem;
}
.pa-stats dt { color: var(--text-dim); text-align: left; }
.pa-stats dd { color: var(--text); text-align: right; }
.post-main { padding: 0.35rem 0.9rem 0.7rem; min-width: 0; display: flex; flex-direction: column; }
.post-bar { display: flex; align-items: center; gap: 0.7rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
.post-bar .meta { margin: 0; }
.post-num { margin-left: auto; color: var(--text-dim); font-size: 0.82rem; }
.post-message { padding: 0.55rem 0; line-height: 1.5; font-size: 0.85rem; white-space: pre-line; min-width: 0; overflow-wrap: anywhere; }
.post-message.article-body { white-space: normal; }
.post-message h2 { color: var(--accent); font-size: 1.25rem; margin: 0.6rem 0 0.4rem; }
.post-message h3 { color: var(--text); font-size: 1.08rem; margin: 0.6rem 0 0.3rem; }
.post-message ul, .post-message ol { padding-left: 1.5rem; margin: 0.5rem 0; }
.post-message blockquote { border-left: 3px solid var(--accent-dim); padding-left: 0.9rem; color: var(--text-dim); margin: 0.6rem 0; }
.post-message code, .article-body code, .wyz-area code {
    background: rgba(255,255,255,0.06); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.03rem 0.35rem;
    font-family: ui-monospace, "SF Mono", monospace; font-size: 0.86em; color: #e8d1a6;
}
.post-message hr, .article-body hr, .wyz-area hr {
    border: none; border-top: 1px solid var(--accent-dim); margin: 1rem 0; opacity: 0.7;
}
.post-message s, .article-body s, .wyz-area s { color: var(--text-dim); }
.post-message img { max-width: 100%; border-radius: 6px; }
.post-message a { color: var(--accent); }
.post-sig { border-top: 1px dashed var(--border); margin-top: auto; padding-top: 0.6rem; color: var(--text-dim); font-size: 0.82rem; font-style: italic; white-space: pre-line; }
.post-actions { margin-top: 0.6rem; }
.post-actions .like-btn { font-size: 0.85rem; padding: 0.25rem 0.9rem; }

/* спойлер */
.post-message details, .article-body details, .wyz-area details {
    border: 1px solid var(--border); border-radius: 6px; margin: 0.6rem 0; background: var(--bg);
}
.post-message summary, .article-body summary, .wyz-area summary {
    cursor: pointer; padding: 0.5rem 0.8rem; color: var(--accent);
    font-family: var(--font-display); font-size: 0.85rem; user-select: none;
}
.post-message details[open] summary, .article-body details[open] summary { border-bottom: 1px solid var(--border); }
.post-message details > *:not(summary), .article-body details > *:not(summary) { padding: 0 0.8rem 0.6rem; }

@media (max-width: 640px) {
    .post-block { grid-template-columns: 1fr; }
    .post-author {
        flex-direction: row; flex-wrap: wrap; text-align: left; justify-content: flex-start;
        border-right: none; border-bottom: 1px solid var(--border); padding: 0.7rem 0.9rem;
    }
    .post-author .avatar-lg { width: 44px; height: 44px; font-size: 1.1rem; }
    .pa-stats { display: none; }
}

/* --- Комментарии --- */
.comments { margin-top: 2.5rem; }
.comments h2 { color: var(--accent); font-size: 1.2rem; margin-bottom: 1rem; }
.comment {
    display: flex;
    gap: 0.9rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border);
}
.avatar-md { width: 40px; height: 40px; font-size: 1.1rem; flex-shrink: 0; }
/* панель автора у сообщения: аватар + бейджи столбиком */
.comment-side { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: 88px; flex-shrink: 0; }
.comment-side .badge { font-size: 0.68rem; padding: 0.08rem 0.4rem; text-align: center; }
.comment-main { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.comment-author { font-weight: 600; }
.author-developer { color: var(--role-developer); }
.author-admin { color: var(--role-admin); }
.author-moderator { color: var(--role-moderator); }
.author-member { color: var(--role-member); }
.comment-class { color: var(--text-dim); font-size: 0.82rem; }
.comment-head .meta { margin-left: 0; }
.comment-body { margin-top: 0.3rem; white-space: pre-line; font-size: 0.95rem; }
.comment-form { margin-top: 1.5rem; }
.inline-form { display: inline; margin: 0; }
.link-danger {
    background: none;
    border: none;
    color: #b06a72;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}
.link-danger:hover { color: #e8a0a8; text-decoration: underline; }

/* --- Баннер ожидания подтверждения --- */
.alert-pending {
    background: #33301f;
    border: 1px solid #5e552f;
    color: #d8cf9f;
}

/* --- Раздел «Клан» --- */
.dim { color: var(--text-dim); font-weight: 400; }
.section-title {
    color: var(--accent);
    font-size: 1.2rem;
    margin: 1.8rem 0 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--accent-dim);
    padding-bottom: 0.4rem;
}

/* Орг-граф иерархии (чистый CSS, соединительные линии на ::before/::after) */
.org-scroll { overflow-x: auto; padding: 0.5rem 0 1rem; }
.org { display: inline-block; min-width: 100%; }
.org ul {
    display: flex;
    justify-content: center;
    padding-top: 22px;
    position: relative;
    list-style: none;
}
.org li {
    position: relative;
    padding: 22px 10px 0;
    text-align: center;
    list-style: none;
}
/* горизонтальные соединители над каждым узлом */
.org li::before, .org li::after {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    width: 50%;
    height: 22px;
    border-top: 2px solid var(--border);
}
.org li::after {
    right: auto;
    left: 50%;
    border-left: 2px solid var(--border);
}
/* единственный ребёнок — без развилки */
.org li:only-child { padding-top: 0; }
.org li:only-child::before, .org li:only-child::after { display: none; }
/* края ряда — убрать лишние линии */
.org li:first-child::before, .org li:last-child::after { border: 0 none; }
.org li:last-child::before {
    border-right: 2px solid var(--border);
    border-radius: 0 6px 0 0;
}
.org li:first-child::after { border-radius: 6px 0 0 0; }
/* вертикальный отвод от родителя вниз к ряду детей */
.org ul ul::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 22px;
    border-left: 2px solid var(--border);
}

.org-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.6rem 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    min-width: 92px;
    vertical-align: top;
}
a.org-card:hover { border-color: var(--accent-dim); text-decoration: none; }
.org-name { font-weight: 600; font-size: 0.9rem; }
.org-class { color: var(--text-dim); font-size: 0.78rem; }
.org-role { color: var(--accent); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.org-sub { color: var(--text-dim); font-size: 0.72rem; }
.org-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.72rem;
    color: var(--text-dim);
}
.org-leader { border-color: var(--accent); background: linear-gradient(180deg, rgba(201,169,96,0.12), transparent); }
.org-group { font-weight: 600; }
/* клан-паки — заметно кликабельны */
.org-cp {
    border-color: var(--accent-dim); font-weight: 600; min-width: 140px;
    background: linear-gradient(180deg, rgba(224,183,104,0.10), var(--bg-card));
    box-shadow: 0 0 0 1px rgba(224,183,104,0.12);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
a.org-cp:hover {
    border-color: var(--accent); transform: translateY(-3px);
    box-shadow: 0 0 0 1px var(--accent-dim), 0 8px 20px -8px rgba(0,0,0,0.6),
                0 0 16px -4px rgba(224,183,104,0.4);
}
.org-open {
    display: block; margin-top: 0.3rem; font-size: 0.72rem; color: var(--accent);
    opacity: 0.75; transition: opacity 0.15s, transform 0.15s;
}
a.org-cp:hover .org-open { opacity: 1; transform: translateX(2px); }
.org-solo { border-color: #3a4a5e; background: linear-gradient(180deg, rgba(90,140,190,0.08), var(--bg-card)); }
.org-solo .org-open { color: #8ab0d8; }
a.org-solo:hover { border-color: #6a8ab0; box-shadow: 0 0 0 1px #3a4a5e, 0 8px 20px -8px rgba(0,0,0,0.6); }
.org-academy { border-color: #2f5e3d; }

/* --- Страница клан-пака: состав сеткой --- */
.cp-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }
.cp-page-head h1 { color: var(--accent); }
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.7rem; margin-top: 0.8rem; }
.member-tile { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; transition: border-color 0.15s; }
.member-tile:hover { border-color: var(--accent-dim); }
.member-tile-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.7rem; color: var(--text); }
.member-tile-link:hover { text-decoration: none; }
.member-tile-name { font-weight: 600; font-size: 0.92rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.member-tile-class { color: var(--text-dim); font-size: 0.78rem; margin-left: auto; }
.member-tile-x { position: absolute; top: 4px; right: 6px; margin: 0; }
.member-tile-x .link-danger { font-size: 1rem; }
.cp-manage-box { margin-top: 1.5rem; padding: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; max-width: 520px; }
.cp-manage-box .section-title { margin-top: 0; border: none; }

.cp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.8rem; }
.cp-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
}
.cp-head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.cp-head h3 { color: var(--accent); font-size: 1.05rem; }
.cp-head .meta { margin-left: 0; }
.cp-desc { color: var(--text-dim); font-size: 0.88rem; margin: 0.4rem 0 0.8rem; }
.cp-create-form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.cp-create-form input[type="text"] { width: auto; flex: 1; min-width: 180px; margin-top: 0; }
.cp-create-form select { width: auto; min-width: 160px; margin-top: 0; }

/* состав КП + управление */
.cp-members { list-style: none; margin: 0.6rem 0 0; }
.cp-members li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.cp-member-class { color: var(--text-dim); font-size: 0.8rem; }
.cp-members .link-danger { margin-left: auto; font-size: 1rem; line-height: 1; }
.cp-manage { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; }
.cp-manage-row { display: flex; gap: 0.4rem; margin: 0; }
.cp-manage-row select { width: auto; flex: 1; min-width: 140px; margin-top: 0; padding: 0.35rem 0.5rem; }
.link-accent {
    background: none; border: none; color: var(--accent);
    font-size: 0.8rem; cursor: pointer; padding: 0; font-family: inherit;
}
.link-accent:hover { text-decoration: underline; }

/* --- Админка --- */
.stat-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.2rem 0 2rem; }
.stat {
    flex: 1;
    min-width: 110px;
    padding: 0.9rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-align: center;
}
.stat-num { display: block; font-size: 1.6rem; font-weight: 700; color: var(--accent); }
.stat-lbl { color: var(--text-dim); font-size: 0.82rem; }
.stat-alert { border-color: #6e5a30; }
.stat-alert .stat-num { color: #e0c060; }

.tag-cell { white-space: nowrap; }
.tag-cell .badge { margin-right: 0.2rem; }

.mod-comments { list-style: none; }
.mod-comments li { padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.mod-comment-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.mod-comment-head .meta { margin-left: 0; }
.mod-comment-body { margin-top: 0.3rem; font-size: 0.9rem; white-space: pre-line; }

.admin-block { margin: 1.5rem 0 2.5rem; }
.admin-block h2 { color: var(--accent); font-size: 1.15rem; margin-bottom: 0.5rem; }
.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: linear-gradient(180deg, #1b1610, #14100b);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(0,0,0,0.4);
}
.admin-table thead th {
    background: #241d13;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    padding: 0.7rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid var(--accent-dim);
}
.admin-table td {
    padding: 0.6rem 0.85rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.018); }
.admin-table tbody tr:hover { background: rgba(218,170,86,0.07); }
.admin-table select {
    width: auto; min-width: 96px; margin-top: 0; padding: 0.34rem 0.5rem;
    background: var(--bg); border-radius: 6px;
}
.admin-table select:hover { border-color: var(--accent-dim); }
.admin-actions { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.admin-table .meta { margin-left: 0; }

/* участник в таблице: аватар + ник */
.admin-user { display: flex; align-items: center; gap: 0.6rem; }
.admin-user .avatar { flex-shrink: 0; }
.admin-user .admin-user-name { font-weight: 600; }
.admin-user .meta { font-size: 0.78rem; }

/* цветные бейджи ролей и статусов */
.badge-role.role-developer { color: var(--role-developer); border-color: color-mix(in srgb, var(--role-developer) 45%, transparent); }
.badge-role.role-admin { color: var(--role-admin); border-color: color-mix(in srgb, var(--role-admin) 45%, transparent); }
.badge-role.role-moderator { color: var(--role-moderator); border-color: color-mix(in srgb, var(--role-moderator) 45%, transparent); }
.badge-role.role-officer { color: var(--role-officer); border-color: color-mix(in srgb, var(--role-officer) 45%, transparent); }
.badge-role.role-member { color: var(--role-member); border-color: color-mix(in srgb, var(--role-member) 45%, transparent); }
.pill { display: inline-block; padding: 0.12rem 0.6rem; border-radius: 20px; font-size: 0.76rem; border: 1px solid var(--border); white-space: nowrap; }
.pill.st-active { color: #9fd8ae; border-color: #2f5e3d; background: rgba(90,186,71,0.08); }
.pill.st-academy { color: #9fc4d8; border-color: #2f4a5e; background: rgba(90,150,200,0.08); }
.pill.st-inactive { color: var(--text-dim); }
.pill.st-no_clan { color: #e8a0a8; border-color: #6e3038; background: rgba(224,90,90,0.08); }

.site-footer {
    padding: 1rem 2rem;
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.85rem;
    text-align: center;
}

/* ===== Эмодзи-реакции ===== */
.rx-bar {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
    margin-top: 0.6rem; padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}
.rx-bar.rx-busy { opacity: 0.55; pointer-events: none; }
.rx-btn {
    display: inline-flex; align-items: center; gap: 0.22rem;
    padding: 0.1rem 0.45rem; border-radius: 14px;
    border: 1px solid var(--border); background: rgba(255,255,255,0.02);
    color: var(--text-dim); cursor: pointer; line-height: 1.5;
    transition: transform 0.12s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.rx-btn .rx-emoji { font-size: 1rem; display: inline-block; filter: saturate(0.85); }
.rx-btn .rx-count { font-size: 0.76rem; color: var(--text-dim); }
.rx-btn:empty { display: none; }
.rx-btn:not(.has):not(.is-mine) { opacity: 0.5; }
.rx-btn:hover { opacity: 1; border-color: var(--accent-dim); background: rgba(224,183,104,0.08); transform: translateY(-1px); }
.rx-btn.has { opacity: 1; border-color: var(--border-lt); }
.rx-btn.has .rx-count { color: var(--text); }
.rx-btn.is-mine {
    opacity: 1; border-color: var(--accent);
    background: rgba(224,183,104,0.16);
    box-shadow: 0 0 10px -3px rgba(224,183,104,0.5);
}
.rx-btn.is-mine .rx-emoji { filter: none; }
.rx-btn.is-mine .rx-count { color: var(--accent-bright); }
@keyframes rxPop { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }
.rx-btn.rx-pop .rx-emoji { animation: rxPop 0.35s ease; }
@media (prefers-reduced-motion: reduce) { .rx-btn.rx-pop .rx-emoji { animation: none; } }

/* ===== Красивые анимированные звания ===== */
/* цвет звания в переменную --rc, чтобы оформление писать один раз */
.role-admin     { --rc: var(--role-admin); }
.role-moderator { --rc: var(--role-moderator); }
.role-officer   { --rc: var(--role-officer); }
.role-developer { --rc: var(--role-developer); }
.role-member    { --rc: var(--role-member); }
.badge-officer  { --rc: var(--role-officer); }

/* пилюля-звание: подложка + свечение + мягкий пульс */
.badge-role, .badge-officer, .pa-role, .uprofile-role {
    position: relative; isolation: isolate; overflow: hidden;
    color: var(--rc, var(--accent));
    border: 1px solid color-mix(in srgb, var(--rc, var(--accent)) 60%, transparent);
    background: color-mix(in srgb, var(--rc, var(--accent)) 13%, transparent);
    text-shadow: 0 0 9px color-mix(in srgb, var(--rc, var(--accent)) 55%, transparent);
    box-shadow: 0 0 10px -3px color-mix(in srgb, var(--rc, var(--accent)) 55%, transparent),
                inset 0 0 8px -4px color-mix(in srgb, var(--rc, var(--accent)) 65%, transparent);
    animation: rankGlow 3.4s ease-in-out infinite;
}
.pa-role, .uprofile-role { padding: 0.12rem 0.6rem; border-radius: 20px; }
.uprofile-role { padding: 0.2rem 0.8rem; }

/* бегущий блик поверх подложки, под текстом (z-index:-1 + isolate) */
.badge-role::before, .badge-officer::before,
.pa-role::before, .uprofile-role::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(120deg, transparent 25%,
        color-mix(in srgb, var(--rc, var(--accent)) 55%, #fff 35%) 50%, transparent 75%);
    transform: translateX(-135%);
    opacity: 0.5;
    animation: rankSweep 5s ease-in-out infinite;
}

@keyframes rankGlow {
    0%, 100% { box-shadow: 0 0 10px -3px color-mix(in srgb, var(--rc, var(--accent)) 50%, transparent),
                           inset 0 0 8px -4px color-mix(in srgb, var(--rc, var(--accent)) 60%, transparent); }
    50%      { box-shadow: 0 0 17px -1px color-mix(in srgb, var(--rc, var(--accent)) 78%, transparent),
                           inset 0 0 11px -3px color-mix(in srgb, var(--rc, var(--accent)) 85%, transparent); }
}
@keyframes rankSweep {
    0%, 58% { transform: translateX(-135%); }
    100%    { transform: translateX(135%); }
}

/* имя автора со званием — лёгкое свечение (кроме бойца) */
.pa-name.role-admin, .pa-name.role-moderator, .pa-name.role-developer,
.uprofile-id h1 {
    text-shadow: 0 0 12px color-mix(in srgb, var(--rc, var(--accent)) 45%, transparent);
}

/* Боец — спокойно, без анимации и блика */
.badge-role.role-member, .pa-role.role-member, .uprofile-role.role-member {
    animation: none;
    text-shadow: none;
    box-shadow: none;
    background: color-mix(in srgb, var(--role-member) 8%, transparent);
    border-color: color-mix(in srgb, var(--role-member) 40%, transparent);
}
.badge-role.role-member::before, .pa-role.role-member::before,
.uprofile-role.role-member::before { display: none; }

@media (prefers-reduced-motion: reduce) {
    .badge-role, .badge-officer, .pa-role, .uprofile-role,
    .badge-role::before, .badge-officer::before,
    .pa-role::before, .uprofile-role::before { animation: none; }
    .badge-role::before, .badge-officer::before,
    .pa-role::before, .uprofile-role::before { display: none; }
}

/* ===== Модерация форума ===== */
.badge-hidden { color: #c9b0d8; border-color: #4a3a5e; background: rgba(158,120,196,0.10); }
.badge-pending { color: #e0b46a; border-color: #5e4a2f; background: rgba(216,180,106,0.10); }
.topic-row.topic-muted { opacity: 0.58; }
.topic-row.topic-muted:hover { opacity: 0.9; }
.alert-banned { background: rgba(224,90,90,0.14); border: 1px solid #6e3038; color: #f0b8b8; }
.ban-note {
    margin: 0 0 0.9rem; padding: 0.5rem 0.7rem; border-radius: 8px;
    background: rgba(224,90,90,0.12); border: 1px solid #6e3038;
    color: #e8a0a8; font-size: 0.85rem;
}
.ban-form { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.45rem; }

/* ===== Админ-панель: каркас + дашборд ===== */
body.admin-wide .container { max-width: 1220px; }
.admin-shell { display: grid; grid-template-columns: 210px 1fr; gap: 1.4rem; margin-top: 1rem; align-items: start; }
.admin-side { position: sticky; top: 1rem; background: var(--bg-card); border: 1px solid var(--border-lt); border-radius: 10px; overflow: hidden; }
.admin-side-title { padding: 0.8rem 1rem; font-family: var(--font-display); color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; border-bottom: 1px solid var(--border); }
.admin-nav { display: flex; flex-direction: column; padding: 0.4rem; gap: 0.15rem; }
.admin-nav a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.7rem; border-radius: 7px; color: var(--text-dim); font-size: 0.92rem; border: 1px solid transparent; }
.admin-nav a:hover { background: rgba(224,183,104,0.08); color: var(--text); text-decoration: none; }
.admin-nav a.on { background: rgba(224,183,104,0.14); color: var(--accent); border-color: var(--accent-dim); }
.admin-nav-badge { background: var(--danger); color: #fff; font-size: 0.7rem; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.35rem; }
.admin-main { min-width: 0; }
.admin-h1 { font-size: 1.5rem; color: var(--accent); margin-bottom: 1rem; }

.admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 0.9rem; margin-bottom: 1.4rem; }
.admin-card.act { display: flex; flex-direction: column; gap: 0.1rem; padding: 1rem 1.1rem; border-radius: 10px; background: linear-gradient(180deg, rgba(224,90,90,0.10), var(--bg-card)); border: 1px solid #6e3038; color: var(--text); transition: transform 0.12s, box-shadow 0.15s; }
.admin-card.act:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -10px rgba(0,0,0,0.6); text-decoration: none; }
.ac-num { font-size: 1.8rem; font-family: var(--font-display); color: #f0b8b8; line-height: 1.1; }
.ac-lbl { color: var(--text-dim); font-size: 0.85rem; }
.ac-go { color: var(--accent); font-size: 0.8rem; margin-top: 0.35rem; }
.admin-allclear { color: #9fd8ae; background: rgba(90,186,71,0.08); border: 1px solid #2f5e3d; border-radius: 8px; padding: 0.7rem 1rem; margin-bottom: 1.4rem; }

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 0.8rem; margin-bottom: 1.4rem; }
.astat { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem 0.6rem; text-align: center; }
.astat-num { display: block; font-size: 1.5rem; font-family: var(--font-display); color: var(--accent); }
.astat-num.astat-online { color: var(--online); }
.astat-num.astat-danger { color: var(--danger); }
.astat-lbl { color: var(--text-dim); font-size: 0.76rem; }

.admin-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.online-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.online-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.55rem 0.15rem 0.15rem; border: 1px solid var(--border-lt); border-radius: 20px; color: var(--text); font-size: 0.85rem; }
.online-chip:hover { border-color: var(--accent-dim); text-decoration: none; }
.admin-quicklinks { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.row-banned { opacity: 0.72; }
.row-banned .admin-user-name { text-decoration: line-through; }

@media (max-width: 760px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-side { position: static; }
    .admin-nav { flex-direction: row; flex-wrap: wrap; }
    .admin-nav a { flex: 1 1 auto; justify-content: center; }
    .admin-two { grid-template-columns: 1fr; }
}

/* ===== Модерация: фильтры, меню действий, пагинация ===== */
.mod-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.mod-filters input[type="search"] { min-width: 220px; flex: 1 1 220px; max-width: 320px; }
.mod-filters select, .mod-filters input { padding: 0.4rem 0.55rem; }
.mod-date { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text-dim); font-size: 0.85rem; }
.mod-date input[type="date"] { color-scheme: dark; }

.row-menu-wrap { position: relative; display: inline-block; }
.row-menu-btn { white-space: nowrap; }
.row-menu {
    position: fixed; z-index: 60; min-width: 190px;
    background: var(--bg-card); border: 1px solid var(--border-lt);
    border-radius: 8px; box-shadow: 0 14px 34px -8px rgba(0,0,0,0.75);
    padding: 0.3rem; display: flex; flex-direction: column; gap: 0.08rem;
}
.row-menu form { margin: 0; }
.row-menu a, .row-menu button {
    display: block; width: 100%; text-align: left;
    padding: 0.42rem 0.6rem; border-radius: 6px; font-size: 0.88rem;
    background: none; border: none; color: var(--text); cursor: pointer; font-family: inherit;
}
.row-menu a:hover, .row-menu button:hover { background: rgba(224,183,104,0.12); color: var(--accent); text-decoration: none; }
.row-menu button.danger { color: var(--danger); }
.row-menu button.danger:hover { background: rgba(224,90,90,0.14); color: #f0b8b8; }
.row-menu-sep { height: 1px; background: var(--border); margin: 0.22rem 0.2rem; }

.pager { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 1rem; }
.pager-btn { min-width: 30px; text-align: center; padding: 0.32rem 0.5rem; border: 1px solid var(--border-lt); border-radius: 6px; color: var(--text-dim); font-size: 0.85rem; }
.pager-btn:hover { border-color: var(--accent-dim); color: var(--text); text-decoration: none; }
.pager-btn.on { background: rgba(224,183,104,0.16); border-color: var(--accent); color: var(--accent); }

/* ===== Управление обложками ===== */
.cover-upload { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin: 0.8rem 0 1.3rem; }
.cover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.9rem; }
.cover-tile { background: var(--bg-card); border: 1px solid var(--border-lt); border-radius: 8px; overflow: hidden; }
.cover-tile-pic { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background-color: #14100b; }
.cover-tile-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-tile-acts { display: inline-flex; align-items: center; gap: 0.6rem; }
.link-accent { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; font-size: 0.82rem; padding: 0; }
.link-accent:hover { color: var(--accent-bright); text-decoration: underline; }

/* редактор кадрирования обложки */
.ce-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
    background: rgba(6,4,3,0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding: 1rem; }
.ce-box { width: 100%; max-width: 500px; background: var(--bg-card); border: 1px solid var(--border-lt);
    border-radius: 12px; padding: 1rem; box-shadow: 0 20px 60px -12px rgba(0,0,0,0.8); }
.ce-title { font-family: var(--font-display); color: var(--accent); margin-bottom: 0.7rem; }
.ce-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
    border: 1px solid var(--accent-dim); border-radius: 8px; background: #14100b; cursor: grab; }
.ce-stage:active { cursor: grabbing; }
.ce-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.ce-controls { margin: 0.8rem 0 0.4rem; }
.ce-zoom-row { display: flex; align-items: center; gap: 0.7rem; color: var(--text-dim); font-size: 0.9rem; }
.ce-zoom-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.ce-actions { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.cover-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0.6rem; }
.cover-tile-name { font-size: 0.85rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Поиск ===== */
.header-search { margin-left: auto; display: flex; align-items: center; gap: 0.4rem;
    padding: 0.32rem 0.65rem; background: rgba(0,0,0,0.25); border: 1px solid var(--border-lt);
    border-radius: 20px; color: var(--text-dim); }
.header-search:focus-within { border-color: var(--accent-dim); color: var(--accent); }
.header-search input { background: none; border: none; outline: none; color: var(--text); font-size: 0.88rem; width: 150px; }
.header-search input::placeholder { color: var(--text-dim); }
@media (max-width: 680px) { .header-search { display: none; } }

.search-h1 { font-size: 1.5rem; color: var(--accent); margin-bottom: 0.9rem; }
.search-panel { background: var(--bg-card); border: 1px solid var(--border-lt); border-radius: 10px; padding: 0.9rem; margin-bottom: 1.2rem; }
.search-main { width: 100%; font-size: 1rem; padding: 0.6rem 0.8rem; }
.search-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; align-items: center; }
.search-filters select, .search-filters input { padding: 0.4rem 0.5rem; }
.search-count { color: var(--text-dim); margin-bottom: 0.9rem; }
.search-hit { display: block; background: var(--bg-card); border: 1px solid var(--border-lt);
    border-radius: 8px; padding: 0.7rem 0.9rem; margin-bottom: 0.6rem; color: var(--text); }
.search-hit:hover { border-color: var(--accent-dim); text-decoration: none; background: #1c160e; }
.search-hit-head { display: flex; align-items: baseline; gap: 0.5rem; }
.hit-kind { flex-shrink: 0; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.1rem 0.4rem; border-radius: 4px; font-family: var(--font-display); }
.hit-topic { background: rgba(224,183,104,0.16); color: var(--accent); border: 1px solid var(--accent-dim); }
.hit-reply { background: rgba(255,255,255,0.05); color: var(--text-dim); border: 1px solid var(--border); }
.hit-title { font-family: var(--font-display); font-size: 1.02rem; color: var(--accent); overflow-wrap: anywhere; }
.search-hit-snip { color: var(--text-dim); font-size: 0.88rem; line-height: 1.5; margin: 0.3rem 0; overflow-wrap: anywhere; }
.search-hit-meta { font-size: 0.78rem; color: var(--text-dim); display: flex; gap: 0.4rem; flex-wrap: wrap; }
.hit-cat { color: var(--accent-dim); }
.search-tip { color: var(--text-dim); background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 0.9rem 1rem; }
mark { background: rgba(224,183,104,0.32); color: var(--accent-bright); border-radius: 2px; padding: 0 1px; }

/* ===== Предпросмотр статьи ===== */
.preview-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center;
    overflow-y: auto; padding: 3vh 1rem; background: rgba(6,4,3,0.78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.preview-box { width: 100%; max-width: 760px; background: var(--bg-card); border: 1px solid var(--border-lt);
    border-radius: 12px; padding: 1.4rem 1.6rem 1.8rem; box-shadow: 0 24px 70px -14px rgba(0,0,0,0.85); }
.preview-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem;
    padding-bottom: 0.7rem; border-bottom: 1px solid var(--border); }
.preview-tag { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em;
    font-size: 0.72rem; color: var(--accent); }
.preview-close { background: none; border: none; color: var(--text-dim); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.preview-close:hover { color: var(--accent); }
.preview-title { font-family: var(--font-display); color: var(--accent); font-size: 1.5rem; margin-bottom: 0.8rem; }
.preview-box .post-message { font-size: 0.95rem; }

/* Создание клан-пака в админке */
.cp-admin-create { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.cp-admin-create input[type="text"] { flex: 1 1 180px; min-width: 150px; }