/* ===== Правки компонентов поверх макета ===== */

/* Круглые картинки в лентах ресурсов */
.resource-img{width:54px;height:54px;border-radius:50%;object-fit:cover;display:block;box-shadow:0 3px 10px #13294b16;transition:transform .15s}
.resource:hover .resource-img{transform:translateY(-3px)}
.channel-img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#edf2fb}

/* Полезные ресурсы: ширина по контенту, компактнее */
.channel{flex:0 0 auto;min-width:150px;max-width:300px;min-height:56px;padding:10px 12px;gap:8px}
.channel span{min-width:0}

/* Текст карточки сервиса */
.service-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.service-text strong{font-size:13px;line-height:1.25;color:var(--ink)}
.service-text small{font-size:11px;line-height:1.35;color:var(--muted)}
.service .chevron{color:var(--muted);flex-shrink:0}

/* Модалка как bottom-sheet: выезжает снизу */
#modal{margin:auto auto 0;width:100%;max-width:100%;border-radius:22px 22px 0 0;max-height:92dvh;animation:modal-sheet-up .3s cubic-bezier(.2,.8,.2,1)}
#modal.closing{animation:modal-sheet-down .25s cubic-bezier(.4,0,1,1) forwards}
#modal::backdrop{animation:modal-backdrop .3s ease}
@keyframes modal-sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes modal-sheet-down{from{transform:translateY(0)}to{transform:translateY(100%)}}
@keyframes modal-backdrop{from{opacity:0}to{opacity:1}}
@media (min-width:600px){#modal{max-width:430px;border-radius:22px;margin:auto;left:0;right:0}}