:root{
  --brand-purple: #6c2bc5;
}

html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}
body {
    margin:0;
    padding:0;
    font-family:Arial,sans-serif;
    background:#fafafa;
    color:#333
}
:root {
  --mono: "Fira Code", "Consolas", "Courier New", monospace;
}
.changelog {
  margin-left: 20px;
  font-size: 14px;
  line-height: 1.4;
  font-family: var(--mono);
  white-space: pre-wrap;     /* сохраняет переносы строк из <br> и \n */
}
.checksum {
  font-family: var(--mono);
  font-size: 15px;
  font-variant-ligatures: none;
  overflow-wrap: anywhere;      /* чтобы длинные хэши переносились */
}
.checksum-info {
  font-family: var(--mono);
  font-size: 15px;
  font-variant-ligatures: none;
}
.container {
    display:flex;
    min-height:100vh /* Контейнер занимает всю высоту окна */
}
.sidebar {
    width: 200px;
    border-right: 1px solid #ccc; /* Разделительная линия */
    padding: 20px;
    background-color: #f9f9f9;
}
.logo {
    text-align: center; /* Центрируем логотип */
}
.logo img {
    margin-bottom: 20px;
    width: 150px;
    height: "auto";
}
details { margin: 20px 0; }
details summary {
    cursor: pointer;
    font-weight: bold;
    padding: 6px 10px;
    background: #eef;
    border-radius: 4px;
}
details[open] summary { background: #dde; }
.sidebar button {
  display: inline-block;
  width: auto;
  font-size: 1.1em;
  /* Уменьшаем отступы внутри */
  padding: 4px 8px;

  margin-top: 5px;
  border: none;
  background: #eee;
  cursor: pointer;
  border-radius: 4px;
}
.main {
  flex: 1;
  padding: 20px;
  margin: 0 0 0 20px;
}
.packages {
    margin-top: 20px;
}
.packages h2 {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    background-color: #eef; /* #eef color-mix(in srgb, var(--brand-purple) 10%, white) #e0e0e0;  */
    padding: 5px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}
.packages ul {
    list-style-type: circle; /* Кружочки в качестве маркеров */
    padding-left: 28px;
}
.packages li {
    font-size: 16px;
    margin-bottom: 5px;
}
h1 {
    font-size: 26px;
    color: #333;
    border-top: 2px solid #ddd;
    border-bottom: 2px solid #ddd;
    padding: 10px 0;       /* одинаковый отступ сверху и снизу внутри блока */
    margin: 20px 0;        /* внешний отступ (от других блоков) */
}
.info-table {width:100%; border-collapse:collapse; margin-bottom:20px }
.info-table th, .info-table td {
  padding: 8px 12px;
  border: none;
  text-align:left;
  vertical-align:middle;
}
.info-table th {width:180px; background:#f9f9f9; font-weight:normal; color:#555 }
.icon-muted {
  color: rgba(0, 0, 0, 0.7);
}
.icon-muted:hover {
  color: rgba(0, 0, 255, 1);
}
/* горизонтальная линия после каждой строки тела таблицы */
.info-table.rpm-list tbody tr + tr {
    border-top: 1px solid #e2e2e2;   /* тонкая, едва заметная */
}
/* подчёркивание шапки — чуть толще, чтобы отделить визуально */
.info-table thead th {
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid #c4c4c4;
}
.info-table td:not(:first-child),
.info-table th:not(:first-child) {
    border-left: 1px solid #f0f0f0;
}
/* зебра */
.info-table.rpm-list tbody tr:nth-child(odd):not(.arch-row) {
    background: #fcfcfc;
}
.arch-row th {
    text-align: left;
    font-size: 20px;
    font-weight: 800;
    color: #555;
    background: #e0e0e0;  /* #f7f7f7; */
    border-top: 1px solid #d5d5d5;   /* отделяем от предыдущей группы */
    border-bottom: 1px solid #d5d5d5;
}
.section-title {
  font-size: 20px;
  font-weight: bold;
  margin: 30px 0 10px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}
.pkg-id-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Чтобы длинный pkgId не выходил за границы */

}
.download-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: 8px;
  cursor: pointer;
}
.tag-badge {
    display:inline-block;
    background:#e0f7fa;
    color:#00796b;
    padding:4px 8px;
    margin:2px;
    border-radius:3px;
    font-size:12px;
    text-decoration:none
}
.rpm-list {
    width: 100%;
    vertical-align: middle;
    table-layout: fixed;
    list-style:none;
    padding-left:0
}
.rpm-list li {
    margin-bottom:4px;
}
.project-title {
    display: flex;            /* выравниваем содержимое по горизонтали */
    align-items: center;      /* вертикальное центрирование */
    gap: 8px;                 /* расстояние между текстом и иконкой */
    font-size: 26px;
    font-weight: 700;
    border-top:    2px solid #ddd;
    border-bottom: 2px solid #ddd;
    padding: 10px 0;
    margin: 20px 0;
}
.copy-btn {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 0;
    user-select: none;        /* чтобы не выделялась при двойном клике */
    display: flex;
}
.copy-btn:hover {
    color: #0077cc;
}
.alphabet-nav {
    text-align:left;
    margin: 0;
    font-size:16px;
    user-select:none;
    font-family: monospace;
    <!--- letter-spacing: 0.1px; ---!>
}
.alphabet-nav a {
    margin:0 3px;
    text-decoration:none;
    font-weight:700;
    color:#3a3aff;
}
.alphabet-nav a:hover {text-decoration:underline}
.alphabet-nav .disabled {
    color:#bbb;
    pointer-events:none;
    cursor:default;
    text-decoration:none;
}

.alphabet-bar .search-container input{
    padding:6px 28px 6px 8px;
    font-size:15px;
    border:1px solid #666;
    width:320px;
}

