/* ============================================================
   color-scheme — управляет системными цветами нативных элементов
   (select, option, checkbox, radio, scrollbar, датапикеры)
   ============================================================ */
html { color-scheme: dark; }
html[data-theme='dark']  { color-scheme: dark; }
html[data-theme='light'] { color-scheme: light; }
:root{
  --accent:#3394E6;--accent-hover:#2A7BC7;
  --accent-10:rgba(51,148,230,.10);--accent-20:rgba(51,148,230,.20);--accent-30:rgba(51,148,230,.30);
  --page:#030712;--panel:#101828;--panel-soft:rgba(16,24,40,.6);--panel-deep:rgba(26,34,50,.5);
  --border:#1d2939;--border-strong:#2f3b4d;
  --text:#f3f4f6;--text-dim:#99a1af;--text-mute:#6a7282;
  --font-sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --r-sm:8px;--r:12px;--r-lg:16px;--sidebar-w:320px;
  --shadow:0 18px 40px -24px rgba(0,0,0,.85);
}
html[data-theme='light']{
  --page:#f9fafb;--panel:#fff;--panel-soft:#fff;--panel-deep:#f3f4f6;
  --border:#e5e7eb;--border-strong:#d1d5dc;
  --text:#101828;--text-dim:#4a5565;--text-mute:#6a7282;
  --shadow:0 10px 24px -18px rgba(16,24,40,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--text);font-family:var(--font-sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;transition:background-color .3s,color .3s}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.25;font-weight:700}
svg{width:20px;height:20px;flex:none}
.layout{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);height:100vh;position:sticky;top:0;overflow:hidden;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column}
.brand{flex:0 0 auto;padding:20px;border-bottom:1px solid var(--border)}
/* Логотип вынесен влево абсолютно, у текста симметричные отступы — поэтому он
   центрируется по всей ширине меню, а не по остатку справа от логотипа.
   Цвет названия — акцентный, как у знака LFF в нижнем блоке меню. */
.brand-btn{position:relative;display:block;padding:0 45px;text-align:center;color:var(--text);text-decoration:none}
.brand-btn:link,.brand-btn:visited,.brand-btn:hover,.brand-btn:focus,.brand-btn:active{color:var(--text);text-decoration:none}
/* Ширина текстовой колонки: 320 (меню) − 2×20 (.brand) − 2×45 (padding) = 190px.
   Логотип 44px стоит слева в тех же 45px, поэтому под текст не заходит. */
.brand-logo{position:absolute;left:0;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;color:var(--accent);transition:opacity .2s}
.brand-btn:hover .brand-logo{opacity:.82}
.brand-logo svg{width:44px;height:44px;display:block}
.brand-text{display:block;min-width:0}
/* Название переносится, а не обрезается многоточием: длинное имя («…сообщество
   пользователей Linux») раньше теряло хвост вместе со словом Linux. */
