.rss-container {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    padding: 28px;
    width: 100%;
    max-width: 600px;
    margin: 16px auto;
}

/* Ensure rss-container respects page width on small screens */
@media (max-width: 768px) {
    .rss-container {
        max-width: 100%;      /* do not exceed parent content width */
        width: 100%;
        padding: 16px;        /* reduce padding so content doesn't look wider */
        margin: 12px auto;    /* keep centered and slightly tighter spacing */
        border-radius: 12px;  /* slightly smaller radius for mobile look */
        box-sizing: border-box;
    }
}

@media (max-width: 420px) {
    .rss-container {
        padding: 12px;        /* compact padding for very small devices */
        margin: 10px auto;
        border-radius: 10px;
    }
}

/* Prevent horizontal scroll on homepage */
body.template-homepage {
    overflow-x: hidden;
}

@media (max-width: 768px) {
    /* Ensure container cannot visually exceed page content area */
    .template-homepage .rss-container {
        max-width: calc(100% - 24px); /* account for possible side paddings/gaps */
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .rss-logo img {
        max-width: 100%;
        height: auto; /* prevent image from pushing layout wider */
    }
}

/* Подсказка при пустой ленте */
.feed-empty-hint {
    position: absolute;
    bottom: 6px;
    right: 6px;
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.3;
    color: #8a6d3b; /* тёплый коричнево-янтарный */
    background: rgba(255, 243, 205, 0.95); /* светло-янтарный фон */
    border: 1px solid rgba(250, 219, 140, 0.9);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    user-select: none;
    z-index: 1; /* under remove button */
}

@media (max-width: 480px) {
    .feed-empty-hint {
        font-size: 10px;
        bottom: 6px;
        right: 8px;
        max-width: calc(100% - 110px); /* чтобы не пересекалось с кнопками справа */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.rss-header {
    text-align: center;
    margin-bottom: 30px;
}

/* Ряд с логотипом слева и заголовком/текстом справа */
.rss-header-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.rss-logo img {
    display: block;
    height: 100px;
    width: auto;
    max-height: 100px;
    object-fit: contain;
    border-radius: 12px;
}

.rss-header-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 6px;
}

.rss-header h1 {
    color: #333;
    font-size: 22px; /* мобильные */
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.rss-icon {
    width: 34px; /* было 32px */
    height: 34px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

.rss-header p {
    color: #666;
    font-size: 16px;
}

.input-group {
    position: relative;
    margin-bottom: 20px;
}

.input-wrapper {
    position: relative;
    display: flex;
    gap: 10px;
}

.rss-input {
    flex: 1;
    padding: 15px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.rss-input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.rss-input.error {
    border-color: #ff6b6b;
    background: #fff5f5;
}

.rss-input.success {
    border-color: #51cf66;
    background: #f3fff3;
}

.add-btn {
    padding: 15px 30px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    margin: 0 auto;
}

.add-btn:hover {
    box-shadow: 0 6px 12px rgba(102, 126, 234, 0.25);
}

.add-btn:active {
    transform: translateY(1px);
}

.add-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Отключённые кнопки выбора (верхние) и add-btn выглядят пассивно */
.selection-btn[disabled],
.add-btn[disabled] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    filter: grayscale(10%);
    box-shadow: none !important;
    transform: none !important;
}

.validation-message {
    margin-top: 10px;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    display: none;
}

.validation-message.error {
    background: #fff5f5;
    color: #e03131;
    border: 1px solid #ffc9c9;
    display: block;
}

.validation-message.success {
    background: #f3fff3;
    color: #2b8a3e;
    border: 1px solid #b2f2bb;
    display: block;
}

.feeds-list {
    margin-top: 30px;
}

.feeds-list h2 {
    color: #333;
    font-size: 16px; /* было 20px */
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.feeds {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feed-item {
    background: #f8f9fa;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(248,249,250,0.8));
    border: 1px solid #e3e7ee;
    border-radius: 10px;
    padding: 8px 10px; /* немного больше внутренний отступ */
    margin-bottom: 4px; /* чуть плотнее список */
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease;
    position: relative;
    gap: 20px;
}
/* reserve space on the right for the absolute remove button */
.feed-item { padding-right: 48px; }

.feed-item:hover {
    background: #f1f3f5;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(241,243,245,0.85));
    border-color: #d6dbe5;
}

/* Статусы карточек лент (ленивая подгрузка) */
.feed-item.feed-item--ok {
    background: rgba(76, 175, 80, 0.09) !important; /* лёгкий зелёный */
    background-image: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(76,175,80,0.08)) !important;
    border-color: rgba(76, 175, 80, 0.28) !important;
}

.feed-item.feed-item--error {
    background: rgba(244, 67, 54, 0.10) !important; /* лёгкий красный */
    background-image: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(244,67,54,0.08)) !important;
    border-color: rgba(244, 67, 54, 0.30) !important;
}

/* Индикатор загрузки на карточке ленты */
.feed-item.feed-item--loading {
    opacity: 0.92;
}
.feed-loading-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0,0,0,0.1);
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Бейдж количества найденных новостей */
.feed-prefetch-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 10px;
    color: #28a745;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    z-index: 2;
    border: 1px solid;
    font-weight: 900;
}

.feed-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px; /* место для фавиконки */
    order: 2; /* Устанавливаем порядок после view-btn */
}

/* Фавиконка источника */
.feed-favicon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex: 0 0 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

/* feed-icon удалён из разметки */

.feed-details h3 {
    color: #333;
    font-size: 15px; /* чуть крупнее */
    margin-bottom: 2px;
}

.feed-details p {
    color: #666;
    font-size: 12px;
    word-break: break-all;
}

.view-btn {
    position: relative;
    background: linear-gradient(135deg, #4fd1c5 0%, #4299e1 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .25s ease, background .25s ease, opacity .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 0;
    line-height: 1;
    order: 1; 
    box-shadow: 0 6px 14px rgba(66, 153, 225, 0.24), inset 0 1px 0 rgba(255,255,255,0.25);
    backdrop-filter: saturate(120%) blur(4px);
}
.view-btn::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C21.27 7.61 17 4.5 12 4.5zm0 12a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>') no-repeat center / contain;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C21.27 7.61 17 4.5 12 4.5zm0 12a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>') no-repeat center / contain;
}

