/* --- ГЛОБАЛЬНЫЙ КОНТЕЙНЕР --- */
.sr2-container {
    width: 100%;
    height: 550px; 
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    font-family: var(--font-main, sans-serif);
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
}

/* --- ШАПКА --- */
.sr2-header {
    height: 50px;
    padding: 0 var(--container-padding-x);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.sr2-logo { 
    font-size: var(--fs-h1);
    font-weight: 700;
    color: #0f172a;
}
.sr2-logo span { color: #0a2279; /* Брендовый цвет оставил хардкодом, если нет в vars */ }
.sr2-subtitle { 
    font-weight: var(--fw-regular); 
    font-size: var(--fs-h2); /* Микро-текст, меньше чем --fs-small */
    color: var(--text-muted); 
    margin-left: 10px; 
    text-transform: uppercase; 
}

/* --- ЛЕЙАУТ --- */
.sr2-grid-layout {
    display: grid;
    grid-template-columns: 70% 30%;
    flex: 1; 
    overflow: hidden; 
    min-height: 0; 
}

/* --- BENTO (ЛЕВАЯ ЧАСТЬ - КОНТЕЙНЕР) --- */
.sr2-bento-wrapper {
    background-color: var(--bg-secondary);
    padding: 10px;
    height: 100%;
    overflow: hidden;
}

.sr2-bento-grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 6px;
    grid-auto-flow: dense;
}

/* --- КАРТОЧКА (ГРАФИКА - НЕ ТРОГАЕМ СТИЛИ ТИПОГРАФИКИ ВНУТРИ) --- */
.sr2-card {
    background: linear-gradient(135deg, #ffffff 40%, rgba(var(--card-rgb), 0.08) 100%);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    overflow: hidden;
}
.sr2-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--card-color); z-index: 3; }

/* --- ИНТЕРАКТИВ КАРТОЧЕК --- */
.sr2-card:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 12px 25px -8px rgba(var(--card-rgb), 0.4); border-color: var(--card-color); z-index: 10; }

