/* Блок живого инструмента в статье базы — AVE Design Studio (04.11.2026) */
.ar-live { margin: 6px 0 34px; padding: 22px 22px 16px; border: 1px solid #e3e5ea; border-radius: 18px; background: #fafbfc; box-shadow: 0 14px 34px rgba(23, 24, 29, .06); }
.ar-live__h { margin-top: 0 !important; }
.ar-live__note { margin: 12px 0 0; color: #6f7380; font-size: 13.5px; line-height: 1.5; }
@media (max-width: 767px) { .ar-live { padding: 16px 12px 12px; margin-left: -4px; margin-right: -4px; } }

/* ---------- витрина /tools/ ---------- */
.tl-sec { padding-top: 40px; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.tl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid #e3e5ea; border-radius: 999px; background: #fff; color: #17181d; font: 600 14px/1.2 'Open Sans', Arial, sans-serif; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.tl-chip span { color: #6f7380; font-weight: 700; }
.tl-chip:hover { border-color: rgba(200, 0, 0, .4); }
.tl-chip.is-on { border-color: #17181d; background: #17181d; color: #fff; }
.tl-chip.is-on span { color: rgba(255, 255, 255, .7); }
.tl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.tl-card { margin: 0; padding: 0; }
.tl-card::before { content: none; }
.tl-card[hidden] { display: none; }
.tl-card > a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid #e3e5ea; border-radius: 16px; background: #fff; color: #3b3e47; text-decoration: none; transition: transform .25s cubic-bezier(.23, 1, .32, 1), box-shadow .25s, border-color .2s; }
.tl-card > a:hover { transform: translateY(-3px); border-color: rgba(200, 0, 0, .3); box-shadow: 0 18px 40px rgba(23, 24, 29, .1); color: #3b3e47; text-decoration: none; }
.tl-card__img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #f5f6f8; }
.tl-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.23, 1, .32, 1); }
.tl-card > a:hover .tl-card__img img { transform: scale(1.04); }
.tl-card__b { position: absolute; top: 12px; left: 12px; padding: 4px 9px; border-radius: 999px; background: #17181d; color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
.tl-card__b + .tl-card__b { left: auto; right: 12px; }
.tl-card__b--new { background: #c80000; }
.tl-card__b--live { background: #1a7f43; }
.tl-card__b--ext { background: rgba(23, 24, 29, .82); }
.tl-card__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.tl-card__k { color: #c80000; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tl-card__t { color: #17181d; font-size: 18px; font-weight: 800; line-height: 1.3; }
.tl-card__d { font-size: 14.5px; line-height: 1.55; }
.tl-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tl-card__tags span { padding: 3px 9px; border-radius: 999px; background: #f5f6f8; color: #6f7380; font-size: 12px; font-weight: 600; }
.tl-card__go { margin-top: auto; padding-top: 10px; color: #c80000; font-size: 14px; font-weight: 800; }
@media (max-width: 991px) { .tl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .tl-grid { grid-template-columns: 1fr; } .tl-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -15px; padding-bottom: 4px; } .tl-chip { flex: none; } }