/*
 * Top Vesti - сите стилови на едно место (аудит 17.09.2026).
 * Дотогаш ~76 KB CSS стоеше инлајн во три Blade partial-а и се
 * праќаше на секое вчитување на секоја страница; како статички
 * фајл браузерот го памти, а ?v=filemtime во <link> го освежува
 * при секоја промена. Редоследот е ист како порано: (1) страница
 * и распоред (top-vesti-content), (2) споделени стилови за менито и
 * картичките (порано top-vesti-shared-styles.blade.php), (3) мобилна
 * верзија (top-vesti-mobile). Редоследот е важен - има правила со
 * иста специфичност што се потпираат на него.
 */

/* ===== 1. Страница и распоред (top-vesti-content.blade.php) ===== */

/*
 * Бои/фонтови преземени од реалниот vesti.mk frontend (SwiftyLabs
 * Nuxt/Tailwind codebase, споделен од Зоф 14.09.2026) - истиот
 * primary-dark/secondary/redAccent/blueAccent сет и Exo 2 / PT Sans
 * фонтовите, за оваа admin preview страница визуелно поверно да се
 * споредува со вистинскиот сајт, наместо генеричка admin палета.
 */
/*
 * Ширина/2-колони распоред е свесно поблиску до вистинскиот
 * vesti.mk (max-w-6xl ~ 1152px, 70/30 main/sidebar) откако Зоф
 * покажа дека еднаколонски preview на 720px изгледа "сиромашно"
 * во споредба (14.09.2026).
 */
.tv-page { max-width: 1100px; margin: 0 auto; font-family: 'PT Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }

/*
 * IAB 728x90 (leaderboard) плејсхолдер над средната колона -
 * само за широката 3-колонска резолуција (16.09.2026, Зоф
 * побара), бидејќи 728px има смисла само таму (средната
 * колона е точно 728px широка од истиот ден). Правилото е
 * НАМЕРНО тука, пред @media(min-width:1380px) - истата
 * специфичност како override-от таму, па редоследот во
 * документот е она што одлучува; ако ова се премести подоцна
 * во файлот, ќе го "изгасне" display:flex override-от од
 * широкиот tier иако media условот е точен.
 */
.tv-mid-ad-slot { display: none; }

/*
 * "featured 5" (ВОДЕЧА ВЕСТ + 4 мали картички, 15.09.2026,
 * Зоф прати vesti.mk скриншот) - беџ/тег/CTA елементите се
 * секогаш во маркапот кога featuredFirst=true (само домашната
 * праќа featuredFirst), но визуелно постојат САМО на широкиот
 * 3-колонски приказ - base display:none тука, override подолу
 * во @media(min-width:1380px). Истиот принцип како
 * .tv-nav-vertical/.tv-mid-ad-slot погоре.
 */
.tv-featured-badge,
.tv-featured-tag { display: none; }

/*
 * Grid со именувани области наместо flex (16.09.2026, додаден
 * трет "nav" столб) - со flex, менито ќе морало експлицитно да
 * се присили на "своја редица со 100% ширина" на секоја
 * резолуција штом влезе внатре во .tv-layout; со grid-template-
 * areas секој степен (мобилен/среден/широк) едноставно го
 * именува распоредот, нема ризик од ненамерно "curl"-ување во
 * трета колона на средните резолуции.
 *
 * Мобилен (<860px): менито над, па главна содржина, па sidebar
 * - идентично на претходното однесување (непроменето).
 * Среден (860-1419px): менито над, главна+sidebar во ред -
 * идентично на претходниот 68/30 flex распоред (непроменето).
 * Широк (>=1380px, нов): 3 колони, менито лево вертикално,
 * 300/728/300px + 30px padding - Зофов бараn распоред
 * (16.09.2026, IAB 728px рекламна ширина за средната колона).
 */
.tv-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "nav" "main" "aside";
    gap: 20px;
}
.tv-nav-col { grid-area: nav; min-width: 0; }
/* container-type/-name: средната колона е контекст за
 * контејнерските прашања подолу (728x90 банерот и "featured 5"). */
.tv-main {
    grid-area: main;
    min-width: 0;
    container-type: inline-size;
    container-name: tvmain;
}
.tv-sidebar { grid-area: aside; min-width: 0; }
/* Рекламен placeholder под левото вертикално мени - видлив
 * само на широката 3-колонска резолуција (иста display:none
 * база + override во медиа-заявката подолу, како .tv-nav-vertical),
 * Зоф побара 16.09.2026, 20px падинг под менито. */
.tv-nav-ad-slot { display: none; }
/* findex.mk виџетот под првиот плејсмент во левата колона
 * (Зоф побара 16.09.2026) - истиот display:none образец како
 * .tv-nav-ad-slot погоре, видлив само на широкиот приказ. */
.tv-nav-widget { display: none; }

@media (min-width: 860px) {
    .tv-layout {
        grid-template-columns: 1fr 320px;
        grid-template-areas: "nav nav" "main aside";
    }
}

