:root{
    --brand-500:#0078BA; /* r0 g120 b186 */
    --brand-600:#005F9C; /* r0 g95 b156 */
    --gray-50:#fafafa;
    --gray-150:#f2f4f6;
    --gray-200:#e6e9ec;
    --gray-300:#d6dbe0;
    --gray-400:#b9c0c6;
    --text:#5c5c5c;
    --muted:#6b7280;
    --radius:14px;
    --shadow:0 6px 18px rgba(0,0,0,.06);
  }

  .page-title{
    display:flex;align-items:center;gap:10px;margin:0 0 12px 0;
  }

  /* Категории (верхний уровень) */
  .cat-list{ max-width:980px; margin:0 auto; }
  .cat-card{
    border:1px solid var(--gray-200);
    border-radius:var(--radius);
    background:#fff;
    box-shadow:var(--shadow);
    margin-bottom:12px;
    overflow:hidden;
  }

  .cat-header{
    position:relative;
    display:flex; align-items:center; gap:12px;
    padding:12px 14px;
    cursor:pointer;
    user-select:none;
    border-bottom:1px solid transparent;
    transition:background .12s ease, border-color .12s ease, box-shadow .12s ease;
  }

  /* === Без рамок и скруглений у превью === */
  .thumb{
    width:100px;height:100px;flex:0 0 100px;
    border:0; border-radius:0;
    background:transparent;
    display:flex;align-items:center;justify-content:center;
  }
  .thumb img{ width:100%;height:100%;object-fit:contain; }

  .cat-title{color:var(--text); font-weight:800; font-size:18px; line-height:1.2; }
  .grow{ flex:1 1 auto; min-width:0; }
  .arrow{ margin-left:auto; transition:transform .15s ease; opacity:.7; }
  .cat-card.open .arrow{ transform:rotate(90deg); }

  /* Подсветка открытой главной категории */
  .cat-card.open .cat-header{
    background:linear-gradient(180deg, #fff, var(--gray-150));
    border-bottom-color:var(--gray-200);
    box-shadow:inset 0 -1px 0 rgba(0,0,0,.04);
    position: sticky; /* держим шапку раздела на виду, когда прокручиваем его подкатегории */
    top: 0;
    z-index: 5;
  }
  .cat-card.open .cat-header::before{
    content:"";
    position:absolute; left:0; top:0; bottom:0; width:6px;
    background:var(--brand-500);
  }
  .cat-card.open .cat-title{ color:var(--brand-600); }

  /* Подкатегории (строчками) */
  .subcat-list{
    display:none;
    background:#fff;
    padding:8px 8px 12px;
  }
  .cat-card.open .subcat-list{ display:block; }

  .subrows{
    display:flex; flex-direction:column; gap:8px;
    padding-top:8px;
  }
  .subrow{
    display:flex; align-items:center; gap:12px;
    padding:10px 12px;
    border:1px solid var(--gray-200);
    border-radius:12px;
    text-decoration:none;
    color:var(--text);
    background:#fff;
    transition:background .12s ease, border-color .12s ease, transform .06s ease, box-shadow .12s ease;
  }
  .subrow:hover{
    background:var(--gray-50);
    border-color:var(--gray-400);
    transform:translateY(-1px);
    box-shadow:0 8px 22px rgba(0,0,0,.06);
  }

  /* === Без рамок и скруглений у превью подкатегории === */
  .subthumb{
    width:48px;height:48px;flex:0 0 48px;
    border:0; border-radius:0;
    background:transparent;
    display:flex; align-items:center; justify-content:center;
  }
  .subthumb img{ width:100%; height:100%; object-fit:contain; }

  .subtitle{ font-weight:700; line-height:1.2; }
  .subarrow{ margin-left:auto; opacity:.65; }

  /* Кнопка "Открыть раздел" */
  .open-section{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 12px; margin:12px 0 0 0;
    border:1px solid var(--brand-500); border-radius:999px; text-decoration:none;
    color:var(--brand-600); font-weight:700; background:#fff;
  }

  .empty{ padding:12px; color:var(--muted); }

  /* Убрать подчеркивание вообще в пределах .cat-list (и на hover/focus) */
  .cat-list a,
  .cat-list a:hover,
  .cat-list a:focus,
  .cat-list a:active{
    text-decoration:none !important;
  }

  /* Фокус-стили для доступности */
  .cat-header:focus-visible,
  .subrow:focus-visible,
  .open-section:focus-visible{
    outline:2px solid var(--brand-500);
    outline-offset:2px;
  }

  @media (max-width: 576px){
    .thumb{ width:44px;height:44px; }
    .subthumb{ width:44px;height:44px; }
  }