.sr2-card.hover-linked { background: var(--card-color) !important; border-color: var(--card-color) !important; transform: translateY(-3px) scale(1.01); box-shadow: 0 10px 30px -5px rgba(var(--card-rgb), 0.4); z-index: 20; }
.sr2-card.hover-linked .sr2-card-title, .sr2-card.hover-linked .sr2-card-meta, .sr2-card.hover-linked::after { color: #ffffff !important; }
.sr2-card.hover-linked .sr2-badge { background: rgba(255,255,255,0.25); color: #ffffff; border-color: transparent; }
.sr2-card.hover-linked .sr2-live-dot { background-color: #ffffff; box-shadow: 0 0 0 0 rgba(255,255,255, 0.7); }

.sr2-card.active { background: var(--card-color); border-color: var(--card-color); transform: scale(0.98); box-shadow: inset 0 0 20px rgba(0,0,0,0.1); animation: sr2-breathe-active 3s infinite ease-in-out; }
.sr2-card.active::after { opacity: 0; }
.sr2-card.active .sr2-card-title, .sr2-card.active .sr2-card-meta, .sr2-card.active .sr2-badge, .sr2-card.active::after { color: #fff; }
.sr2-card.active .sr2-badge { background: rgba(255,255,255,0.25); border-color: transparent; }
.sr2-card.active .sr2-live-dot { background-color: #fff; box-shadow: 0 0 0 0 rgba(255,255,255, 0.7); animation: sr2-pulse-dot-white 2s infinite; }

@keyframes sr2-breathe-active { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
@keyframes sr2-pulse-dot-white { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255,255,255, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 4px rgba(255,255,255, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255,255,255, 0); } }

.sr2-card-content { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.sr2-card-title { font-family: var(--font-main); font-weight: 700; color: #1e293b; line-height: 1.1; text-transform: uppercase; word-wrap: break-word; hyphens: auto; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s ease; }
.sr2-card-meta { margin-top: 6px; font-size: 9px; font-weight: 600; color: #94a3b8; display: flex; justify-content: space-between; align-items: flex-end; }
.sr2-badge { background: rgba(255,255,255,0.8); border: 1px solid var(--border-color); padding: 1px 5px; border-radius: 4px; color: #475569; transition: background 0.2s, color 0.2s; }

.sr2-live-dot { position: absolute; top: 10px; right: 10px; width: 6px; height: 6px; background-color: var(--card-color); border-radius: 50%; z-index: 5; box-shadow: 0 0 0 0 rgba(var(--card-rgb), 0.7); animation: sr2-pulse-dot 2s infinite; }
@keyframes sr2-pulse-dot { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--card-rgb), 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 4px rgba(var(--card-rgb), 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--card-rgb), 0); } }

/* Размеры карточек (Hardcoded as requested for Bento logic) */
.span-xl { grid-column: span 2; grid-row: span 2; background: linear-gradient(135deg, #ffffff 20%, rgba(var(--card-rgb), 0.12) 100%); }
.span-xl .sr2-card-title { font-size: 17px; -webkit-line-clamp: 5; }
.span-l { grid-column: span 2; grid-row: span 1; }
.span-l .sr2-card-title { font-size: 15px; -webkit-line-clamp: 2; }
.span-m { grid-column: span 1; grid-row: span 1; }
.span-m .sr2-card-title { font-size: 13px; font-weight: 700; -webkit-line-clamp: 3; }
.span-s { grid-column: span 1; grid-row: span 1; }
.span-s .sr2-card-title { font-size: 10px; color: #64748b; -webkit-line-clamp: 3; }
.span-s .sr2-card-meta { display: none; }
.span-s::after { content: attr(data-count); position: absolute; bottom: 4px; right: 4px; font-size: 9px; font-weight: 700; color: rgba(var(--card-rgb), 0.4); transition: color 0.2s; }

/* --- ЛЕНТА НОВОСТЕЙ (ПРАВАЯ КОЛОНКА) --- */
.sr2-feed-wrapper { 
    background: var(--bg-main); 
    border-left: 1px solid var(--border-color); 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    overflow: hidden; 
}
.sr2-feed-header { 
    padding: 0 15px; 
    height: 40px; 
    border-bottom: 1px solid var(--bg-secondary); /* Чуть светлее рамки */
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-shrink: 0; 
}
.sr2-feed-title-text { 
    font-size: var(--fw-bold);
    font-weight: var(--fw-bold); 
    color: var(--text-muted); 
    text-transform: uppercase; 
}
.sr2-reset-btn { 
    font-size: 9px; 
    font-weight: var(--fw-bold); 
    color: #ef4444; 
    border: 1px solid #ef4444; 
    padding: 1px 6px; 
    border-radius: 12px; 
    cursor: pointer; 
    display: none; 
}

.sr2-feed-list { 
    flex: 1; 
    overflow-y: auto; 
    padding: 10px 12px; 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
    scrollbar-width: thin; 
    scrollbar-color: var(--text-title) transparent; 
}
.sr2-feed-list::-webkit-scrollbar { width: 4px; }
.sr2-feed-list::-webkit-scrollbar-track { background: transparent; }
.sr2-feed-list::-webkit-scrollbar-thumb { background-color: var(--text-title); border-radius: 4px; }

.sr2-feed-item { 
    padding: 8px 10px; 
    border: 1px solid var(--border-color); 
    border-left: 3px solid var(--accent-color); 
    border-radius: 6px; 
    text-decoration: none; 
    color: inherit; 
    transition: 0.2s; 
    background: var(--bg-main); 
    cursor: default; 
    flex-shrink: 0; 
}
a.sr2-feed-item { cursor: pointer; }
.sr2-feed-item:hover { 
    transform: translateX(3px); 
    background: linear-gradient(90deg, var(--bg-main), rgba(var(--accent-rgb), 0.1)); 
}

/* ЗАГОЛОВОК СТАТЬИ В ЛЕНТЕ */
.sr2-item-title { 
    /* Используем --fs-btn (16px) как ближайший аналог */
    font-size: var(--fs-btn);
    font-weight: var(--fw-bold); 
    color: var(--text-title);
    margin-bottom: 2px; 
    line-height: 1.25; 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
}

.sr2-item-date { 
    font-size: 9px; 
    color: var(--text-muted); 
    text-transform: uppercase; 
}

.sr2-feed-more { 
    padding: 12px; 
    border-top: 1px solid var(--bg-secondary); 
    flex-shrink: 0; 
}
.sr2-more-link { 
    display: inline-block; 
    font-size: var(--fs-small); /* 14px */
    font-weight: var(--fw-bold); 
    border: 1px solid var(--text-title); 
    padding: 6px 12px; 
    border-radius: 20px; 
    color: var(--text-title); 
    text-decoration: none; 
}
.sr2-more-link:hover { 
    background: var(--text-title); 
    color: var(--text-inverse); 
}

/* ------------------------------------------- */
/* --- МОБИЛЬНАЯ ВЕРСИЯ --- */
/* ------------------------------------------- */
.sr2-mobile-container { display: none; }

@media (max-width: 768px) {
    .sr2-container { display: none !important; }

    .sr2-mobile-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        background: var(--bg-main);
        border: 1px solid var(--border-color);
        font-family: var(--font-main, sans-serif);
        margin-bottom: 0;
        -webkit-font-smoothing: antialiased;
    }

    .sr2-mobile-header {
        padding: 15px;
        border-bottom: 1px solid var(--bg-secondary);
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }
    .sr2-mobile-subtitle {
        font-size: 10px; 
        font-weight: var(--fw-bold); 
        color: #ef4444; 
        text-transform: uppercase; 
        letter-spacing: 0.5px;
    }

    /* --- БЛОК ТЕГОВ --- */
    .sr2-mobile-tags-wrapper {
        padding: 15px 15px 5px 15px;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
    }
    .sr2-mobile-tags-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .sr2-mobile-chip {
        display: inline-flex;
        align-items: center;
        padding: 6px 12px;
        background: var(--bg-main);
        border: 1px solid rgba(var(--chip-rgb), 0.3);
        border-radius: 20px;
        font-size: 13px; /* Оставил специфичный размер, чтобы влезало */
        font-weight: var(--fw-bold);
        color: var(--text-body);
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }
    .sr2-mobile-chip::before {
        content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: var(--chip-color); margin-right: 6px;
    }
    .sr2-chip-count {
        font-size: 9px; color: var(--text-muted); margin-left: 6px; font-weight: var(--fw-regular);
    }

    .sr2-mobile-chip.active {
        background: var(--chip-color);
        border-color: var(--chip-color);
        color: #fff;
        box-shadow: 0 4px 12px rgba(var(--chip-rgb), 0.4);
    }
    .sr2-mobile-chip.active::before { background-color: #fff; }
    .sr2-mobile-chip.active .sr2-chip-count { color: rgba(255,255,255,0.8); }

    /* Кнопка "Еще" */
    .sr2-chip-more {
        font-size: 11px;
        color: var(--text-muted);
        background: transparent;
        border: 1px dashed var(--border-color);
        padding: 6px 10px;
        border-radius: 20px;
        cursor: pointer;
    }
    .sr2-chip-more:active { background: var(--bg-secondary); }

    /* Лента */
    .sr2-mobile-feed-header {
        padding: 15px 15px 10px 15px;
        font-size: 11px; 
        font-weight: var(--fw-bold); 
        color: var(--text-muted); 
        text-transform: uppercase;
        display: flex; justify-content: space-between;
    }
    .sr2-mobile-reset { display: none; color: #ef4444; cursor: pointer; }

    /* СКРОЛЛ ЗОНА */
    .sr2-mobile-scroll-area {
        max-height: 350px;
        overflow-y: auto;
        border-bottom: 1px solid var(--bg-secondary);
        
        scrollbar-width: thin;
        /* Цвет ползунка теперь берем из переменной текста заголовков */
        scrollbar-color: var(--text-title) transparent;
    }
    .sr2-mobile-scroll-area::-webkit-scrollbar { width: 4px; }
    .sr2-mobile-scroll-area::-webkit-scrollbar-track { background: transparent; }
    .sr2-mobile-scroll-area::-webkit-scrollbar-thumb { background-color: var(--text-title); border-radius: 4px; }

    .sr2-mobile-feed-list {
        padding: 0 15px 15px 15px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .sr2-mobile-feed-list .sr2-feed-item {
        border-radius: 8px;
        padding: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.03);
        border-top: 1px solid var(--bg-secondary);
        border-right: 1px solid var(--bg-secondary);
        border-bottom: 1px solid var(--bg-secondary);
        border-left-width: 4px; /* Цветной бордер слева задается в JS через style */
        background: var(--bg-main);
    }
    .sr2-mobile-feed-list .sr2-item-title { 
        /* Для мобильной ленты тоже используем переменную, но можно чуть уменьшить */
        font-size: 14px; 
        font-weight: var(--fw-bold);
        color: var(--text-title);
        line-height: 1.3; 
    }

    .sr2-mobile-footer {
        padding: 15px; text-align: center; background: var(--bg-secondary);
    }
}