@media (min-width: 1380px) {
    .tv-page { max-width: 1388px; }
    .tv-layout {
        grid-template-columns: 300px 728px 300px;
        grid-template-areas: "nav main aside";
        column-gap: 20px;
    }

    /*
     * Вертикално мени (16.09.2026, преработено истиот ден по
     * Зофова листа: најнови вести | Почетна+категории+Поткасти
     * | Барај | Мени, секоја група одвоена со линија). Сега е
     * ЦЕЛОСНО посебен блок (.tv-nav-vertical) од хоризонталното
     * .tv-nav, не иста содржина пресложена со CSS - овде само
     * се менуваат кој од двата се гледа. Светла палета (бело,
     * темно сиво писмо, сина активна состојба) по Зофови
     * Moivesti референтни слики - хоризонталното мени на сите
     * останати резолуции си останува темно-морнарско,
     * непроменето.
     */
    .tv-nav-col .tv-nav { display: none; }
    .tv-nav-col .tv-nav-vertical {
        display: flex;
        flex-direction: column;
        /* Exo 2 во сите менија (Зоф побара 17.09.2026); дотогаш го
         * наследуваше PT Sans од .tv-page. */
        font-family: 'Exo 2', sans-serif;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 8px 8px 20px;
        color: #374151;
    }
    .tv-nav-col .tv-nav-ad-slot {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 300px;
        height: 250px;
        background: #e5e7eb;
        border: 1px dashed #9ca3af;
        border-radius: 8px;
        text-align: center;
        font-size: 12px;
        line-height: 1.5;
        color: #6b7280;
        margin-top: 20px;
    }
    /* Истите 300x250 димензии и 20px растојание како плејсментите
     * помеѓу кои седи; border-radius:14px го поклопува заоблувањето
     * на самиот виџет, како кај .tv-ad-slot--widget во sidebar-от. */
    /* Жив рекламен слот во левата колона - истите правила како
     * .tv-ad-slot--live во sidebar-от: слободна висина, без
     * рамка/позадина, и никаков простор кога серверот не вратил
     * реклама. Растојанието одозгора (20px, до менито односно до
     * findex виџетот) доаѓа само кога има реклама, преку
     * tv-ad-filled (Зоф, 17.09.2026). */
    .tv-nav-col .tv-nav-ad-slot--live {
        display: block;
        width: 300px;
        max-width: 100%;
        height: auto;
        padding: 0;
        border: none;
        background: transparent;
        font-size: 0;
        line-height: 0;
        margin-top: 0;
    }
    .tv-nav-col .tv-nav-ad-slot--live.tv-ad-filled { margin-top: 20px; }

    .tv-nav-col .tv-nav-widget {
        display: block;
        margin-top: 20px;
    }
    .tv-nav-col .tv-nav-widget iframe {
        display: block;
        width: 300px;
        height: 250px;
        max-width: 100%;
        border: 0;
        border-radius: 14px;
    }
    /* Темна лента околу логото (Зоф побара 16.09.2026, по
     * vesti.mk-стил скриншот). margin:-8px ја извлекува преку
     * .tv-nav-vertical-овиот padding:8px до рабовите; border-
     * radius на горниот раб го поклопува заоблувањето на
     * контејнерот бидејќи е прв елемент.
     *
     * "најнови вести" под неа НЕ доби лента - Зоф побара назад
     * (16.09.2026, истиот ден): треба да си остане обична
     * ставка во менито, со црвен фонт како порано (.tv-nv-link-
     * featured подолу веќе го прави тоа, само со base стилот,
     * без овде-специфичен override - оттука нема посебна CSS
     * за .tv-nv-group:first-of-type веќе).
     *
     * Логото е порамнето лево (justify-content:flex-start,
     * padding лево 12px = исто како .tv-nv-link подолу, за да
     * се порамни со останатите ставки/икони) и малку поголемо
     * (26px->32px). Хамбургер иконата е префрлена тука од "Мени"
     * ставката подолу (Зоф побара 16.09.2026) - .tv-nvicon веднаш
     * до логото, boja бела (наследена од .tv-nv-logo color:#fff)
     * бидејќи svg-то користи stroke="currentColor". */
    .tv-nav-col .tv-nv-logo {
        display: flex;
        align-items: center;
        gap: 12px;
        justify-content: flex-start;
        margin: -8px -8px 0;
        /* лев падинг усогласен со .tv-nv-link (9px 12px 9px 22px)
         * - хамбургерот и другите икони мора да седат на иста
         * вертикална линија (Зоф побара 16.09.2026). */
        /* Зоф побара 5px помалку над и под логото (17.09.2026):
         * горе 20->15, долу вкупно 20->15. Долниот падинг е 7, не
         * 15, бидејќи дивајдерот под него веќе носи 8px margin-top
         * (7+8=15) - истата сметка како претходно, само 5px пониска. */
        padding: 15px 12px 7px 30px;
        border-radius: 8px 8px 0 0;
        text-decoration: none;
        /* Бела лента (Зоф побара 16.09.2026, беше .tv-lenta темна)
         * - хамбургерот наследува боја од .tv-nav-vertical (#374151),
         * исто како другите икони во менито. */
        background: #fff;
        color: #374151;
    }
    /* .tv-brand-logo--nav.tv-brand-logo (composed, 2 класи) НАМЕРНО - .tv-brand-logo
     * (1 класа, height:22px) живее во top-vesti-shared-styles.blade.php,
     * инклудирано ПОСЛЕ овој style-блок во документот, па со иста
     * специфичност (1 класа наспроти 1 класа) би победил тој по редослед.
     * Истата лекција како .tv-nav-vertical/.tv-featured-lead погоре -
     * ова е и вистинскиот бug зошто логото "не се зголемуваше" претходно. */
    .tv-brand-logo--nav.tv-brand-logo { height: 38px; } /* Зоф побара поголемо, назад на 38px (17.09.2026) */
    /* Растојанието помеѓу две ставки е 9+2+9=20px; Зоф побара
     * 5px помалку (17.09.2026), па gap-от паѓа на 1 и
     * вертикалниот падинг на 7 => 7+1+7 = 15px. */
    .tv-nv-group { display: flex; flex-direction: column; gap: 1px; }
    .tv-nv-sep { height: 1px; background: #e5e7eb; margin: 8px 4px; }
    .tv-nv-link {
        display: flex;
        align-items: center;
        gap: 10px;
        /* Зоф побара +10px лев падинг за целото мени, 16.09.2026;
         * вертикалниот е 7px (беше 9) за 5px помало растојание
         * помеѓу ставките, 17.09.2026 - сметката е кај .tv-nv-group. */
        padding: 7px 12px 7px 22px;
        border-radius: 8px;
        font-size: 18px;
        color: #374151;
        text-decoration: none;
    }
    .tv-nv-link:hover { background: #f3f4f6; text-decoration: none; }
    /* Зоф побара НЕ болд - позадината и сината боја се
     * доволни за да се види што е избрано (16.09.2026). */
    .tv-nv-link-active { background: #e8f2fd; color: #1d6fd6; font-weight: 400; }
    /* Порано овде имаше ресет што ја правеше "Топ вести"
     * невоочлива дури и кога е активна - тогаш таа ставка
     * водеше на ПОЧЕТНАТА, па светеше на секое отворање на
     * сајтот, без корисникот да ја избрал. Од 16.09.2026 таа е
     * своја страница (сите топ вести, во истиот приказ како
     * секоја категорија), па светнува само кога навистина е
     * избрана - ресетот е непотребен и е тргнат. Почетната
     * останува на логото. */
    .tv-nv-link-featured { color: #dc2626; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; }
    .tv-nv-link-featured:hover { background: #fef2f2; }
    .tv-nvicon { width: 18px; height: 18px; flex-shrink: 0; }
    /* "Барај" издвоено поле со раундед корнерс + вистински
     * текст-инпут (Зоф побара 16.09.2026, наместо обична
     * ставка во менито). Лев падинг усогласен со .tv-nv-link
     * за иста вертикална линија на иконата. */
    .tv-nv-search {
        display: flex;
        align-items: center;
        gap: 10px;
        /* Вратено на старото поле-padding (Зоф појасни -
         * мислеше на растојанието до бордерот на .tv-nav-vertical,
         * не padding-от внатре во полето, 16.09.2026). */
        padding: 9px 12px 9px 22px;
        /* Зоф побара празнините над/под пребарувањето да се 20px
         * како кај логото (16.09.2026). Дивајдерот над ова поле
         * веќе носи margin-bottom:8px, па тука само +12px (=20). */
        margin-top: 12px;
        /* Растојание до левиот/десниот раб на .tv-nav-vertical
         * (20px) - контејнерот веќе дава 8px padding, тука +12px
         * (=20), 16.09.2026. */
        margin-left: 12px;
        margin-right: 12px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #f9fafb;
    }
    .tv-nv-search svg { color: #111827; } /* Зоф побара црна икона (текстот останува сив) */
    .tv-nv-search input {
        flex: 1 1 auto;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        font-size: 18px; /* усогласено со .tv-nv-link, Зоф побара иста големина */
        font-family: inherit;
        color: #374151;
    }
    .tv-nv-search input::placeholder { color: #9ca3af; }

    /* најнови.ВЕСТИ на широкиот 3-колонски приказ (Зоф побара,
     * 16.09.2026): прво целосно отстрането од оваа резолуција,
     * потоа побарано назад - но под "featured 5"-те картички од
     * топ.ВЕСТИ, не над нив како на средна/мобилна резолуција.
     * .tv-main нема природен редослед-контрола (block flow, HTML
     * редоследот е latest па top-vesti) - flex+order тука САМО
     * во оваа медиа-заявка го менува визуелниот редослед без да
     * го допира HTML-от, па средна/мобилна резолуција (без flex)
     * останува непроменета: latest над top-vesti таму, како и
     * досега. */


}

/*
 * Контејнерско прашање наместо медиа-заявка (Зоф побара
 * 17.09.2026): и 728x90 банерот и "featured 5" распоредот зависат
 * од тоа дали СРЕДНАТА КОЛОНА има 728px, не од ширината на
 * прозорецот - во админот истата ширина на прозорецот дава потесна
 * колона отколку на голата страница, па медиа-заявка овде лаже.
 *
 * Кога колоната не собира, правилата едноставно не важат и
 * содржината паѓа на обичните картички, односно на мобилниот
 * приказ под 640px - "ако не ја собира, одиме на мобилната
 * верзија", како што рече Зоф.
 */
@container tvmain (min-width: 728px) {
    .tv-mid-ad-slot {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 728px;
        height: 90px;
        background: #e5e7eb;
        border: 1px dashed #9ca3af;
        border-radius: 8px;
        text-align: center;
        font-size: 12px;
        line-height: 1.5;
        color: #6b7280;
        margin-bottom: 20px;
    }
    /* Истата логика како .tv-ad-slot--live во sidebar-от:
     * фиксна ширина, слободна висина, и никаков простор кога
     * серверот не вратил реклама (Зоф, 17.09.2026). */
    .tv-mid-ad-slot--live {
        display: block;
        height: auto;
        background: transparent;
        border: none;
        font-size: 0;
        line-height: 0;
        margin-bottom: 0;
    }
    .tv-mid-ad-slot--live > ins { display: block; }
    .tv-mid-ad-slot--live.tv-ad-filled { margin-bottom: 20px; }

    /*
     * "featured 5": првите 5 топ.ВЕСТИ картички во посебен
     * распоред само на широкиот 3-колонски приказ (728px
     * средна колона) - лево голема "водечка" вест (banner-
     * стил, слично на мобилниот .tv-item--banner, но за
     * десктоп), десно 4 мали картички (1:1 тумб, стил на
     * најнови.ВЕСТИ) (Зоф, 15.09.2026, по vesti.mk скриншот).
     * Секој селектор тука е composed од 2+ класи (пр.
     * .tv-featured-lead.tv-item) НАМЕРНО - истата специфичност-
     * наспроти-редослед лекција како .tv-nav-vertical погоре:
     * .tv-item (1 класа) живее во споделениот
     * top-vesti-shared-styles.blade.php, вклучен ПОСЛЕ овој
     * <style> блок во документот, па само composed селектор со
     * повисока специфичност сигурно победува, без разлика на
     * редоследот во кој се вклучени датотеките.
     */
    .tv-featured {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        padding: 20px;
        border-bottom: 1px solid #e5e7eb;
    }
    .tv-featured-cells {
        display: flex;
        flex-direction: column;
    }
    .tv-featured-lead.tv-item {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        position: relative;
        padding: 0;
        border-bottom: none;
        border-radius: 10px;
        overflow: hidden;
    }
    .tv-featured-lead .tv-thumb {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    .tv-featured-lead .tv-thumb::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.15) 55%, transparent 85%);
    }
    .tv-featured-lead .tv-body {
        /*
         * flex: none override - базичниот .tv-body{flex:1 1 auto}
         * (споделен стил, за обичните flex-row картички) во
         * flex-column контекст на .tv-featured-lead значеше
         * .tv-body да раснe и да ја пополни целата висина на
         * картичката (flex-grow:1), па насловот излегуваше горе
         * наместо долу - justify-content:flex-end на parent-от
         * нема ефект кога единствениот flex child веќе ја зазема
         * СИТЕ простор. Со flex:none, .tv-body останува висок
         * колку што му треба на текстот, и parent-от го турка
         * долу (Зоф побара "насловот долу", 16.09.2026).
         *
         * display:flex column + order подолу: маркапот (споделен
         * со СИТЕ картички - .tv-meta па .tv-title, види
         * top-vesti-items.blade.php) не смее да се менува само
         * за оваа картичка, па редоследот НАСЛОВ-па-МЕТА (Зоф
         * побара 16.09.2026) е чисто CSS, не HTML.
         */
        flex: none;
        position: relative;
        z-index: 1;
        padding: 20px;
        display: flex;
        flex-direction: column;
    }
    .tv-featured-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 2;
        background: #dc2626;
        color: #fff;
        font-family: 'PT Sans', sans-serif;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        padding: 6px 12px;
        border-radius: 999px;
        box-shadow: 0 1px 4px rgba(0,0,0,.35);
    }
    .tv-featured-badge svg { width: 8px; height: 8px; color: #fff; }
    .tv-featured-lead .tv-title {
        order: 1;
        color: #fff;
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 12px;
        /* насловот погоре, ограничен на 4 реда (Зоф побара
         * 16.09.2026) - мета-редот (извор+време) оди под него. */
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .tv-featured-lead .tv-meta {
        order: 2;
        color: #fff;
        margin-bottom: 0;
    }
    .tv-featured-lead .tv-meta .tv-source { color: #fff; font-weight: 400; }
    .tv-featured-lead .tv-excerpt,
    .tv-featured-lead .tv-sources { display: none; }
    .tv-featured-cell.tv-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid #f1f5f9;
    }
    .tv-featured-cells .tv-featured-cell:last-child { border-bottom: none; }
    /*
     * Тумб висок колку 4 реда на насловот (line-height 19px
     * x 4 = 76px, Зоф побара 16.09.2026, претходно беше 3 реда)
     * (16.09.2026). Тумбот останува 1:1 (ширина = висина), а
     * .tv-featured-tag/favicon/bold извор се отстранети за овие
     * картички - тагот останува default display:none (базичното
     * правило погоре), favicon-от се крие директно, изворот не е
     * bold (override на .tv-meta .tv-source од споделениот стил).
     */
    .tv-featured-cell .tv-thumb {
        flex: 0 0 76px;
        width: 76px;
        height: 76px;
        border-radius: 8px;
    }
    .tv-featured-cell .tv-meta { font-size: 12px; margin-bottom: 2px; }
    .tv-featured-cell .tv-meta img { display: none; }
    .tv-featured-cell .tv-meta .tv-source { font-weight: 400; }
    .tv-featured-cell .tv-title {
        font-family: 'Exo 2', sans-serif;
        font-weight: 300;
        font-size: 15px;
        line-height: 19px;
        margin-bottom: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .tv-featured-cell .tv-excerpt,
    .tv-featured-cell .tv-sources { display: none; }
}

.tv-ad-slot {
    background: #e5e7eb;
    border: 1px dashed #9ca3af;
    border-radius: 8px;
    padding: 40px 16px;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
    margin-bottom: 20px;
}

/*
 * sync.mk widget во десниот sidebar (300x250, IAB medium
 * rectangle), не placeholder текст (16.09.2026, Зоф го сподели
 * готовиот widget фајл). Под "Во тренд" картичката во
 * маркапот - порано беше прв елемент, Зоф побара редоследот
 * свртен (16.09.2026, истиот ден). Widget-от е самостојна
 * HTML страница со свој JS (fetch кон api.wiwi.tv/api/v1/tech/feed),
 * сервирана статично од public/widgets/ и вклучена преку
 * iframe - не inline-увана директно во Blade, за да не му ги
 * носиме нејзините CSS класи/animations во нашиот document
 * (име судири, itn.). .tv-ad-slot--widget ја укинува
 * dashed/padding placeholder стилизацијата само за оваа
 * картичка.
 */
.tv-ad-slot--widget {
    background: transparent;
    border: none;
    padding: 0;
    line-height: normal;
}
.tv-ad-slot--widget iframe {
    display: block;
    width: 300px;
    height: 250px;
    max-width: 100%;
    border: 0;
    border-radius: 14px;
}
/* Плејсментите во sidebar-от седат помеѓу два 300x250 виџета, па
 * носат исти димензии наместо висина диктирана од padding-от на
 * базичниот .tv-ad-slot (Зоф побара, 16.09.2026). */
.tv-ad-slot--300x250 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
    padding: 0;
}
/*
 * Жив рекламен слот (Revive), Зоф побара 17.09.2026 две работи:
 *
 * 1. Ако серверот не врати реклама, позицијата не смее да зазема
 *    простор. Затоа слотот НЕМА зададена висина (празен е 0px
 *    висок), нема рамка/позадина, а font-size/line-height се
 *    нулирани - инаку самите празни редови околу <ins> тагот во
 *    маркапот прават линија висока ~20px.
 * 2. Креативите имаат фиксна ширина но различна висина, па
 *    висината е слободна и нема overflow:hidden што би ја
 *    потсекло повисока реклама.
 *
 * Долниот отстап (како кај другите блокови во sidebar-от) го
 * добива дури кога има содржина - класата tv-ad-filled ја
 * поставува JS-от на дното на овој partial.
 */
.tv-ad-slot--live {
    width: 300px;
    max-width: 100%;
    height: auto;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 0;
    line-height: 0;
    margin-bottom: 0;
}
.tv-ad-slot--live > ins { display: block; }
.tv-ad-slot--live.tv-ad-filled { margin-bottom: 20px; }

/*
 * Она што го вметнува Revive внатре во <ins> е inline елемент
 * (img или iframe), па седи на текстуалната основна линија и
 * остава неколку празни пиксели над и под себе - тоа е
 * "падингот" што Зоф го гледа над банерот и под него
 * (17.09.2026). display:block го укинува целосно, а margin:0
 * поништува евентуален отстап од самиот креатив.
 *
 * Резултат: над слотот нема ништо наше (растојанието го дава
 * блокот над него - кај sidebar-от тоа се 20-те px на "Во
 * тренд" картичката), а под него точно 20px преку
 * .tv-ad-filled, ништо повеќе.
 */
.tv-ad-slot--live,
.tv-mid-ad-slot--live { margin-top: 0; }
.tv-ad-slot--live ins,
.tv-mid-ad-slot--live ins,
.tv-nav-ad-slot--live ins { margin: 0; }
.tv-nav-ad-slot--live > ins { display: block; }
.tv-ad-slot--live img,
.tv-ad-slot--live iframe,
.tv-ad-slot--live a,
.tv-mid-ad-slot--live img,
.tv-mid-ad-slot--live iframe,
.tv-mid-ad-slot--live a,
.tv-nav-ad-slot--live img,
.tv-nav-ad-slot--live iframe,
.tv-nav-ad-slot--live a {
    display: block;
    margin: 0;
    max-width: 100%;
}

/*
 * "Во тренд" виџет (Зоф побара 16.09.2026, по референтна слика
 * од друг сајт) - v2 (истиот ден): AI-генерирани теми
 * (TrendingTopic, wiwi:generate-trending-topics), не веќе
 * буквален top 5 од $items (v1 - Зоф пријави "си ги ископирал
 * топ вестите", детали во claude/news-aggregator.md Наод #11).
 * Стилот премина на споделениот .tv-lenta темен header (Зоф
 * побара 16.09.2026, истиот ден) заедно со ТОП ВЕСТИ/ПОТКАСТИ,
 * наместо посебната сина рамка/наслов од претходната верзија.
 */
/* Мирори .tv-section (бело/сива рамка, заоблени рабови) -
 * заглавието користи .tv-section-head.tv-lenta (иста класа
 * како ТОП ВЕСТИ/ПОТКАСТИ), не веќе посебна .tv-trending-head*
 * стилизација. margin-bottom:20px ја дава 20px празнината до
 * sync.mk widget-от под него - "Во тренд" е сега ПРВ елемент
 * во sidebar-от (Зоф побара двете, 16.09.2026). */
.tv-trending-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}
/* Дивајдер помеѓу две теми, ист како помеѓу големите картички
 * (Зоф побара 17.09.2026) - затоа падингот е на самата ставка,
 * не на листата: така линијата оди од раб до раб на картичката. */
.tv-trending-list {
    display: flex;
    flex-direction: column;
}
.tv-trending-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    /* Зоф побара 5px помалку над и под текстот (17.09.2026);
     * лево/десно останува 20px. Бројот и понатаму седи на 20px
     * од работ на картичката - неговите 5px margin-top сега ја
     * надополнуваат разликата. */
    padding: 15px 20px;
    border-bottom: 1px solid #e5e7eb;
    text-decoration: none;
}
.tv-trending-item:last-child { border-bottom: none; }
/* Редниот број и знакот за движење се една колона - знакот стои
 * ПОД бројот (Зоф побара 17.09.2026). margin-top:5px беше на
 * бројот, сега ја носи целата колона. */
.tv-trending-rank {
    flex: 0 0 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}
/* Квадрат наместо круг, ист фонт/боја како .tv-latest-tag
 * пилулите (Exo 2, 400, 13px) само хоризонтално (Зоф побара
 * 16.09.2026).
 *
 * 34px, не 40px (= двата реда на насловот): Зоф побара знакот за
 * пораст/пад да падне точно во линија со описот (17.09.2026).
 * Сметка низ колоната: 5px margin-top + 34px поле + 8px gap +
 * половина знак (5px) = 52px, а описот е на 40px наслов + 2px
 * margin + половина ред (10px) = исто 52px. Ако се менува
 * висината на полето или gap-от, оваа сметка се менува со неа. */
.tv-trending-num {
    width: 32px;
    height: 34px;
    border-radius: 6px;
    background: #dbeafe;
    /* Зоф побара црни бројки, не сини (16.09.2026). */
    color: #111827;
    font-family: 'Exo 2', sans-serif;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tv-trending-body { flex: 1 1 auto; min-width: 0; }
.tv-trending-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Фиксни два реда без разлика колку е долг насловот (Зоф
     * побара 17.09.2026) - сите теми се исто високи, а бројот
     * лево е точно толку висок (2 x 20px). */
    height: 40px;
    font-family: 'Exo 2', sans-serif;
    /* Зоф побара 15px/тежина 500 (беше 16px/700), 16.09.2026. */
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    color: #111827;
}
/*
 * Движење во рангот наспроти претходното пуштање на
 * wiwi:generate-trending-topics (hourlyAt(18)). Дотогаш тука
 * стоеше декоративна ↗ стрелка, иста на сите пет реда - Зоф
 * праша што значи, не значеше ништо (16.09.2026); на 17.09.2026
 * стрелките се заменети со триаголници под редниот број.
 * Зелено е "иста позиција" (како што побара), па качувањето го
 * носи синиот акцент, а паѓањето црвено. Триаголниците се
 * цртани со border-трик - остри на секој екран, без SVG.
 */
.tv-trending-move--up,
.tv-trending-move--down {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}
.tv-trending-move--up { border-bottom: 10px solid #2563eb; }
.tv-trending-move--down { border-top: 10px solid #dc2626; }
.tv-trending-move--same {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #16a34a;
}
.tv-trending-desc {
    /* Точните параметри што ги прати Зоф (17.09.2026):
     * Exo 2, 400, 14px/20px, rgb(120,120,120). */
    font-family: 'Exo 2', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: rgb(120, 120, 120);
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Nav фонт/висина сега ги следат headerMenu.vue-овите реални
 * вредности (text-xl override во tailwind.config.js = 1.35rem
 * ~= 21.6px, font-light=300, py-4=16px) - претходната верзија
 * беше на 14px, забележливо помала од оригиналот (Зоф,
 * 14.09.2026: "најмногу отстапуваат ... менито"). */
.tv-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}
.tv-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Зоф побара НЕ bold за насловите на лентите, 16.09.2026. */
    font-weight: 400;
    font-size: 19px;
    font-family: 'Exo 2', sans-serif;
    padding: 14px 20px;
    border-bottom: 1px solid #e5e7eb;
    color: #111827;
}
/* .tv-lenta (споделен стил, top-vesti-shared-styles.blade.php)
 * ги дава background/color - тука само border-bottom:none
 * (специфично само за заглавие-контекст, не за логото). */
.tv-section-head.tv-lenta {
    border-bottom: none;
}
.tv-section-head svg { width: 18px; height: 18px; color: #9ca3af; }
.tv-section-head.tv-lenta svg { color: #fff; }

.tv-latest-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
@media (max-width: 560px) {
    .tv-latest-grid { grid-template-columns: 1fr; }
}
/* Категориски беж како полновисинска обоена кутија лево,
 * не мал pill над текстот - ова беше најголемото отстапување
 * кај "најнови.ВЕСТИ" (Зоф, 14.09.2026). Нема директен извор
 * во SwiftyLabs кодот за оваа конкретна секција (изградена
 * порано, пред да го добиеме нивниот код), па изгледот е
 * приближен од скриншотот, не пресликан 1:1 како топ.ВЕСТИ. */
.tv-latest-cell {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
}
/* Пилулите-вертикален текст (Зоф ги прати како референца,
 * 16.09.2026) - writing-mode:vertical-rl + rotate(180deg) е
 * стандардна комбинација за текст што се чита оддолу-нагоре
 * (а не manual rotate(-90deg) на целиот блок, кое во flex
 * контекст често го расипува ширење/porамнување на родителот).
 * Тежината е намерно normal (не bold) - Зоф побара експлицитно. */
.tv-latest-tag {
    /* Зоф побара двојно потесно (44px->22px), 16.09.2026. */
    flex: 0 0 22px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0f2fe;
    color: #1e2633;
    font-size: 13px;
    font-weight: 400;
    font-family: 'Exo 2', sans-serif;
    letter-spacing: .02em;
    padding: 8px 4px;
    border-radius: 6px;
    text-decoration: none;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.tv-latest-tag:hover { background: #cfe9fb; }
.tv-latest-body { min-width: 0; flex: 1 1 auto; }
.tv-latest-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'PT Sans', sans-serif;
    font-size: 12px;
    color: #1e2633;
    margin-bottom: 4px;
}
.tv-latest-meta img { width: 15px; height: 15px; border-radius: 3px; }
/* Останува сина, само не болд (Зоф побара 16.09.2026). */
.tv-latest-meta .tv-source { color: #65a8df; font-weight: 400; }
.tv-latest-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* фиксна висина (2 x line-height), без разлика дали насловот
     * реално фаќа 1 или 2 реда - потребно за флип-анимацијата
     * подолу да не „скока" во висина кога содржината се менува. */
    height: 40px;
    font-family: 'Exo 2', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #2b2b2b;
    line-height: 20px;
    text-decoration: none;
}
.tv-latest-title:hover { text-decoration: underline; }
.tv-latest-empty { font-size: 13px; color: #9ca3af; font-style: italic; }

/*
 * "6 категории" блок (Зоф побара 16.09.2026) - последниот блок
 * на страницата, по едно пастелно заглавие за секоја категорија
 * (.tv-section-head БЕЗ .tv-lenta - тој модификатор ја дава
 * темната позадина; бојата ја носи .tv-cat-head--{slug} подолу)
 * и 4 топ кластери под неа. Самите картички се
 * ИСТИТЕ .tv-item картички како насекаде (Зоф побара, вториот обид
 * - првиот имаше сопствен вертикален card grid), преку истиот
 * top-vesti-items partial, па тука нема сопствена card
 * стилизација, само:
 *
 * 1. 24px проред на насловот (Зоф побара 22px/24px; .tv-title е
 *    веќе 22px, но со 26px проред - overrid-ирано САМО во овој
 *    блок, Топ вести останува непроменето).
 * 2. Колку реда боди текст под насловот (Зоф: 1-ред наслов ->
 *    3-ред боди, 2 -> 2, 3 -> 1, 4 -> без боди). CSS сам не може
 *    да знае на колку реда реално се пренел насловот - JS подолу
 *    ја мери висината и додава tv-cat-lines-N класа на .tv-item,
 *    а правилата подолу го поставуваат -webkit-line-clamp на
 *    .tv-excerpt. Пред JS да стигне бодито е скриено, за да нема
 *    трепкање на целиот текст пред мерењето.
 */
/* Нежни пастелни бои, сите шест различни (Зоф побара
 * 16.09.2026, наместо бело заглавие). Текстот останува темен
 * (.tv-section-head #111827) - пастелите се доволно светли. */
.tv-cat-head--local { background: #e0f2fe; }         /* светло сина */
.tv-cat-head--world { background: #dcfce7; }         /* светло зелена */
.tv-cat-head--business { background: #fef3c7; }      /* светло жолта */
.tv-cat-head--technology { background: #ede9fe; }    /* светло виолетова */
.tv-cat-head--entertainment { background: #fce7f3; } /* светло розева */
.tv-cat-head--sport { background: #ccfbf1; }         /* светло ментова */
/* Dropdown филтерот седи во темната лента на "Најнови вести"
 * (Зоф побара 16.09.2026) - затоа светол текст на проѕирна
 * подлога, наместо стандардниот системски select. */
.tv-latest-filter {
    font-family: 'Exo 2', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
}
/* Самата листа се црта од оперативниот систем - таму светол текст
 * на светла подлога би бил нечитлив, па опциите се темни. */
.tv-latest-filter option { color: #111827; background: #fff; }
/*
 * Блоковите преселени од левата колона во sidebar-от (под 1380px).
 * Нивните "домашни" правила се врзани за .tv-nav-col и важат само
 * во @media(min-width:1380px), па тука им се дава истиот изглед,
 * со една разлика: во левата колона растојанието беше ОДОЗГОРА
 * (до менито), тука е одоздола, како кај сите блокови во
 * sidebar-от (Зоф побара 17.09.2026).
 */
.tv-sidebar .tv-nav-ad-slot--live {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 0;
    line-height: 0;
    margin-top: 0;
}
.tv-sidebar .tv-nav-ad-slot--live.tv-ad-filled {
    margin-top: 0;
    margin-bottom: 20px;
}
.tv-sidebar .tv-nav-widget {
    display: block;
    margin-bottom: 20px;
}
.tv-sidebar .tv-nav-widget iframe {
    display: block;
    width: 300px;
    height: 250px;
    max-width: 100%;
    border: 0;
    border-radius: 14px;
}

/* Облаче над резултатите од пребарувањето - кажува што НЕ е во
 * опфатот (само последни 5 дена), Зоф побара 17.09.2026. */
.tv-search-note a { color: inherit; text-decoration: underline; }
.tv-search-note {
    margin: 20px 20px 0;
    padding: 12px 16px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    font-family: 'Exo 2', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #1e40af;
}
.tv-cat-head-link { color: inherit; text-decoration: none; }
.tv-cat-head-link:hover { text-decoration: underline; }
/* Зоф побара уште -2px (беше 22px/24px, пред тоа 22px/26px
 * од .tv-title), 16.09.2026. JS-от што ги брои редовите на
 * насловот го чита реалниот line-height, па се усогласува сам. */
.tv-cat-block .tv-title { font-size: 20px; line-height: 22px; }
.tv-cat-block .tv-excerpt { display: none; }
.tv-cat-block .tv-item.tv-cat-lines-1 .tv-excerpt { display: -webkit-box; -webkit-line-clamp: 3; }
.tv-cat-block .tv-item.tv-cat-lines-2 .tv-excerpt { display: -webkit-box; -webkit-line-clamp: 2; }
.tv-cat-block .tv-item.tv-cat-lines-3 .tv-excerpt { display: -webkit-box; -webkit-line-clamp: 1; }
.tv-cat-block .tv-item.tv-cat-lines-4 .tv-excerpt { display: none; }

/*
 * "возен ред на стара железничка станица" за најнови.ВЕСТИ (Зоф
 * побара по видео од стариот vesti.mk, 16.09.2026). ВТОРА верзија
 * (16.09.2026): Зоф јави дека првиот обид (3D rotateX флип) не го
 * дава вистинскиот ефект - го најдовме автентичниот механизам во
 * старата FE база (sliderComponent.vue): не ротација, туку
 * ВЕРТИКАЛЕН СКРОЛ - фиксна-висина контејнер со overflow:hidden
 * (.tv-latest-flip), внатре track со сите pool-статии наредени
 * flex-column (.tv-latest-flip-track), и transform:translateY(-n
 * * висина) на секои X секунди со transition за глаткото лизгање.
 * .tv-latest-flip-item висината МОРА да се совпаѓа со ITEM_HEIGHT
 * константата во JS подолу (крајот на датотекава).
 */
.tv-latest-flip {
    position: relative;
    height: 64px;
    overflow: hidden;
}
.tv-latest-flip-track {
    display: flex;
    flex-direction: column;
    transition: transform .5s ease-in-out;
}
.tv-latest-flip-item {
    flex: 0 0 64px;
    height: 64px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
    .tv-latest-flip-track { transition: none; }
}

/* "најнови.ПОТКАСТИ" - од latestPodcast.vue: thumb со времетраење
 * како бедж, наслов Exo 2 испод, канал+time во ситно. Податоците
 * доаѓаат од истиот Channel/Video модел што веќе го користи WiWi
 * TV podcast API-то (/countries/{cc}/channels/podcasts/videos),
 * не нов податочен модел (Зоф, 14.09.2026). */
/* Страницата "Поткасти" (Зоф побара 17.09.2026): по два
 * поткаста во ред, 20px помеѓу колоните, а помеѓу редовите 10px
 * повеќе (30px) - Зоф побара дополнително растојание само по
 * вертикала, 17.09.2026. */
.tv-podcast-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 20px;
    padding: 20px;
}
/* Строго 16:9 - висината ја диктира ширината на колоната, не
 * фиксни пиксели како кај sidebar-от (Зоф побара, 17.09.2026). */
.tv-podcast-grid .tv-podcast-thumb img {
    height: auto;
    aspect-ratio: 16 / 9;
}
/* Насловот под тумбот - точните параметри што ги прати Зоф:
 * Exo 2, 300, 15px/19px, rgb(43,43,43). */
.tv-podcast-grid .tv-podcast-title {
    font-family: 'Exo 2', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 19px;
    color: rgb(43, 43, 43);
}
/* Редот со изворот и часот е 13px (Зоф побара 17.09.2026) -
 * само тука, во sidebar-от останува 14px. */
.tv-podcast-grid .tv-podcast-meta { font-size: 13px; }
@media (max-width: 560px) {
    .tv-podcast-grid { grid-template-columns: 1fr; }
}
.tv-podcast-card { display: flex; flex-direction: column; gap: 8px; }
.tv-podcast-thumb { position: relative; display: block; }
.tv-podcast-thumb img {
    width: 100%;
    height: 160px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
    background: #eef2ff;
}
.tv-podcast-duration {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 11px;
    font-family: 'Noto Sans', sans-serif;
    padding: 2px 6px;
    border-radius: 4px;
}
.tv-podcast-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: #1e2633;
    line-height: 24px;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tv-podcast-title:hover { text-decoration: underline; }
.tv-podcast-meta {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    color: #787878;
    display: flex;
    gap: 6px;
    align-items: center;
}
.tv-podcast-meta .tv-podcast-channel { color: #65a8df; }

.tv-note { font-size: 12px; color: #9ca3af; margin: -8px 0 20px; }

/* ===== 2. Споделени стилови (порано top-vesti-shared-styles.blade.php) =====

    Споделен стил за елементите што се идентични на ДВЕТЕ Top Vesti
    страници (домашна и категориска): горното мени (лого + категории) и
    секоја "вест" картичка (тумб + наслов + мета + excerpt + извори).
    Извадено од top-vesti-content.blade.php (15.09.2026) откако
    тогашниот одделен партиал за категориската страница доби своја
    застарена копија на овие блокови (Наод #9) - таа копија го немаше
    воопшто новото лого-беџ (`.tv-logo-badge`/`.tv-logo-sub`, воведено
    14.09.2026 на домашната), плус користеше стари pre-audit мерки/бои
    за картичките (17px наслов, #dc2626, нема font-family). Од
    16.09.2026 таа копија воопшто не постои: категориската страница го
    рендерира ИСТИОТ top-vesti-content.blade.php како домашната (Зоф
    побара клик на категорија од левото мени да го менува само средниот
    столб), па стилот тука е споделен и без тоа.

    Мерки/бои за картичката 1:1 пресликани од vesti.mk-овата
    articleComponent.vue: thumb 180x130 на десктоп, наслов PT Sans
    22px/700 боја #2b2b2b, извор во темно-црвено rgb(181,28,32),
    snippet во Exo 2 14px сиво, извори во PT Sans со сина акцент боја.

    Мобилен стек за картичката (под 640px, 15.09.2026, Зоф побара
    подготовка за мобилна верзија): слика преку целата ширина одозгора,
    текст под неа - исто како vesti.mk-овата реална мобилна
    bigArticleTemplate.vue/smallArticleTemplate.vue, не само стиснат
    десктоп-ред. Менито веќе се превиткува само (flex-wrap: wrap на
    .tv-nav/.tv-nav-links), не бара посебен breakpoint.

    Ритам на картички banner/small/mega (16.09.2026, поправено истиот
    ден да биде САМО мобилно) - Зофов оригинален дизајн, препознат во
    layoutPattern-от од стариот SwiftyLabs vesti.mk FE код
    (pages/category/[categoryId].vue): banner, small, big x4, small,
    mega, big x4, small - циклус од 13, применет во
    top-vesti-items.blade.php преку $loop->index. Прв обид ги имаше
    овие правила надвор од @media - го менуваше и десктоп изгледот,
    Зоф пријави дека десктопот "го зезна". Сега `.tv-item--small`/
    `--mega`/`--banner` НЕМААТ ефект надвор од мобилниот breakpoint -
    на десктоп секоја картичка изгледа идентично на "big" (default,
    без модификатор), точно како порано.

    Страница-специфични стилови (.tv-page ширина, .tv-section
    заоблување/margin, layout колони) остануваат во секоја страница
    посебно - тие навистина се разликуваат намерно (домашната има
    2-колони sidebar layout, категориската е едноколонски список).
*/

/* "Lenta" (Зоф побара, 16.09.2026): едно место за темниот лента-стил
 * што сега го делат ТОП ВЕСТИ/ПОТКАСТИ/најнови.ВЕСТИ заглавијата И
 * логото во вертикалното мени - порано секое си имаше сопствен
 * background/color инлајн, лесно можеа да се раздвојат со текот на
 * времето (веќе се беше случило на категориската страница - стар
 * #65a8df никогаш не доби бело). Секој од нив уште држи сопствени
 * layout својства (padding/border-radius/flex) во својот poseben
 * селектор - .tv-lenta носи само боја/позадина, applied насекаде.
 */
.tv-lenta {
    /* Зоф побара 55% црна (порано 60%), 16.09.2026. */
    background: rgba(0, 0, 0, .55);
    color: #fff;
}

.tv-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #1e2633;
    color: #e5e7eb;
    padding: 16px 20px;
    border-radius: 8px 8px 0 0;
    /* Зоф побара помал текст во хоризонталното мени (беше 21px),
     * 17.09.2026 - сега таму стојат 9 ставки со полни имиња. */
    font-size: 16px;
    font-weight: 300;
    font-family: 'Exo 2', sans-serif;
    flex-wrap: wrap;
}
.tv-nav-links {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1 1 auto;
}
.tv-nav-icons {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    color: #cbd5e1;
}
.tv-nav-icons svg { width: 20px; height: 20px; }
.tv-nav .tv-logo-wrap {
    display: inline-flex;
    align-items: baseline;
    margin-right: 4px;
}
/* Реалното VESTi.mk лого (PNG, Зоф го сподели 16.09.2026) наместо
 * текстуалниот "WiWi/tv" беџ - .tv-brand-logo е заедничка класа за
 * двете места (хоризонтално и вертикално мени), .tv-brand-logo--nav
 * само ја менува висината за вертикалното. */
/* Зоф побара поголемо лого во хоризонталното мени (беше 22px),
 * 17.09.2026. Вертикалното си има своја висина (.tv-brand-logo--nav). */
.tv-brand-logo { display: block; height: 34px; width: auto; }
.tv-nav span.tv-navsep { color: #475569; }
.tv-navlink { color: #fff; text-decoration: none; }
.tv-navlink:hover { color: #65a8df; text-decoration: underline; }
.tv-navlink-active { color: #65a8df; font-weight: 700; }
/*
 * КРИТИЧНО: .tv-nav-vertical МОРА да е скриен по default секаде -
 * без ова правило (пропуштено при првото воведување на
 * .tv-nav-vertical, 16.09.2026), блокот се рендерираше unstyled
 * (голема SVG икона, гол текст) на категориската страница и на
 * секоја резолуција под 1380px на домашната, бидејќи целиот
 * .tv-nvicon/.tv-nv-* стил живее САМО внатре во
 * top-vesti-content.blade.php-овиот @media(min-width:1380px)
 * блок. Override-от (.tv-nav-col .tv-nav-vertical{display:flex})
 * е поспецифичен (2 класи наспроти 1) па секогаш победува таму
 * каде навистина треба да се гледа, без разлика на редоследот во
 * документот.
 */
.tv-nav-vertical { display: none; }
.tv-item {
    display: flex;
    gap: 24px;
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
}
.tv-item:last-child { border-bottom: none; }
.tv-thumb {
    flex: 0 0 180px;
    width: 180px;
    /* 135px, не 130px како кај vesti.mk-овиот articleComponent.vue -
     * Зоф побара 5px повисоко за да се затвори белата дупка под
     * сликата (текстот десно е повисок од сликата, 16.09.2026).
     * Важи за стандардната картичка на десктоп; мобилниот стек и
     * --small/--mega/--banner варијантите си имаат свои висини. */
    height: 135px;
    border-radius: 6px;
    overflow: hidden;
    background: #eef2ff;
}
.tv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-thumb-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #94a3b8;
    text-align: center;
    padding: 4px;
    box-sizing: border-box;
}
.tv-body { min-width: 0; flex: 1 1 auto; }
.tv-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'PT Sans', sans-serif;
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 8px;
    color: #787878;
}
.tv-meta img { width: 18px; height: 18px; border-radius: 3px; flex-shrink: 0; }
/* Останува црвено, само не болд (Зоф побара 16.09.2026). */
.tv-meta .tv-source { color: rgb(181, 28, 32); font-weight: 400; }
.tv-title {
    display: block;
    font-family: 'PT Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #2b2b2b;
    line-height: 26px;
    text-decoration: none;
    margin-bottom: 8px;
}
.tv-title:hover { text-decoration: underline; }
.tv-excerpt {
    font-family: 'Exo 2', sans-serif;
    font-size: 14px;
    color: #787878;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tv-sources { font-family: 'PT Sans', sans-serif; font-size: 13px; line-height: 20px; color: #787878; }
.tv-sources a { color: #01a0d0; text-decoration: none; }
.tv-sources a:hover { text-decoration: underline; }
/* Без стандардна виолетова/црвена боја на посетен линк (Зоф
 * пријави дека изворите поминуваат во црвено по клик, 16.09.2026). */
.tv-sources a:visited { color: #01a0d0; }
/* "N вести" бројачот - сива, не сина боја како изворите (Зоф
 * побара 16.09.2026, override на .tv-sources a). */
.tv-sources a.tv-sources-count { color: #787878; }
.tv-sources a.tv-sources-count:visited { color: #787878; }
.tv-sources a.tv-sources-count:hover { color: #01a0d0; }
.tv-empty { padding: 32px 20px; text-align: center; color: #6b7280; }

/*
 * Хамбургер мени (Зоф побара 17.09.2026). Живее тука, не во
 * @media(min-width:1380px) блокот на top-vesti-content, бидејќи го
 * отвораат ДВА хамбургера - оној во левото мени (само широк приказ)
 * и оној во хоризонталното мени (сите останати ширини).
 */
.tv-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
/* Дропдаун закачен под хамбургерот што го отворил - позицијата ја
 * поставува JS (два различни хамбургера го отвораат истиот елемент),
 * затоа position:fixed без фиксни координати тука. */
.tv-menu-dropdown {
    position: fixed;
    z-index: 9999;
    width: 260px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    padding: 10px 16px;
    font-family: 'Exo 2', sans-serif;
}
.tv-menu-dropdown[hidden] { display: none; }
/* Полето за барање од лупата - истиот механизам и изглед како
 * дропдаунот погоре (Зоф побара 17.09.2026). */
.tv-search-dropdown {
    position: fixed;
    z-index: 9999;
    width: 280px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    padding: 8px 12px;
}
.tv-search-dropdown[hidden] { display: none; }
.tv-search-dropdown input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Exo 2', sans-serif;
    font-size: 16px;
    color: #111827;
}
.tv-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tv-menu-list > li { padding: 8px 0; }
.tv-menu-list > li + li { border-top: 1px solid #f1f5f9; }
.tv-menu-list a,
.tv-menu-toggle {
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    color: #111827;
    text-decoration: none;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}
.tv-menu-list a:hover,
.tv-menu-toggle:hover { color: #01a0d0; }
.tv-menu-sub {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}
.tv-menu-sub[hidden] { display: none; }
.tv-menu-sub li {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #6b7280;
}
.tv-menu-sub a { font-size: 14px; font-weight: 400; color: #01a0d0; text-decoration: none; }
.tv-menu-sub a:hover { text-decoration: underline; }
/* Изворите се над 160 - листата добива своја лента за скролање
 * наместо да го растегне целото мени. */
.tv-menu-sub--sources { max-height: 320px; overflow-y: auto; }

@media (max-width: 640px) {
    .tv-item {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }
    .tv-thumb {
        width: 100%;
        flex: 1 1 auto;
        height: 200px;
    }
    .tv-title {
        font-size: 19px;
        line-height: 24px;
    }

    /* --- Ритам на картички, само тука (мобилно) --- */

    .tv-item--small {
        flex-direction: row;
        gap: 16px;
        padding: 12px 16px;
    }
    .tv-item--small .tv-thumb {
        width: 100px;
        height: 100px;
        flex: 0 0 100px;
    }
    .tv-item--small .tv-title {
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 4px;
    }
    .tv-item--small .tv-meta { margin-bottom: 0; }
    .tv-item--small .tv-excerpt,
    .tv-item--small .tv-sources { display: none; }

    .tv-item--mega .tv-thumb { height: 260px; }
    .tv-item--mega .tv-title { font-size: 22px; line-height: 28px; }

    .tv-item--banner {
        position: relative;
        padding: 0;
    }
    .tv-item--banner .tv-thumb {
        position: relative;
        height: 240px;
        border-radius: 0;
    }
    .tv-item--banner .tv-thumb::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.15) 55%, transparent 85%);
    }
    .tv-item--banner .tv-body {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 16px;
    }
    .tv-item--banner .tv-title { color: #fff; font-size: 20px; line-height: 24px; }
    .tv-item--banner .tv-meta { color: #e5e7eb; }
    .tv-item--banner .tv-meta .tv-source { color: #fca5a5; }
    .tv-item--banner .tv-excerpt,
    .tv-item--banner .tv-sources { display: none; }
}

/* ===== 3. Мобилна верзија (top-vesti-mobile.blade.php) ===== */

.tv-mobile { display: none; }
/* Ставката "Темна/Светла тема" во хамбургерот постои само за
 * мобилниот приказ (десктопот нема темна тема). */
.tv-menu-theme { display: none; }

@media (max-width: 767px) {
    .tv-page > .tv-layout { display: none; }

    .tv-mobile {
        display: block;
        font-family: 'Noto Sans', sans-serif;
        font-optical-sizing: auto;
        font-stretch: 87%;
        font-variation-settings: 'wdth' 87;
        color: #1e2633;
        line-height: 1.5;
        background: #fff;
        min-height: 100vh;
        /* Долното мени е фиксно преку содржината (како старото);
         * малку простор за последната картичка да не остане под него. */
        padding-bottom: 56px;
    }
    .tv-mobile *, .tv-mobile *::before, .tv-mobile *::after { box-sizing: border-box; }
    .tv-mobile a { color: inherit; text-decoration: none; }
    /* Без општо .tv-mobile h2 правило: класа+елемент ја надјачуваше
     * секоја наслов-класа подолу (сите наслови паѓаа на 16px/400). */
    .tv-mobile img { display: block; max-width: 100%; }
    .tv-mobile button { font: inherit; }

    /* --- Хедер (headerMenu.vue): bg-primary-dark drop-shadow-lg,
     *     nav px-4 py-4 flex justify-between items-center
     *     text-secondary; лого w-[160px]; лупа w-5 h-5 бела;
     *     хамбургер size-6 stroke 1.5 (ја наследува сината). --- */
    .tvm-header {
        background: #1e2633;
        filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .04)) drop-shadow(0 4px 3px rgba(0, 0, 0, .1));
    }
    .tvm-header-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        color: #65a8df;
    }
    .tvm-logo { display: block; }
    .tvm-logo img { width: 160px; height: auto; }
    .tvm-header-icons { display: flex; align-items: center; gap: 12px; }
    .tvm-header-icons button {
        background: none;
        border: 0;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: inherit;
        cursor: pointer;
    }
    .tvm-icon-search { width: 20px; height: 20px; color: #fff; }
    .tvm-icon-menu { width: 24px; height: 24px; }

    /* --- Feed (index.vue: main grid px-4 grid-cols-1 gap-4) --- */
    .tvm-feed { padding: 16px 16px 0; }
    /* flow-root: долната маргина на <hr> внатре да не се "спои" со
     * оваа (старото беше grid gap, без спојување) - инаку секоја
     * картичка беше 8px пократка од оригиналот. */
    .tvm-feed > * { display: flow-root; margin-bottom: 16px; }
    /* Реклама: без простор додека серверот не врати креатива
     * (Зоф, 17.09.2026); tv-ad-filled ја додава скриптата од
     * top-vesti-content.blade.php. */
    .tvm-ad { margin-bottom: 0; font-size: 0; line-height: 0; }
    .tvm-ad.tv-ad-filled { margin-bottom: 16px; }
    .tvm-ad ins, .tvm-ad img, .tvm-ad iframe, .tvm-ad a { display: block; margin: 0; }

    /* <hr class="mt-4 mb-2 h-px bg-gradient-to-r from-transparent
     *  via-neutral-500 to-transparent opacity-25"> по секоја картичка */
    .tvm-hr {
        height: 1px;
        border: 0;
        margin: 16px 0 8px;
        background: linear-gradient(to right, transparent, #737373, transparent);
        opacity: .25;
    }
    .tvm-hr--banner { margin-bottom: 4px; }
    .tvm-noimg {
        width: 100%;
        height: 100%;
        background: #e5e7eb;
        color: #6b7280;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Заедничка мета линија: flex justify-between text-sm;
     * лево извор (favicon mr-2 h-3) • време; десно "+ N". */
    .tvm-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        color: #1e2633;
    }
    .tvm-meta-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .tvm-meta-source { display: flex; align-items: center; white-space: nowrap; }
    .tvm-meta-source img { height: 12px; width: auto; margin-right: 8px; }
    .tvm-plus { color: #1e2633; white-space: nowrap; margin-left: 8px; }
    .tvm-plus--blue { color: #65a8df; }

    /* banner (bannerArticleTemplate.vue) */
    .tvm-banner { position: relative; width: 100%; height: 400px; border-radius: 8px; overflow: hidden; }
    .tvm-banner-img { width: 100%; height: 100%; object-fit: cover; }
    .tvm-banner-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1) 50%, transparent);
    }
    .tvm-banner-cat {
        position: absolute;
        top: 12px;
        left: 12px;
        background: #1e2633;
        color: #65a8df;
        font-size: 18px;
        line-height: 28px;
        font-weight: 400;
        text-transform: uppercase;
        padding: 4px 12px;
        border-radius: 6px;
    }
    .tvm-banner-content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 16px;
        color: #fff;
        background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
    }
    .tvm-banner-title {
        margin: 0;
        font-size: 24px;
        line-height: 28px;
        font-weight: 600;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .tvm-meta--banner { margin-top: 12px; color: #fff; }

    /* small (smallArticleTemplate.vue) */
    .tvm-small { display: flex; }
    .tvm-small-thumb { flex: none; padding-right: 16px; }
    .tvm-small-thumb a { display: block; }
    .tvm-small-thumb img, .tvm-small-thumb .tvm-noimg {
        width: 100px;
        height: 100px;
        border-radius: 8px;
        object-fit: cover;
    }
    .tvm-small-body {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .tvm-small-title {
        margin: 0;
        font-size: 18px;
        line-height: 24px;
        font-weight: 400;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* big / mega (bigArticleTemplate.vue / megaArticleTemplate.vue) */
    .tvm-big { display: flex; flex-direction: column; gap: 16px; }
    .tvm-big-thumb { display: block; }
    .tvm-big-thumb img, .tvm-big-thumb .tvm-noimg {
        width: 100%;
        height: 220px;
        border-radius: 8px;
        object-fit: cover;
    }
    .tvm-big--mega .tvm-big-thumb img, .tvm-big--mega .tvm-big-thumb .tvm-noimg { height: 320px; }
    .tvm-big-title {
        margin: 0;
        font-size: 21.6px;
        line-height: 28px;
        font-weight: 500;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* --- Кластер (pages/c/[clusterId].vue): main grid px-4 БЕЗ gap;
     *     bannerClusterTemplate.vue = banner со mt-2, без тег, hr mt-4
     *     mb-3; smallClusterArticleTemplate.vue = pt-2, flex gap-4,
     *     тумб 130x130 rounded-lg, извор text-sm сино, наслов text-xl
     *     leading-tight line-clamp-3, датум text-gray text-sm долу,
     *     hr mt-4 mb-4. --- */
    .tvm-feed--cluster > * { margin-bottom: 0; }
    .tvm-feed--cluster > .tvm-ad.tv-ad-filled { margin-bottom: 16px; }
    .tvm-banner--cluster { margin-top: 8px; }
    .tvm-hr--cluster-banner { margin-bottom: 12px; }
    .tvm-scl { display: flex; gap: 16px; padding-top: 8px; }
    .tvm-scl-thumb { flex: none; }
    .tvm-scl-thumb a { display: block; }
    .tvm-scl-thumb img, .tvm-scl-thumb .tvm-noimg {
        width: 130px;
        height: 130px;
        border-radius: 8px;
        object-fit: cover;
    }
    .tvm-scl-body { position: relative; flex: 1 1 auto; min-width: 0; }
    .tvm-scl-source { color: #65a8df; }
    .tvm-scl-title {
        margin: 0;
        font-size: 21.6px;
        line-height: 1.25;
        font-weight: 400;
        color: #1e2633;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .tvm-scl-date { position: absolute; bottom: 0; left: 0; font-size: 14px; line-height: 20px; color: #787878; }
    .tvm-hr--cluster { margin: 16px 0; }

    /* --- најнови.ВЕСТИ (index.vue #latest + latestNews.vue) ---
     *   my-4 p-4 bg-accent-light rounded-lg grid gap-4;
     *   h2 font-exo text-xl; ol relative border-s border-secondary;
     *   li ms-4 my-2, точка w-3 h-3 -start-1.5 mt-1.5;
     *   наслов my-2 text-lg leading-6 font-light line-clamp-3;
     *   мета text-xs, извор во сино. */
    .tvm-latest {
        margin: 16px 0;
        padding: 16px;
        background: #e0f2fe;
        border-radius: 8px;
        display: grid;
        gap: 16px;
    }
    .tvm-exo {
        font-family: 'Exo 2', sans-serif;
        font-stretch: normal;
        font-variation-settings: normal;
    }
    .tvm-latest-head { margin: 0; font-size: 21.6px; line-height: 1.5; font-weight: 400; color: #000; }
    .tvm-blue { color: #65a8df; }
    .tvm-latest-list {
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
        border-left: 1px solid #65a8df;
    }
    .tvm-latest-list li { position: relative; margin: 8px 0 8px 16px; }
    .tvm-latest-dot {
        position: absolute;
        left: -22px;
        top: 6px;
        width: 12px;
        height: 12px;
        background: #65a8df;
        border-radius: 50%;
    }
    .tvm-latest-title {
        margin: 8px 0;
        font-size: 18px;
        line-height: 24px;
        font-weight: 300;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .tvm-latest-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; }
    .tvm-latest-meta .tvm-meta-source { color: #65a8df; }
    .tvm-latest-empty { margin-left: 16px; font-size: 14px; color: #787878; }

    /* Заглавие на страница (барај / извор / најнови со филтер) -
     * рамката од старите десктоп заглавија (border primary-dark
     * rounded-lg px-4 py-2, Exo 2 text-xl, сино). */
    .tvm-page-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: 1px solid #1e2633;
        border-radius: 8px;
        padding: 8px 16px;
        font-size: 21.6px;
        line-height: 1.5;
        color: #65a8df;
    }
    .tvm-page-head select {
        font: inherit;
        font-size: 15px;
        color: #1e2633;
        background: #fff;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        padding: 4px 8px;
        max-width: 50%;
    }
    .tvm-note {
        font-size: 14px;
        line-height: 20px;
        background: #e0f2fe;
        border-radius: 8px;
        padding: 10px 12px;
    }
    .tvm-note a { color: #01a0d0; text-decoration: underline; }
    .tvm-empty { font-size: 15px; color: #787878; padding: 8px 0; }

    /* Поткасти - една колона, 16:9 тумб. */
    .tvm-podcast-thumb {
        display: block;
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 8px;
        overflow: hidden;
        background: #e5e7eb;
    }
    .tvm-podcast-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .tvm-podcast-duration {
        position: absolute;
        right: 8px;
        bottom: 8px;
        background: rgba(0, 0, 0, .75);
        color: #fff;
        font-size: 12px;
        line-height: 16px;
        padding: 2px 6px;
        border-radius: 4px;
    }
    .tvm-podcast-title { display: block; margin-top: 12px; font-size: 18px; line-height: 24px; font-weight: 400; }
    .tvm-podcast-meta { margin-top: 8px; font-size: 14px; line-height: 20px; color: #787878; display: flex; gap: 8px; }

    /* --- Долно мени (navigationComponent.vue): fixed bottom-0
     *     w-full bg-white drop-shadow-lg z-10; ul flex justify-around
     *     items-center py-2 px-2 font-light text-primary-dark;
     *     активна text-secondary; скриено додека се скрола. --- */
    .tvm-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .04)) drop-shadow(0 4px 3px rgba(0, 0, 0, .1));
        z-index: 10;
        overflow: hidden;
    }
    .tvm-bottom.is-scrolling { display: none; }
    .tvm-bottom ul {
        list-style: none;
        margin: 0;
        padding: 8px;
        /* Exo 2 во сите менија (Зоф побара 17.09.2026) - старото беше
         * Noto Sans тука. */
        font-family: 'Exo 2', sans-serif;
        font-stretch: normal;
        font-variation-settings: normal;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 16px;
        line-height: 24px;
        font-weight: 300;
        color: #1e2633;
    }
    .tvm-bottom li { display: flex; align-items: center; }
    .tvm-bottom a.is-active { color: #65a8df; }

    /* "ново" (LatestArticlesBtn.vue): fixed bottom-[55px] right-4;
     * font-exo text-xl font-light бело на blueAccent px-3 pb-1
     * rounded-lg drop-shadow-lg */
    .tvm-new { position: fixed; bottom: 55px; right: 16px; z-index: 20; }
    .tvm-new a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 21.6px;
        line-height: 1.5;
        font-weight: 300;
        color: #fff;
        background: #01a0d0;
        padding: 0 12px 4px;
        border-radius: 8px;
        filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .04)) drop-shadow(0 4px 3px rgba(0, 0, 0, .1));
    }

    /* Назад кон врв (BackToTop.vue): fixed bottom-[110px] right-4
     * p-2 rounded-full border border-primary-dark shadow-lg, само
     * кога scrollY > 300. */
    .tvm-top {
        position: fixed;
        bottom: 110px;
        right: 16px;
        z-index: 50;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 8px;
        border: 1px solid #1e2633;
        border-radius: 50%;
        background: transparent;
        color: #1e2633;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
        cursor: pointer;
    }
    .tvm-top.is-visible { display: flex; }
    .tvm-top svg { width: 20px; height: 20px; }

    /* --- Темна тема (Зоф побара 17.09.2026) - dark: варијантите од
     *     старите шаблони: primary-dark #1e2633 позадина, бел текст,
     *     zink #e4e4e7 за најнови/долно мени, accent #3f4c5c за
     *     блокот најнови.ВЕСТИ, neutral-400 #a3a3a3 во дивајдерите,
     *     "+ N" сино. Класата .dark ја носи .tv-mobile (localStorage
     *     'darkMode', истиот клуч како utils/darkMode.ts). --- */
    .tv-menu-theme { display: block; }
    .tv-menu-theme .js-tv-theme-toggle { display: inline-flex; align-items: center; gap: 8px; }
    .tv-menu-theme-icon { width: 20px; height: 20px; }
    .tv-menu-theme-icon--sun { display: none; }
    .tv-mobile.dark .tv-menu-theme-icon--sun { display: block; }
    .tv-mobile.dark .tv-menu-theme-icon--moon { display: none; }

    .tv-mobile.dark { background: #1e2633; color: #fff; }
    .tv-mobile.dark .tvm-hr { background: linear-gradient(to right, transparent, #a3a3a3, transparent); }
    .tv-mobile.dark .tvm-noimg { background: #3f4c5c; color: #9ca3af; }
    .tv-mobile.dark .tvm-small-title,
    .tv-mobile.dark .tvm-big-title,
    .tv-mobile.dark .tvm-scl-title,
    .tv-mobile.dark .tvm-podcast-title { color: #fff; }
    .tv-mobile.dark .tvm-meta { color: #fff; }
    .tv-mobile.dark .tvm-plus { color: #65a8df; }
    .tv-mobile.dark .tvm-latest { background: #3f4c5c; }
    .tv-mobile.dark .tvm-latest-head { color: #fff; }
    .tv-mobile.dark .tvm-latest-title { color: #e4e4e7; }
    .tv-mobile.dark .tvm-latest-dot { background: #e4e4e7; }
    .tv-mobile.dark .tvm-latest-meta { color: #fff; }
    .tv-mobile.dark .tvm-latest-empty { color: #e4e4e7; }
    .tv-mobile.dark .tvm-page-head { border-color: #fff; }
    .tv-mobile.dark .tvm-page-head select { background: #1e2633; color: #fff; border-color: #4b5563; }
    .tv-mobile.dark .tvm-note { background: #3f4c5c; color: #fff; }
    .tv-mobile.dark .tvm-empty { color: #e4e4e7; }
    .tv-mobile.dark .tvm-podcast-meta { color: #9ca3af; }
    .tv-mobile.dark .tvm-bottom { background: #1e2633; }
    .tv-mobile.dark .tvm-bottom ul { color: #e4e4e7; }
    .tv-mobile.dark .tvm-top { color: #65a8df; border-color: #65a8df; }
    /* Дропдауните (хамбургер/барај) се преселени во .tv-mobile на
     * мобилен, па ги фаќа истата класа - како mainMenu.vue
     * dark:bg-primary-dark dark:text-white. */
    .tv-mobile.dark .tv-menu-dropdown,
    .tv-mobile.dark .tv-search-dropdown { background: #1e2633; border-color: #3f4c5c; color: #fff; }
    .tv-mobile.dark .tv-menu-list > li + li { border-top-color: #3f4c5c; }
    .tv-mobile.dark .tv-menu-list a,
    .tv-mobile.dark .tv-menu-toggle { color: #fff; }
    .tv-mobile.dark .tv-menu-list a:hover,
    .tv-mobile.dark .tv-menu-toggle:hover { color: #65a8df; }
    .tv-mobile.dark .tv-menu-sub li { color: #9ca3af; }
    .tv-mobile.dark .tv-menu-sub a { color: #65a8df; }
    .tv-mobile.dark .tv-search-dropdown input { color: #fff; }
}