/* ===== БЛОК КАТЕГОРИЙ: CSS, копируйте от сюда ===== */
/* Цвета сайта: меняйте здесь */
.cc{--ink:#27293d;--ac:#2563eb;--ac-d:#1d4ed8;--ac-bg:#EAF1FF;--ac-bg2:#F3F7FF;--line:#E3E8F0;--soft:#eef1f4;--muted:#5b6573}
.cc{background:linear-gradient(90deg,#2f72f0,#1f44b7) top/100% 3px no-repeat,#fff;border-radius:24px;padding:24px;font-family:'Onest',Arial,sans-serif;color:var(--ink);box-shadow:0 1px 2px rgba(39,41,61,.05),0 12px 32px -16px rgba(39,41,61,.18)}
.cc a{text-decoration:none;color:inherit}
.cc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cc-head b{font-size:18px;font-weight:700;letter-spacing:-.2px}
.cc-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:16px}
.cc-big{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:176px;padding:18px;border-radius:20px;border:1px solid rgba(20,24,31,.05);transition:transform .25s,box-shadow .25s}
.cc-big:hover{transform:translateY(-4px)}
.cc-big .bgic{position:absolute;right:-18px;bottom:-22px;opacity:.13;pointer-events:none}
.cc-big .bgic svg{width:150px;height:150px;stroke-width:1.2}
.cc-big .tp{position:relative;display:flex;justify-content:space-between;align-items:center}
.cc-big .ib{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center}
.cc-big .ib svg{width:22px;height:22px}
.cc-big .go{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateX(-6px);transition:all .25s}
.cc-big .go svg{width:16px;height:16px}
.cc-big:hover .go{opacity:1;transform:none}
.cc-big .bt{position:relative}
.cc-big .nm{display:block;font-size:17px;font-weight:700;line-height:1.25;margin-bottom:6px}
.cc-big .num{font-size:38px;font-weight:800;letter-spacing:-1.5px;line-height:1}
.cc-big .lb{font-size:14px;font-weight:500;margin-left:6px;opacity:.7}
.cc-1{background:linear-gradient(135deg,#CFE0FF,#EEF4FF);color:#123F94}
.cc-1:hover{box-shadow:0 18px 32px -14px rgba(37,99,235,.55)}
.cc-2{background:linear-gradient(135deg,#C6EAD5,#EAF8EF);color:#0B5A2C}
.cc-2:hover{box-shadow:0 18px 32px -14px rgba(1,138,66,.5)}
.cc-3{background:linear-gradient(135deg,#FFD6CC,#FFF0EC);color:#8F2410}
.cc-3:hover{box-shadow:0 18px 32px -14px rgba(223,49,18,.45)}
.cc-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cc-sm{display:inline-flex;align-items:center;gap:10px;padding:6px 8px 6px 6px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink);transition:all .2s}
.cc-sm .ci{width:30px;height:30px;border-radius:9px;background:var(--ac-bg);color:var(--ac-d);display:flex;align-items:center;justify-content:center;transition:all .2s}
.cc-sm .ci svg{width:16px;height:16px}
.cc-sm i{font-style:normal;font-size:12px;font-weight:700;color:var(--muted);background:var(--soft);border-radius:999px;padding:3px 9px}
.cc-sm:hover{border-color:var(--ac);transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(37,99,235,.55)}
.cc-sm:hover .ci{color:var(--ac)}
/* иконки-картинки: без цветной подложки и без заливки при наведении */
.cc-sm .ci:has(img){background:none;width:auto;height:auto}
.cc-sm .ci img{display:block;width:30px;height:30px;object-fit:contain;border-radius:9px}
/* раскрытие списка */
.cc-row:not(.open) .extra{display:none}
.cc-row .extra{animation:ccIn .3s ease both}
@keyframes ccIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cc-tg{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 18px;border-radius:14px;border:1.5px dashed var(--ac);background:var(--ac-bg2);color:var(--ac-d);font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s}
.cc-tg:hover{background:var(--ac);border-style:solid;border-color:var(--ac);color:#fff;transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(37,99,235,.6)}
.cc-tg:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.cc-tg svg{width:18px;height:18px;stroke-width:2.2;transition:transform .25s}
.cc-row.open .cc-tg svg{transform:rotate(180deg)}
@media (max-width:560px){.cc{padding:16px;border-radius:20px}.cc-big{min-height:140px}}
/* тёмная карточка #27293d: добавьте класс cc-4 к .cc-big вместо cc-1/2/3 */
.cc-4{background:linear-gradient(135deg,#27293d,#3b3f61);color:#fff;border-color:rgba(39,41,61,.4)}
.cc-4:hover{box-shadow:0 18px 32px -14px rgba(39,41,61,.7)}
.cc-4 .ib,.cc-4 .go{background:rgba(255,255,255,.14)}
.cc-4 .bgic{opacity:.12}

/* тёмная тема всего блока: <div class="cc cc-dark"> */
.cc-dark{background:linear-gradient(90deg,#2f72f0,#1f44b7) top/100% 3px no-repeat,#27293d;--ink:#fff;--ac:#5b8cff;--ac-d:#9db9ff;--ac-bg:rgba(91,140,255,.16);--ac-bg2:rgba(91,140,255,.1);--line:rgba(255,255,255,.12);--soft:rgba(255,255,255,.1);--muted:#c3c8d8;box-shadow:0 12px 32px -16px rgba(39,41,61,.6)}
.cc-dark .cc-sm{background:rgba(255,255,255,.05)}
.cc-dark .cc-sm:hover{background:rgba(91,140,255,.12)}
.cc-dark .cc-tg:hover{color:#fff}
.cc-dark .cc-4{background:linear-gradient(135deg,#3b3f61,#2f3250);border-color:rgba(255,255,255,.1)}
/* ===== до сюда ===== */