.brand-title{display:block;font-size:17px;font-weight:700;line-height:1.2;color:var(--accent);overflow-wrap:anywhere;hyphens:auto}
.brand-sub{display:block;margin-top:2px;font-size:12px;line-height:1.3;color:var(--text-dim);overflow-wrap:anywhere}
.side-tools{flex:0 0 auto;padding:16px;border-bottom:1px solid var(--border)}
.search{position:relative}
.search>svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--text-mute)}
.search input{width:100%;padding:10px 12px 10px 38px;background:var(--panel-deep);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font:inherit;font-size:14px;outline:none}
.search input:focus{border-color:var(--accent-30);background:var(--accent-10)}
.side-nav{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 16px;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.nav-label{padding:16px 4px 8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute)}
.nav-item{display:block;padding:10px 16px;border-radius:var(--r-sm);color:var(--text-dim);font-size:14px}
.nav-item:hover{background:var(--panel-deep);color:var(--text);text-decoration:none}
.side-user{flex:0 0 auto;margin:8px 16px 0;padding:12px;border-radius:var(--r-sm);background:var(--panel-deep);display:flex;flex-direction:column;gap:8px}
.side-user-name{font-weight:600;text-align:center;font-size:15px}
.side-user-group{font-size:12px;text-align:center;color:var(--text-mute)}
.side-footer{flex:0 0 auto;margin:12px 16px 16px;padding:16px;border-radius:var(--r-sm);background:var(--panel-deep);text-align:center}
.side-footer>p{margin:0 0 12px;font-size:12px;color:var(--text-dim)}
.side-footer a{display:flex;flex-direction:column;align-items:center;gap:8px;color:inherit}
.side-footer a:hover{opacity:.8;text-decoration:none}
.lff-logo{color:var(--accent);width:48px;height:48px}
.lff-name{font-size:14px;font-weight:600;color:var(--accent)}
.lff-sub{font-size:12px;color:var(--text-dim)}
.main{flex:1 1 auto;min-width:0;position:relative}
.main::before{content:'';position:absolute;top:0;right:0;width:384px;height:384px;border-radius:50%;background:var(--accent-10);filter:blur(64px);pointer-events:none}
.wrap{max-width:900px;margin:0 auto;padding:56px 40px 96px;position:relative}
.topbar{display:none;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--panel);position:sticky;top:0;z-index:40}
.topbar .brand-title{font-size:15px;flex:1;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-brand{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;color:var(--accent);text-decoration:none}
.topbar-brand:link,.topbar-brand:visited,.topbar-brand:hover,.topbar-brand:focus,.topbar-brand:active{color:var(--accent);text-decoration:none}
.topbar-brand:hover{opacity:.82}
.topbar-brand svg{width:34px;height:34px;display:block}
/* Пустышка справа: без неё центрированный заголовок смещался бы влево. */
.topbar-spacer{flex:0 0 40px;width:40px}
.menu-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer}
.theme-toggle{position:fixed;top:16px;right:16px;z-index:50;width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r-sm);border:1px solid var(--accent-30);background:var(--accent-10);color:var(--accent);cursor:pointer;box-shadow:var(--shadow)}
.theme-toggle:hover{background:var(--accent-20)}
.theme-toggle svg{width:20px;height:20px}
.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:45}
.scrim.show{display:block}
.to-top{position:fixed;right:22px;bottom:22px;z-index:30;width:42px;height:42px;border-radius:50%;display:none;place-items:center;border:1px solid var(--border-strong);background:var(--panel);color:var(--text-dim);cursor:pointer;box-shadow:var(--shadow)}
.to-top.show{display:grid}
.to-top:hover{color:var(--accent);border-color:var(--accent-30)}
.hero{margin-bottom:48px}
.badges{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.badge{padding:4px 12px;border-radius:999px;font-size:12px;font-weight:500}
.badge-accent{background:var(--accent);color:#fff}
.badge-plain{background:var(--panel-deep);color:var(--text-dim);border:1px solid var(--border)}
.hero h1{font-size:clamp(28px,5vw,48px);margin:0 0 16px;letter-spacing:-.02em}
.hero .lead{font-size:18px;color:var(--text-dim);margin:0 0 24px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--panel-deep);color:var(--text);font:inherit;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;transition:background-color .2s,border-color .2s,color .2s}
.btn:hover{background:var(--accent-10);border-color:var(--accent-30);text-decoration:none}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 10px 24px -14px var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.flash-stack{margin-bottom:24px;display:flex;flex-direction:column;gap:10px}
.flash{padding:12px 16px;border-radius:var(--r-sm);font-size:14px;border:1px solid}
.flash.ok{background:rgba(5,223,114,.08);border-color:rgba(5,223,114,.35);color:#05df72}
.flash.err{background:rgba(255,100,103,.08);border-color:rgba(255,100,103,.35);color:#ff6467}
.flash.info{background:var(--accent-10);border-color:var(--accent-30);color:var(--accent)}
html[data-theme='light'] .flash.ok{color:#016630}
html[data-theme='light'] .flash.err{color:#c10007}
.auth-form{max-width:560px;margin:0 auto}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:500;color:var(--text-dim);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:10px 12px;background:var(--panel-deep);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font:inherit;font-size:14px;outline:none;transition:border-color .2s,background-color .2s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent-30);background:var(--accent-10)}
.field-err{color:#ff6467;font-size:12px;margin-top:6px}
/* Кастомный выпадающий список в обычных формах (например «Задать вопрос»)
   должен занимать всю ширину поля, как и нативный select. */
.auth-form .custom-select,
.auth-form .field .custom-select {
    width: 100%; min-width: 0; max-width: 100%;
}
html[data-theme='light'] .field-err{color:#c10007}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.form-subhead{font-size:15px;margin:24px 0 12px;color:var(--text-dim)}
.form-subhead small{font-weight:400;color:var(--text-mute)}
.muted{color:var(--text-dim);font-size:14px;margin-top:16px}
.callout{display:flex;gap:10px;margin:0 0 16px;padding:16px;border-radius:var(--r-sm);border:1px solid;font-size:14px}
.callout.warning{background:rgba(120,53,15,.2);border-color:#92400e;color:#fde68a}
html[data-theme='light'] .callout.warning{background:#fffbeb;border-color:#fde68a;color:#92400e}
@media (max-width:1024px){
  .layout{display:block}
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:50;transform:translateX(-100%);transition:transform .3s;height:100dvh;box-shadow:0 0 60px rgba(0,0,0,.6)}
  .sidebar.open{transform:none}
  .topbar{display:flex}
  .wrap{padding:32px 20px 80px}
}
@media (max-width:640px){.grid-3{grid-template-columns:1fr}}

/* --- Форум: разделы, темы, сообщения --- */
.breadcrumb {
    display: flex; flex-wrap: wrap; gap: 6px;
    font-size: 13px; color: var(--text-mute); margin-bottom: 20px;
}
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--accent); }
.bc-sep { color: var(--border-strong); }
.bc-current { color: var(--text); }

.forum-sections { display: grid; gap: 16px; }
.forum-section { text-decoration: none; }

.topic-list { display: flex; flex-direction: column; gap: 8px; }
.topic-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: var(--r-sm);
    background: var(--panel-soft); border: 1px solid var(--border);
    color: var(--text); text-decoration: none;
    transition: border-color .2s, background-color .2s;
}
.topic-row:hover { border-color: var(--accent-30); background: var(--accent-10); text-decoration: none; }

.topic-main { flex: 1 1 auto; min-width: 0; }
.topic-title {
    font-weight: 600; font-size: 15px; color: var(--text);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.topic-flag {
    font-size: 11px; padding: 2px 8px; border-radius: 999px;
    background: var(--accent-10); border: 1px solid var(--accent-30);
    color: var(--accent); font-weight: 500;
}
.topic-lock { background: rgba(120,53,15,.2); border-color: #92400e; color: #fcd34d; }
.topic-meta { font-size: 12px; color: var(--text-mute); margin-top: 4px; }

.topic-stats { font-size: 12px; color: var(--text-dim); text-align: right; min-width: 70px; }
.topic-last { font-size: 12px; color: var(--text-dim); text-align: right; min-width: 130px; }

.avatar {
    width: 38px; height: 38px; flex: 0 0 38px;
    border-radius: 50%; background: var(--panel-deep);
    display: grid; place-items: center;
    font-size: 16px; font-weight: 700; text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--border-strong);
}
.avatar-lg { width: 56px; height: 56px; flex: 0 0 56px; font-size: 22px; }

/* Цвета аватаров по группам */
.avatar[data-group="admins"]     { color: #ff6467; border-color: rgba(255,100,103,.35); }
.avatar[data-group="moderators"] { color: #fcd34d; border-color: rgba(252,211,77,.35); }
.avatar[data-group="vip"]        { color: #c084fc; border-color: rgba(192,132,252,.35); }
.avatar[data-group="users"]      { color: #3394E6; border-color: rgba(51,148,230,.35); }
html[data-theme='light'] .avatar[data-group="admins"]     { color: #c10007; }
html[data-theme='light'] .avatar[data-group="moderators"] { color: #b45309; }
html[data-theme='light'] .avatar[data-group="vip"]        { color: #7e22ce; }
html[data-theme='light'] .avatar[data-group="users"]      { color: #2A7BC7; }

/* Сообщения */
.post-list { display: flex; flex-direction: column; gap: 16px; }
.post {
    display: grid; grid-template-columns: 140px 1fr; gap: 16px;
    background: var(--panel-soft); border: 1px solid var(--border);
    border-radius: var(--r); padding: 16px;
}
.post-author {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding-right: 16px; border-right: 1px solid var(--border);
    text-align: center;
}
.post-body { min-width: 0; }
.post-head {
    display: flex; justify-content: space-between;
    font-size: 12px; margin-bottom: 10px;
}
.post-num { text-decoration: none; }
.post-text { font-size: 15px; line-height: 1.65; color: var(--text); word-wrap: break-word; }

/* Пагинатор */
.pager-nav {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-top: 24px; padding-top: 16px;
    border-top: 1px solid var(--border);
}
.pager-info { font-size: 13px; color: var(--text-mute); }

@media (max-width: 640px) {
    .post { grid-template-columns: 1fr; gap: 10px; }
    .post-author { flex-direction: row; border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 10px; }
    .avatar-lg { width: 36px; height: 36px; flex: 0 0 36px; font-size: 15px; }
    .topic-stats { display: none; }
    .topic-last { min-width: 80px; }
}
/* Подпись под аватаром в сообщении (users.location) */
.post-author-sign {
    font-size: 12px; line-height: 1.35; color: var(--text-mute);
    text-align: center; margin-top: 4px; overflow-wrap: anywhere;
}

/* --- Аватары: картинка вместо буквы, кнопки профиля в одну строку --- */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-sm { width: 32px; height: 32px; flex: 0 0 32px; font-size: 14px; margin: 0 auto; }
/* Блок пользователя: все кнопки одинаковой ширины, высоты и отступов —
   пара «Профиль/Настройки» занимает ровно ту же площадь, что «Выйти». */
.side-user form { width: 100%; margin: 0; }
.side-user .btn { width: 100%; min-height: 40px; padding: 0 10px; justify-content: center; font-size: 13.5px; }
.side-user-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }

/* --- Модуль вопросов --- */
.questions-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; }
.questions-topics a {
    padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
    color: var(--text-dim); font-size: 13px; text-decoration: none; transition: all .2s;
}
.questions-topics a:hover { border-color: var(--accent-30); color: var(--text); text-decoration: none; }
.questions-topics a.active { background: var(--accent-10); border-color: var(--accent-30); color: var(--accent); }
.q-best {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 16px; margin: 16px 0; border-radius: var(--r-sm);
    border: 1px solid var(--accent-30); background: var(--accent-10); font-size: 14px;
}
.q-best-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; }
.q-best-badge svg { width: 16px; height: 16px; }
.q-answer-best { border-color: var(--accent-30); }
.q-best-inline { color: var(--accent); }
.q-comment .post-author { opacity: .9; }
.q-comment .post-text { font-size: 14.5px; }
/* Фильтр и сортировка в модуле вопросов.
   Каждое поле занимает половину строки, а выпадающий список — всю ширину поля,
   чтобы длинные названия тем были видны целиком. */
.questions-filter {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
    margin: 8px 0 24px; padding: 14px 16px;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel-soft);
}
.questions-filter .field { margin: 0; flex: 1 1 260px; min-width: 0; }
.questions-filter .field label { display: block; font-size: 12px; color: var(--text-mute); margin-bottom: 6px; }
.questions-filter .custom-select,
.questions-filter .field > select { width: 100%; min-width: 0; max-width: 100%; }
.questions-filter-actions { display: flex; gap: 8px; flex: 0 0 auto; align-items: center; }
.questions-filter .btn { min-height: 38px; }

@media (max-width: 640px) {
    .questions-filter .field { flex: 1 1 100%; }
    .questions-filter-actions { flex: 1 1 100%; }
}

/* Счётчик посещений под футером: по центру, без лишних отступов */
.site-counter {
    display: flex; justify-content: center; align-items: center;
    padding: 18px 0 8px;
    line-height: 0;
}
.site-counter img { display: block; }

/* Иконки выносок (! note / ! tip / ! warn / ! danger).
   Внутри сообщений inline svg удаляется санитайзером, поэтому иконка
   рисуется маской: так она есть и в новых, и в старых сообщениях. */
.callout::before {
    content: ''; flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px;
    background-color: var(--accent);
    -webkit-mask: var(--callout-icon) center / 20px 20px no-repeat;
    mask: var(--callout-icon) center / 20px 20px no-repeat;
    --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}
.callout.info::before { --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); background-color: var(--accent); }
.callout.tip::before { --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); background-color: #93c5fd; }
.callout.warning::before { --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); background-color: #fcd34d; }
.callout.danger::before { --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E"); background-color: #ff6467; }

/* Заголовок с иконкой RSS справа: иконка по центру строки заголовка */
.chapter-head .head-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.chapter-head .head-row h1 { margin: 0; min-width: 0; }
.feed-link {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--r-sm);
    border: 1px solid var(--border-strong); background: var(--panel-deep);
    color: var(--accent); text-decoration: none;
    transition: background-color .2s, border-color .2s, color .2s;
}
.feed-link:hover {
    background: var(--accent-10); border-color: var(--accent-30);
    color: var(--accent-hover); text-decoration: none;
}
.feed-link svg { width: 18px; height: 18px; }

/* --- Модуль «Обзор дистрибутивов» --- */
.distro-list { display: flex; flex-direction: column; gap: 8px; }
.distro-row {
    display: flex; align-items: center; gap: 16px; padding: 14px 16px;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--panel-soft); color: var(--text); text-decoration: none;
    transition: border-color .2s, background-color .2s;
}
.distro-row:hover { border-color: var(--accent-30); background: var(--accent-10); text-decoration: none; }
.distro-logo {
    flex: 0 0 56px; width: 56px; height: 56px; display: grid; place-items: center;
    border-radius: var(--r-sm); border: 1px solid var(--border);
    background: var(--panel-deep); overflow: hidden; color: var(--text-mute);
}
.distro-logo img { max-width: 100%; max-height: 100%; display: block; object-fit: contain; }
.distro-logo svg { width: 22px; height: 22px; }
.distro-main { flex: 1 1 auto; min-width: 0; display: block; }
.distro-name { display: block; font-weight: 600; font-size: 16px; color: var(--text); }
.distro-release { display: block; margin-top: 2px; font-size: 13.5px; color: var(--text-dim); }
.distro-meta { display: block; margin-top: 4px; font-size: 12px; color: var(--text-mute); }
.distro-head-row { display: flex; align-items: center; gap: 16px; }
.distro-head-logo {
    flex: 0 0 72px; width: 72px; height: 72px; display: grid; place-items: center;
    border-radius: var(--r-sm); border: 1px solid var(--border);
    background: var(--panel-deep); overflow: hidden;
}
.distro-head-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.distro-links, .distro-attrs { display: grid; gap: 10px; margin: 16px 0; }
.distro-link-row, .distro-attr-row { display: flex; gap: 10px; flex-wrap: wrap; font-size: 14px; align-items: baseline; }
.distro-link-label { color: var(--text-mute); min-width: 220px; }
.distro-link-values { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* Логотип в строке списка: тот же размер и рамка, что у аватара,
   поэтому блоки на главной выглядят одинаково. */
.topic-logo {
    width: 38px; height: 38px; flex: 0 0 38px;
    display: grid; place-items: center; overflow: hidden;
    border-radius: var(--r-sm); border: 1px solid var(--border);
    background: var(--panel-deep); color: var(--text-mute);
}
.topic-logo img { max-width: 100%; max-height: 100%; display: block; object-fit: contain; }
.topic-logo svg { width: 18px; height: 18px; }

/* --- Объявления: цветовая метка типа --- */
.ann-icon {
    width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center;
    border-radius: var(--r-sm); border: 1px solid var(--border);
    background: var(--panel-deep); color: var(--text-dim);
}
.ann-icon svg { width: 18px; height: 18px; }
.ann-type {
    font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 500;
    border: 1px solid var(--border-strong); background: var(--panel-deep); color: var(--text-dim);
}
.ann-chip { display: inline-flex; align-items: center; gap: 6px; }
.ann-chip svg { width: 14px; height: 14px; }
.ann-icon[data-type="ad"], .ann-type[data-type="ad"], .ann-chip[data-type="ad"] {
    color: #fcd34d; border-color: rgba(252,211,77,.45); background: rgba(252,211,77,.10);
}
.ann-icon[data-type="rules"], .ann-type[data-type="rules"], .ann-chip[data-type="rules"] {
    color: #93c5fd; border-color: rgba(147,197,253,.45); background: rgba(147,197,253,.10);
}
.ann-icon[data-type="updates"], .ann-type[data-type="updates"], .ann-chip[data-type="updates"] {
    color: #86efac; border-color: rgba(134,239,172,.45); background: rgba(134,239,172,.10);
}
.ann-icon[data-type="maintenance"], .ann-type[data-type="maintenance"], .ann-chip[data-type="maintenance"] {
    color: #fdba74; border-color: rgba(253,186,116,.45); background: rgba(253,186,116,.10);
}
.ann-icon[data-type="notice"], .ann-type[data-type="notice"], .ann-chip[data-type="notice"] {
    color: #c084fc; border-color: rgba(192,132,252,.45); background: rgba(192,132,252,.10);
}
.ann-types { display: flex; flex-wrap: wrap; gap: 8px; }
.ann-type-choice {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel-soft);
    font-size: 13px; color: var(--text-dim);
}
.ann-type-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ann-type-choice.active { border-color: var(--accent-30); background: var(--accent-10); color: var(--text); }
.ann-type-icon { display: inline-flex; }
.ann-type-icon svg { width: 16px; height: 16px; }

/* Строка объявления на главной: оформление как у остальных блоков,
   но с лёгкой подсветкой, чтобы блок выделялся. */
.ann-row {
    background: linear-gradient(90deg, rgba(51,148,230,.10), rgba(51,148,230,.03));
    border-color: var(--accent-30);
}
.ann-row:hover { background: linear-gradient(90deg, rgba(51,148,230,.16), rgba(51,148,230,.06)); }
html[data-theme='light'] .ann-row {
    background: linear-gradient(90deg, rgba(51,148,230,.12), rgba(51,148,230,.04));
}
.ann-row .topic-meta { color: var(--text-dim); }

/* Подпись перед группой ссылок в шапке: «Сортировка:» и подобные */
.chips-label { color: var(--text-mute); font-size: 13px; }
.chips-label + .chip, .chip + .chips-label { margin-left: 4px; }

/* --- Чипы: плашки в шапках страниц и кнопки модулей --- */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--panel-deep);
    color: var(--text-dim); font-size: 13px; line-height: 1.25;
    text-decoration: none; white-space: nowrap;
    transition: border-color .2s, background-color .2s, color .2s;
}
a.chip:hover, .chip-link:hover {
    background: var(--accent-10); border-color: var(--accent-30); color: var(--text);
    text-decoration: none;
}
.chip-accent {
    border-color: var(--accent-30); background: var(--accent-10); color: var(--accent);
}
a.chip-accent:hover {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.chip svg { width: 14px; height: 14px; flex: 0 0 14px; }
.chip-muted { color: var(--text-mute); }

/* Плашки в шапке страницы: между строками 8 пикселей, до содержимого — 16.
   Раньше отступ давал только межстрочный интервал, поэтому после того как
   плашки стали кнопками, вторая строка (например «Тип») прилипала к списку. */
.chapter-head .chips { margin-bottom: 8px; }
.chapter-head .chips:last-child { margin-bottom: 16px; }

/* --- Выбор иконки: группы «Общие», «Российские», «Популярные», «Свои» --- */
.icon-group-title {
    font-size: 13px; font-weight: 600; color: var(--text-mute);
    margin: 18px 0 8px;
}
.icon-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.icon-pick {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 8px 12px; border-radius: var(--r-sm);
    border: 1px solid var(--border); background: var(--panel-soft);
    color: var(--text-dim); font-size: 13px;
    transition: border-color .2s, background-color .2s, color .2s;
}
.icon-pick:hover { border-color: var(--accent-30); color: var(--text); }
.icon-pick input { position: absolute; opacity: 0; pointer-events: none; }
.icon-pick.selected { border-color: var(--accent-30); background: var(--accent-10); color: var(--text); }
.icon-pick svg { width: 20px; height: 20px; flex: 0 0 20px; }