.view-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(66,153,225,0.3), inset 0 1px 0 rgba(255,255,255,0.32);
    background: linear-gradient(135deg, #5eead4 0%, #5aa3ff 100%);
}
.view-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(66,153,225,0.28), inset 0 2px 6px rgba(0,0,0,0.08);
}
.view-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(66,153,225,0.25), 0 10px 22px rgba(66,153,225,0.32);
}

/* Отключённое состояние для кнопки просмотра новостей */
.view-btn[disabled],
.view-btn[disabled]:hover {
    opacity: .55 !important;
    cursor: not-allowed !important;
    filter: grayscale(8%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 6px rgba(0,0,0,0.06) !important;
    background: linear-gradient(180deg, #d6e4f5, #c2d4ec) !important;
    transform: none !important;
}

.remove-btn {
    color: #959595;
    border: none;
    border-radius: 8px;
    padding: 6px;
    cursor: pointer;
    background: linear-gradient(135deg, #f1f3f5 0%, #eceff4 100%);
    transition: background 260ms ease, color 220ms ease, box-shadow 260ms ease, transform 160ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    font-size: 0; /* Убираем текст */
    line-height: 1;
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 3;   
}

.remove-btn::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="%23000" d="M232.7 69.9L224 96L128 96C110.3 96 96 110.3 96 128C96 145.7 110.3 160 128 160L512 160C529.7 160 544 145.7 544 128C544 110.3 529.7 96 512 96L416 96L407.3 69.9C402.9 56.8 390.7 48 376.9 48L263.1 48C249.3 48 237.1 56.8 232.7 69.9zM512 208L128 208L149.1 531.1C150.7 556.4 171.7 576 197 576L443 576C468.3 576 489.3 556.4 490.9 531.1L512 208z"/></svg>') no-repeat center / contain;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="%23000" d="M232.7 69.9L224 96L128 96C110.3 96 96 110.3 96 128C96 145.7 110.3 160 128 160L512 160C529.7 160 544 145.7 544 128C544 110.3 529.7 96 512 96L416 96L407.3 69.9C402.9 56.8 390.7 48 376.9 48L263.1 48C249.3 48 237.1 56.8 232.7 69.9zM512 208L128 208L149.1 531.1C150.7 556.4 171.7 576 197 576L443 576C468.3 576 489.3 556.4 490.9 531.1L512 208z"/></svg>') no-repeat center / contain;
}
.remove-btn:hover {                                                  
        background: linear-gradient(135deg, #ebb5b5 0%, #e05252 100%);
        color: white;
        transform: translateY(-1px) scale(0.98);
        box-shadow: 0 6px 14px rgba(224, 49, 49, 0.28);
} 
.delete-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.delete-dots {
    display: flex;
    gap: 8px;
}

.delete-progress .dot {
    width: 12px;
    height: 12px;
    background: #ff6b6b;
    border-radius: 50%;
    transition: opacity 0.3s ease;
}

.delete-progress .dot.fade-out {
    opacity: 0.3;
}

.delete-cancel-hint {
    font-size: 12px;
    line-height: 1.2;
    color: #c92a2a; /* тёплый красный для связи с удалением */
    background: rgba(255, 240, 240, 0.9);
    border: 1px solid rgba(255, 107, 107, 0.45);
    padding: 4px 8px;
    border-radius: 6px;
    text-align: center;
    user-select: none;
}

/* Затемнение содержимого при удалении */
.feed-item.deleting .feed-info,
.feed-item.deleting .view-btn,
.feed-item.deleting .remove-btn {
    opacity: 0.5;
    pointer-events: none;
}

.feed-item.deleting .delete-progress {
    pointer-events: none;
}

.empty-state {
    text-align: center;
    padding: 40px;
    color: #999;
}

.empty-state svg {
    width: 80px;
    height: 80px;
    margin-bottom: 15px;
    opacity: 0.3;
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.rss-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rss-logo img {
    height: 100px;
    max-height: 100px;
    width: auto;
    border-radius: 12px;
}

@media (max-width: 480px) {
    .rss-header-row {
        gap: 10px;
    }
    .rss-logo img {
        height: 100px;
        max-height: 100px;
    }

    .add-btn {
        width: 100%;
        justify-content: center;
    }

    .feed-item {
        flex-direction: row; /* Сохраняем горизонтальное расположение */
        align-items: center;
        gap: 12px;
        padding-right: 48px; /* keep space for absolute remove button */
    }
    .view-btn { 
        margin-right: 12px; /* Меньший отступ на мобильных */
    }
}

@media (max-width: 768px) {
    /* Allow inputs and button to wrap to avoid overflow on tablets/phones */
    .input-wrapper {
        flex-wrap: wrap;
    }
    .input-wrapper > * {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    .rss-input {
        flex: 1 1 100%;
        width: 100%;
    }
    .add-btn {
        flex: 1 1 auto;
        white-space: normal; /* allow label to wrap instead of expanding line width */
        padding-left: 20px;
        padding-right: 20px;
        justify-content: center;
    }
}

/* Крупные чекбоксы выбора лент */
.feed-select-wrap input[type="checkbox"].feed-select {
    width: 20px;
    height: 20px;
    accent-color: #28a745;
}

/* Стили для inline редактирования тегов */
.feed-tags-display {
    cursor: pointer;
    padding: 6px 0px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    min-height: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.feed-tags-display.editing {
    cursor: default;
    background-color: #fff;
    border: 2px solid #667eea;
    padding: 6px;
}

.add-tags-hint {
    color: #999;
    font-style: italic;
    font-size: 13px;
}

.add-tags-hint:hover {
    color: #667eea;
}

.inline-tag-edit {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.inline-tag-input-container {
    flex: 1;
}

.inline-tag-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.inline-tag-save,
.inline-tag-cancel {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inline-tag-save {
    color: #28a745;
    border-color: #28a745;
}

.inline-tag-save:hover {
    background-color: #28a745;
    color: white;
}

.inline-tag-cancel {
    color: #dc3545;
    border-color: #dc3545;
}

.inline-tag-cancel:hover {
    background-color: #dc3545;
    color: white;
}

/* Компактный режим TagInput для inline редактирования */
.tag-input-wrapper.compact {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 6px;
    background: #fff;
    min-height: 32px;
}

.tag-input-wrapper.compact .selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}

.tag-input-wrapper.compact .tag-input {
    border: none;
    outline: none;
    padding: 4px;
    font-size: 13px;
    width: 100%;
    min-width: 120px;
}

.tag-input-wrapper.compact .tag-suggestions {
    position: absolute;
    z-index: 1000;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-height: 200px;
    overflow-y: auto;
    margin-top: 2px;
}

.tag-input-wrapper.compact .tag-item {
    font-size: 12px;
    padding: 3px 8px;
    margin: 0;
}

/* Бейджи тегов в списке (визуально улучшенные) */
.tag-item.tag-custom-color {
    background: color-mix(in srgb, var(--tag-color, #667eea) 14%, white);
    border: 1px solid color-mix(in srgb, var(--tag-color, #667eea) 40%, #ffffff 60%);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.4;
}

.tag-input-wrapper.compact .tag-item .tag-remove {
    width: 14px;
    height: 14px;
    font-size: 10px;
}

/* Кнопки управления выбором: одинаковая ширина и резиновая вёрстка */
.selection-controls {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: nowrap;
    margin: 20px 0;
}

.selection-controls .selection-btn {
    flex: 1 1 0;
    min-width: 0; /* позволяет равномерно ужиматься */
    display: inline-flex; /* на случай удаления инлайнов */
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    gap: 8px;
}

/* Варианты кнопок */
.selection-btn--collect {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(79, 172, 254, 0.3);
}
.selection-btn--select {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.selection-btn--deselect {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(240, 147, 251, 0.3);
}
.selection-btn--refresh {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* Ховеры для активных кнопок */
.selection-btn--collect:not([disabled]):hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4); }
.selection-btn--select:not([disabled]):hover  { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); }
.selection-btn--deselect:not([disabled]):hover{ transform: translateY(-2px); box-shadow: 0 4px 12px rgba(240, 147, 251, 0.4); }
.selection-btn--refresh:not([disabled]):hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4); }

@media (max-width: 600px) {
    /* Provide space for absolute badges/hints at the bottom on small screens */
    .feed-item {
        padding-bottom: 32px;
    }
    .remove-btn {
        z-index: 1;
    }
    .feed-prefetch-badge, .feed-empty-hint {
        z-index: 0;
    }
    .selection-controls {
        flex-wrap: wrap;
    }
    .selection-controls .selection-btn {
        flex: 1 1 48%;
    }
}

@media (max-width: 420px) {
    .selection-controls .selection-btn {
        flex: 1 1 100%;
    }
}

/* Блок действий под списком лент */
.feeds-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.feeds-hint {
    color: #666;
    font-size: 14px;
    margin: 0 auto;
}

/* Подзаголовок пустого состояния */
.empty-state-sub {
    font-size: 14px;
    margin-top: 5px;
}

/* Контейнер фильтров по тегам скрыт по умолчанию; показ управляется JS через style.display */
.tag-filter-container {
    display: none;
    gap: 8px;
    align-items: center;
}

/* Стили для анимированного заголовка */
.rss-manager-title {
    display: inline-block;
    transition: color 0.3s ease;
}

.rss-manager-title.loading {
    background: linear-gradient(90deg, #d3d3d3, #add8e6, #ffb6c1, #d3d3d3, #add8e6, #ffb6c1);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s linear infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

/* Прогресс-бар для prefetch загрузки */
#rssPrefetchProgress {
    margin-left: 15px;
    display: inline-flex; /* Всегда отображается, но с нулевым прогрессом по умолчанию */
    align-self: center;
}

.capsule { 
    position: relative; 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    min-width: 80px; 
    height: 24px; 
    padding: 8px 20px; 
    border: 1px solid rgba(0,0,0,.1); 
    border-radius: 999px; 
    background: #fff; 
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04); 
    font-weight: 600; 
    color: #333; 
    overflow: hidden; /* Обрезаем заполняющий элемент по границам */
}

.capsule__fill { 
    position: absolute; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    width: 0%; 
    border-radius: 999px; 
    background: linear-gradient(90deg, rgba(79,140,255,.15), rgba(79,140,255,.25)); 
    transition: width .25s ease; 
    z-index: 0; /* Помещаем заполняющий элемент под содержимым */
}

.capsule > span { 
    position: relative; 
    z-index: 1; 
    font-size: 12px; 
}

/* Лёгкое свечение во время загрузки */
.capsule.capsule--glow {
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04), 0 0 0 2px rgba(79,140,255,0.15), 0 0 14px rgba(79,140,255,0.25);
    animation: capsule-glow 1.6s ease-in-out infinite;
}

@keyframes capsule-glow {
    0% { box-shadow: inset 0 1px 2px rgba(0,0,0,0.04), 0 0 0 2px rgba(79,140,255,0.12), 0 0 8px rgba(79,140,255,0.18); }
    50% { box-shadow: inset 0 1px 2px rgba(0,0,0,0.04), 0 0 0 2px rgba(79,140,255,0.22), 0 0 16px rgba(79,140,255,0.35); }
    100% { box-shadow: inset 0 1px 2px rgba(0,0,0,0.04), 0 0 0 2px rgba(79,140,255,0.12), 0 0 8px rgba(79,140,255,0.18); }
}

@media (prefers-reduced-motion: reduce) {
    .capsule__fill { transition: none; }
    .capsule.capsule--glow { animation: none; box-shadow: none; }
}