.search-scope{
  font-size:15px;
  padding:5px 6px;
  border:1px solid #666;
  width:100px;
}

/* отключение выделения при фокусе */
.search-scope:focus,
.alphabet-bar .search-container input:focus{
  outline: none;
}


.search-container input::-webkit-search-cancel-button {
    display: none;
}

/* Крестик */
.search-container .clear-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 20px;
  color: #999;
  cursor: pointer;
  display: none;
}

.search-container .clear-btn:hover {
  color: #666;
}

/* Крестик показываем, когда поле не пустое */
.search-container input:not(:placeholder-shown) + .clear-btn {
  display: block;
}
.search-results {
    position:absolute;
    right:0;
    margin-top:2px;
    background:#fff;
    border:1px solid #ccc;
    border-radius:4px;
    max-height:260px;
    width:100%;
    overflow:auto;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.search-results a {
    display:block;
    padding:6px 8px;
    text-decoration:none;
    color:#333;
    font-size:14px;
    white-space:nowrap;
}
.search-results a:hover {background:#eef}
.search-results a.active{
  background:#e5f0ff;
}
.alphabet-bar{
    display:flex;
    align-items:center;      /* вертикальное выравнивание */
    gap:16px;                /* промежуток между буквами и поиском */
    margin:10px 0 20px;
}
.alphabet-bar .letters{
    font-family:monospace;
}

.alphabet-bar .search-container{
    position:relative;
    margin-left:auto;
}

.anchor-link{visibility:hidden;text-decoration:none;margin-left:3px;position:relative; top:.3em }
.section-title:hover .anchor-link,.info-table th:hover .anchor-link{visibility:visible}
.anchor-icon.material-icons{ font-size 14px }
.anchor-link.copied .anchor-icon {
  color: var(--accent-color, #4caf50);
}
.anchor-icon{ line-height:1; display:inline-block }


.sidebar-box h3{
  font-size: 1.2rem;
  margin-bottom: .6rem;
  text-align: center;
}

.sidebar-box input[type=radio]{   /* прячем нативное кружочек */
    display:none;
}

.sidebar-box input[type=radio]:checked + span{
    background:#3b68ff;
    border-color:#3b68ff;
    color:#fff;
}

.sidebar-box .pill span{
    display:inline-block;
    padding:.25rem .9rem;
    border:1px solid #bbb;
    cursor:pointer;
    transition:all .15s ease;
    user-select:none;
}

.sidebar-box.side-menu label{
    display: flex;
    flex-direction:column;
    flex-wrap:wrap;
    gap:.5rem;
    margin:0 0 0.3rem 0;
    font-size: 16px;
}

.sidebar-box.side-menu{
  margin-top: 1.25rem;
  padding-left: 26px;
}

html{ scroll-behavior:smooth; }   /* плавная прокрутка */

.pill-toggle{ display:inline-flex; gap:.4rem; font-size:.9rem; }
.pill-toggle .pill a{
    display:inline-block; padding:.2rem .8rem;
    border:1px solid #bbb; text-decoration:none; color:inherit;
}
.pill-toggle .pill a.active,
.pill-toggle .pill a:hover{ background:#6c2bc5; color:#fff; border-color:#6c2bc5; }

.pill-toggle .pill a.active,
.pill-toggle .pill a:hover{
    background:#3b68ff;
    border-color:#3b68ff;
    color:#fff;
}

.project-head{
    display:flex;
    flex-wrap:nowrap;
    column-gap:5rem;
}
.project-info{
    min-width:18rem;
}
.project-screenshots{
    flex:1 1 50%;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:320px;
    position:relative;
}
.screenshots-wrapper{
    display:flex;
    overflow:hidden;
    scroll-snap-type:x mandatory;
    max-width:900px;
    width:100%
}
.screenshot-thumb{
    width:100%;
    height:auto;
    max-width:none;
    object-fit:contain;
    cursor:pointer;
    flex:0 0 100%;
}

.screenshot-modal{
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    display:none;
    justify-content:center;
    align-items:center;
    background-color:rgba(0,0,0,.85);
    z-index:9999;
}

.screenshot-modal.open{display:flex;}
.screenshot-modal img{
    max-width:90%;
    max-height:90%;
    border-radius:8px;
    box-shadow:0 0 10px rgba(0,0,0,.5);
}
.modal-close{
    position:absolute;
    top:1rem;right:1.5rem;
    font-size:3rem;
    color:#fff;
    cursor:pointer;
    user-select:none;
}

@media (min-width:1400px){
    .project-info{flex-basis:40%;}
    .project-screenshots{flex-basis:60%;}
    .screenshot-thumb{max-height:900px;}
}

@media (max-width: 1100px){        /* подберите порог под свой макет */
    .project-head{
        flex-wrap:wrap;            /* снова можно переносить */
        row-gap:2rem;              /* вертикальный отступ между рядами */
    }
}

.screen-nav{
    font-size:3.2rem;
    padding:.6rem 1.2rem;
    border-radius:.4rem;
}

@media (max-width: 640px){
    .screen-nav{
        font-size:4rem;
        padding:.8rem 1.4rem;
    }
}

.screen-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:3.2rem;
    padding:.6rem 1.2rem;
    border-radius:.4rem;
    background:rgba(0,0,0,.5);
    color:#fff;
    z-index:10;
}

.screen-nav.prev{ left:.4rem; }
.screen-nav.next{ right:.4rem; }

mark{
  background: #ffeb3b66;
  padding: 0 2px;
  border-radius: 2px;
}

.icon-btn {
  display: inline-flex;     /* даёт надёжное выравнивание */
  align-items: center;
  width: 28px;
  height: 28px;
  text-decoration: none;