/*
 * Top Vesti - сите стилови на едно место (аудит 17.09.2026).
 *
 * Дизајн аудит 17.09.2026 (Зоф одобри), важи за десктоп/SD (дел 1 и 2;
 * мобилниот дел 3 е реплика на старата vesti.mk и останува):
 * - сив текст #787878 -> #6b6b6b (контраст 4.0 -> 5.0:1);
 * - една сина (#01a0d0, наместо и #65a8df) и една црвена (#b51c20,
 *   наместо и #dc2626);
 * - заоблувања: 8px за блокови, 4px за мали чипови (беа 3/6/8/10/999);
 *   14px останува само за iframe виџетите - го поклопува нивното
 *   сопствено заоблување;
 * - без слика: favicon на изворот наместо "нема фотографија";
 * - Во тренд без опис.
 * Дотогаш ~76 KB CSS стоеше инлајн во три Blade partial-а и се
 * праќаше на секое вчитување на секоја страница; како статички
 * фајл браузерот го памти, а ?v=filemtime во <link> го освежува
 * при секоја промена. Редоследот е ист како порано: (1) страница
 * и распоред (top-vesti-content), (2) споделени стилови за менито и
 * картичките (порано top-vesti-shared-styles.blade.php), (3) мобилна
 * верзија (top-vesti-mobile). Редоследот е важен - има правила со
 * иста специфичност што се потпираат на него.
 */

/* ===== Боја-палета (Зоф побара 19.09.2026, само за десктоп/SD -
 * дел 1 и 2; мобилниот дел 3 останува со старите закуцани бои).
 * За враќање на старата палета, само сменете ги вредностите тука
 * (старите вредности се во коментарот до секоја). ===== */
:root {
    --tv-brand-red: #b51c20;        /* старо: #b51c20 (непроменето) */
    --tv-navy: #1D2735;             /* старо: #1e2633 / rgba(0,0,0,.55) */
    --tv-text-main: #222831;        /* старо: #111827 / #374151 / #2b2b2b */
    --tv-text-muted: #69707A;       /* старо: #6b6b6b / #6b7280 */
    --tv-bg-page: #F4F5F7;          /* старо: #f3f4f6 / #f9fafb */
    --tv-border: #E4E7EB;           /* старо: #e5e7eb / #f1f5f9 */
    --tv-blue: #39AEEA;             /* старо: #01a0d0 */
    --tv-blue-tint: #EAF6FC;        /* старо: #e0f2fe */
    --tv-blue-tint-hover: #D8EFFA;  /* старо: #cfe9fb (изведено) */
}

/* ===== 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; }
/* Рекламна лента на дното на целата страница (зона 165/D00,
   пренесено од стариот сајт, 23.09.2026) - зазема сите колони на
   .tv-layout без разлика на бројот на колони на тековниот breakpoint. */
.tv-footer-ad-slot { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 4px; }

/* Сајт footer - едноставна copyright лента на дното на целата
 * страница, важи за SD и HD (Зоф побара 24.09.2026, "само
 * едноставна лента - copyright и ништо повеќе"). Ист grid-column
 * трик како .tv-footer-ad-slot погоре, седи под неа. */
.tv-site-footer {
    grid-column: 1 / -1;
    text-align: center;
    font-family: 'PT Sans', sans-serif;
    font-size: 12px;
    color: var(--tv-text-muted);
    padding: 16px 0 4px;
    margin-top: 12px;
    border-top: 1px solid var(--tv-border);
}

/* Рекламен 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 var(--tv-border);
        border-radius: 8px;
        padding: 8px 8px 20px;
        color: var(--tv-text-main);
    }
    .tv-nav-col .tv-nav-ad-slot {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 300px;
        height: 250px;
        background: var(--tv-border);
        border: 1px dashed #9ca3af;
        border-radius: 8px;
        text-align: center;
        font-size: 12px;
        line-height: 1.5;
        color: var(--tv-text-muted);
        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;
    }
    /* ПУЛС картичката под менито - истото 20px растојание одозгора
     * како плејсментите/findex во оваа колона (изгледот е подолу,
     * во споделените .tv-pulse правила). */
    .tv-nav-col .tv-pulse { margin-top: 20px; }
    .tv-nav-col .tv-mynews { margin-top: 20px; }
    .tv-nav-col .tv-foryou { margin-top: 20px; }
    .tv-nav-col .tv-breaking { margin-top: 20px; }
    /*
     * ПРОБА (Зоф, 21.09.2026) вратена назад (23.09.2026): sticky на
     * секој [data-tv-nav-extra] требаше "да се предава" на следниот,
     * но откако Само за тебе/Breaking News се додадоа како нови
     * nav-extra елементи, повеќе сиблинзи излегоа sticky со ИСТ top
     * истовремено - се преклопуваат (рекламата/findex-виџетот едни
     * врз други). Зоф побара во коментарот: ако не е ОК, само
     * правилово се брише - обично лизгање со content, како порано.
     */
    /* Темна лента околу логото (Зоф побара 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: var(--tv-text-main);
    }
    /* .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: var(--tv-border); 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: var(--tv-text-main);
        text-decoration: none;
    }
    .tv-nv-link:hover { background: var(--tv-bg-page); 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: var(--tv-brand-red); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; }
    .tv-nv-link-featured:hover { background: #fef2f2; }
    /* "Мои вести" во менито (Зоф, 19.09.2026): сина #2476D9, активна =
     * #EAF3FB подлога + дискретна 3px сина линија лево (inset сенка, да
     * не го помести текстот). */
    .tv-nv-link-mynews { color: #2476D9; }
    .tv-nv-link-mynews:hover { background: #EAF3FB; }
    .tv-nv-link-mynews.tv-nv-link-active { background: #EAF3FB; color: #2476D9; box-shadow: inset 3px 0 0 #2476D9; }
    .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 var(--tv-border);
        border-radius: 8px;
        background: var(--tv-bg-page);
    }
    .tv-nv-search svg { color: var(--tv-text-main); } /* Зоф побара црна икона (текстот останува сив) */
    .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: var(--tv-text-main);
    }
    .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: var(--tv-border);
        border: 1px dashed #9ca3af;
        border-radius: 8px;
        text-align: center;
        font-size: 12px;
        line-height: 1.5;
        color: var(--tv-text-muted);
        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 var(--tv-border);
    }
    .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: 8px;
        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: var(--tv-brand-red);
        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: 4px;
        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 var(--tv-border);
    }
    .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: var(--tv-border);
    border: 1px dashed #9ca3af;
    border-radius: 8px;
    padding: 40px 16px;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: var(--tv-text-muted);
    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%;
}

/*
 * Footer слотот (zone 165) нема глобален width/height cap како
 * .tv-ad-slot--live (sidebar, тврдо 300px) - разни рекламодавачи
 * праќаат разни димензии на креативата. Ограничено по
 * data-revive-zoneid, не глобално на .tv-footer-ad-slot--live,
 * за секоја идна footer-зона со поинаква интендирана големина
 * да добие свој ред тука, без да го допира овој (Зоф пријави
 * 24.09.2026 дека FlexCredit креативата излегува поголема од
 * декларираните 970x250 и прелева над содржината под неа).
 *
 * ЕДЕН cap за двата десктоп degree (Зоф побара 24.09.2026):
 * - HD, >=1380px (.tv-page max-width 1388px, 3 колони): .tv-layout
 *   секогаш е >=970px широк, банерот стои на својот полн 970px.
 * - SD, 860-1379px (2 колони, main+aside се дели флуидно): на
 *   потесни SD прозорци .tv-layout може да падне под 970px, па
 *   970px fixed cap ќе преливаше странично. min(970px, 100%)
 *   го решава истото правило за двата - никогаш над 970px, а на
 *   потесно од тоа се стега до реалната широчина на редот.
 *   max-height:250px + overflow:hidden важи подеднакво насекаде.
 */
.tv-footer-ad-slot--live ins[data-revive-zoneid="165"] {
    display: block;
    max-width: min(970px, 100%);
    max-height: 250px;
    overflow: hidden;
    margin: 0 auto;
}
.tv-footer-ad-slot--live ins[data-revive-zoneid="165"] img,
.tv-footer-ad-slot--live ins[data-revive-zoneid="165"] iframe {
    display: block;
    max-width: min(970px, 100%);
    max-height: 250px;
    width: auto;
    height: auto;
    margin: 0 auto;
}

/*
 * "Во тренд" виџет (Зоф побара 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 var(--tv-border);
    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;
    /* Бројка+знак се една целина, насловот подалеку од нив (Зоф,
     * 17.09.2026): 16px до насловот, 5px меѓу бројка и знак. */
    gap: 16px;
    /* Зоф побара 5px помалку над и под текстот (17.09.2026);
     * лево/десно останува 20px. Бројот и понатаму седи на 20px
     * од работ на картичката - неговите 5px margin-top сега ја
     * надополнуваат разликата. */
    /* Без опис (17.09.2026) редот е само 2 реда наслов: 12px над и
     * под, знакот за пораст стои ДЕСНО од бројот, во ист ред. */
    padding: 12px 20px;
    align-items: center;
    border-bottom: 1px solid var(--tv-border);
    text-decoration: none;
}
.tv-trending-item:last-child { border-bottom: none; }
/* Редниот број и знакот за движење се една колона - знакот стои
 * ПОД бројот (Зоф побара 17.09.2026). margin-top:5px беше на
 * бројот, сега ја носи целата колона. */
.tv-trending-rank {
    /* Број + знак хоризонтално (Зоф, 17.09.2026: "реден број, до него
     * стрелката, па текстот во 2 реда" - колоната беше премногу празна
     * откако описот се тргна). */
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    margin-top: 0;
    width: 31px;
    align-self: center;
}
/* Квадрат наместо круг, ист фонт/боја како .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 {
    /* Без светло-сина подлога (Зоф, 17.09.2026: "пренатрупано") - само
     * бројката, малку поголема и потемна за да носи ред. */
    /* 15px light, вертикално на средина од редот, знакот на 5px
     * (Зоф, 17.09.2026). */
    width: 12px;
    height: 40px;
    background: none;
    color: var(--tv-text-main);
    font-family: 'Exo 2', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Насловот што сепак е 1 ред стои на средина од 2-редното поле (Зоф,
 * 17.09.2026); темите се генерираат со 35-55 знаци за да бидат 2 реда. */
.tv-trending-body { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; min-height: 40px; }
.tv-trending-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Максимум два реда; кога е еден, .tv-trending-body го центрира
     * во 40px-ното поле (17.09.2026). */
    max-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: var(--tv-text-main);
}
/*
 * Движење во рангот наспроти претходното пуштање на
 * 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 var(--tv-brand-red); }
.tv-trending-move--same {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #16a34a; /* зелена - Зоф потврди 19.09.2026 (не сина) */
}
/* Без опис под темата - Зоф побара да пробаме без него (17.09.2026);
 * елементот останува во маркапот, само скриен. */
.tv-trending-desc { display: none; }
.tv-trending-desc-old {
    /* Точните параметри што ги прати Зоф (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: var(--tv-text-muted);
    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 var(--tv-border);
    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 var(--tv-border);
    color: var(--tv-text-main);
}
/* .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 11px;
    border-bottom: 1px solid var(--tv-border);
}
/* Категоријата премести се од вертикална пилула (лево од целата
 * колона) во мало хоризонтално "облаче" внатре во meta редот на
 * секоја статија - секогаш исто светло сино, без разлика на
 * категоријата (Зоф побара 18.09.2026). */
.tv-latest-body { min-width: 0; flex: 1 1 auto; }
.tv-latest-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    row-gap: 4px;
    font-family: 'PT Sans', sans-serif;
    font-size: 12px;
    color: var(--tv-text-muted);
    margin-bottom: 4px;
}
.tv-latest-cat {
    flex: 0 0 auto;
    background: var(--tv-blue-tint);
    color: var(--tv-text-main);
    font-size: 11px;
    font-weight: 400;
    font-family: 'Exo 2', sans-serif;
    letter-spacing: .02em;
    padding: 2px 8px;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
}
.tv-latest-cat:hover { background: var(--tv-blue-tint-hover); }
.tv-latest-meta img { width: 15px; height: 15px; border-radius: 4px; }
/* Останува сина, само не болд (Зоф побара 16.09.2026). */
.tv-latest-meta .tv-source { color: var(--tv-blue); font-weight: 400; }
.tv-latest-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* фиксна висина (3 x line-height, Зоф побара помал фонт и 3
     * реда наместо 2, 18.09.2026), без разлика дали насловот
     * реално фаќа помалку редови - потребно за флип-анимацијата
     * подолу да не „скока" во висина кога содржината се менува. */
    height: 57px;
    font-family: 'Exo 2', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: var(--tv-text-main);
    line-height: 19px;
    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, наместо бело заглавие; нова палета 19.09.2026 -
 * побледи тонови + унифициран темно-графитен текст + 3px
 * потемна верзија на истата боја лево, дискретен акцент). */
.tv-cat-head { color: #27313F; }
.tv-cat-head--local { background: #EAF3FB; border-left: 10px solid #B7D6F1; }         /* старо: #e0f2fe */
.tv-cat-head--world { background: #EEF6EF; border-left: 10px solid #C6E1C9; }         /* старо: #dcfce7 */
.tv-cat-head--business { background: #F7F1E3; border-left: 10px solid #E9D9B3; }      /* старо: #fef3c7 */
.tv-cat-head--technology { background: #F1EDFA; border-left: 10px solid #CCBDED; }    /* старо: #ede9fe */
.tv-cat-head--entertainment { background: #FAEEF3; border-left: 10px solid #ECBFD2; } /* старо: #fce7f3 */
.tv-cat-head--sport { background: #EAF7F5; border-left: 10px solid #BEE6E0; }         /* старо: #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: 8px;
    padding: 4px 8px;
    cursor: pointer;
}
/* Самата листа се црта од оперативниот систем - таму светол текст
 * на светла подлога би бил нечитлив, па опциите се темни. */
.tv-latest-filter option { color: var(--tv-text-main); 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;
}

/* ===== ПУЛС (Зоф побара 19.09.2026) =====
 * Мала картичка со 4 живи бројки од системот, под вертикалното
 * мени во левата колона; под 1380px JS ја сели во sidebar-от
 * (data-tv-nav-extra, како плејсментите). Иста "кутија" како
 * .tv-nav-vertical (бело, --tv-border, 8px), Exo 2. Бројките се
 * tabular-nums во фиксна десно-порамнета колона за да стојат во
 * линија една под друга без оглед на бројот цифри; зелената
 * точка "дише" (box-shadow пулс, исклучен кај reduced-motion). */
.tv-pulse {
    background: #fff;
    border: 1px solid var(--tv-border);
    border-radius: 8px;
    overflow: hidden;
    font-family: 'Exo 2', sans-serif;
    color: var(--tv-text-main);
}
/* Лента на врвот (Зоф побара 19.09.2026, со негови бои): светло
 * сива подлога, графитен текст, линија одоздола. Од раб до раб на
 * картичката - затоа падингот лево/десно е тука, не на .tv-pulse. */
/* Лев падинг 30px = .tv-nav-vertical падинг (8) + .tv-nv-link лев
 * падинг (22): иконата стои на истата x-оска како иконите во менито,
 * а со 18px икона + 10px gap насловот паѓа точно под текстовите на
 * ставките (Зоф побара 19.09.2026, "континуитет"). Ако се менува
 * падингот на менито, се менува и ова. */
.tv-pulse-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 10px 30px;
    background: #EEF1F4;
    color: #27313F;
    border-bottom: 1px solid #D9DEE5;
}
.tv-pulse-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
}
.tv-pulse-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: .75; }
.tv-pulse-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tv-text-muted);
}
.tv-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
    animation: tv-pulse-beat 2s ease-out infinite;
}
@keyframes tv-pulse-beat {
    0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); }
    70%  { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .tv-pulse-dot { animation: none; }
}
.tv-pulse-list {
    list-style: none;
    margin: 0;
    /* Истиот лев раб (30px) како лентата погоре. */
    padding: 4px 16px 6px 30px;
}
.tv-pulse-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--tv-border);
}
.tv-pulse-list li:first-child { border-top: 0; }
/* Нежно облаче на ховер (Зоф побара 19.09.2026) - текстот е во
 * data-tip, се црта со ::after НАД редот (под редот кај последниот
 * би го исекол overflow:hidden на картичката). Без прашалник-курсор
 * (Зоф: "дава некој прашалник"). Кратко задоцнување за да не трепка
 * при поминување на курсорот низ листата. */
.tv-pulse-list li { position: relative; cursor: default; }
.tv-pulse-list li::after {
    content: attr(data-tip);
    position: absolute;
    left: 0;
    bottom: calc(100% + 2px);
    z-index: 2;
    width: max-content;
    max-width: 240px;
    padding: 5px 10px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #D9DEE5;
    box-shadow: 0 4px 12px rgba(39, 49, 63, .10);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 400;
    color: #27313F;
    white-space: normal;
    opacity: 0;
    transform: translateY(3px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
.tv-pulse-list li:hover::after {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .12s;
}
.tv-pulse-list strong {
    flex: 0 0 64px;
    text-align: right;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--tv-navy);
}
.tv-pulse-list span {
    font-size: 13px;
    line-height: 1.2;
    color: var(--tv-text-muted);
}
/* Во sidebar-от (преселена под 1380px) растојанието е одоздола,
 * како кај сите sidebar блокови. */
.tv-sidebar .tv-pulse { margin-bottom: 20px; }
.tv-sidebar .tv-breaking { margin-bottom: 20px; }

/* Страница "Во една минута" - средната колона (24.09.2026, второ
 * поминување): лентата во левата колона е отстранета (Зоф побара да
 * се пресели во менито - види .tv-nv-link/.tv-navlink во
 * top-vesti-nav.blade.php). Секоја ставка е слика + наслов + AI-пасус,
 * редови одделени со линија - истиот принцип како
 * .tv-breaking-list/.tv-pulse-list (не грид од стандардни картички,
 * содржината е сумарен пасус, не excerpt). */
/* Насловот на лентата е двореден (Зоф побара 24.09.2026): главен наслов
 * + ситна белешка дека е AI-генерирано, во истата темна .tv-lenta лента
 * како кај другите секции - само вертикален stack наместо еден ред. */
.tv-digest-head { align-items: flex-start; }
.tv-digest-head-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tv-digest-head-title small {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, .65);
}
.tv-digest-list { display: flex; flex-direction: column; }
.tv-digest-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-top: 1px solid var(--tv-border);
    text-decoration: none;
    color: inherit;
}
.tv-digest-item:first-child { border-top: 0; }
.tv-digest-rank {
    flex: 0 0 24px;
    font-family: 'Exo 2', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tv-blue);
}
/* Слика + извор во иста колона, вертикално - "изворот под тамбнеилот"
 * (Зоф побара 24.09.2026, трето поминување), не веќе до неа. */
.tv-digest-media {
    flex: 0 0 120px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.tv-digest-thumb { display: block; }
.tv-digest-thumb img {
    width: 120px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    background: #eef2ff;
}
.tv-digest-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Ист favicon+црвено стил како .tv-meta во стандардните картички
 * (top-vesti-items.blade.php) - Зоф побара континуитет со останатиот
 * сајт, 24.09.2026. */
.tv-digest-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'PT Sans', sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: var(--tv-text-muted);
}
.tv-digest-meta img { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }
.tv-digest-meta .tv-source {
    color: var(--tv-brand-red);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tv-digest-title {
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    color: var(--tv-text-main);
}
.tv-digest-item:hover .tv-digest-title { color: var(--tv-blue); }
.tv-digest-summary {
    font-family: 'PT Sans', sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: var(--tv-text-muted);
}
@media (max-width: 560px) {
    .tv-digest-item { gap: 10px; padding: 14px 16px; }
    .tv-digest-media { flex-basis: 88px; }
    .tv-digest-thumb img { width: 88px; height: 66px; }
}
.tv-sidebar .tv-foryou { margin-bottom: 20px; }

/* ===== САМО ЗА ТЕБЕ (Зоф побара 23.09.2026) =====
 * Темите веќе следени во "Мои вести" + бројот на статии за секоја
 * во последните 24 часа (top-vesti.js). Иста кутија/лента/лев раб
 * (30px) како .tv-pulse - иста "фамилија" картички во левата колона.
 * [hidden] на самиот елемент додека JS не утврди дека има барем
 * една следена тема со count > 0. */
.tv-foryou {
    background: #fff;
    border: 1px solid var(--tv-border);
    border-radius: 8px;
    overflow: hidden;
    font-family: 'Exo 2', sans-serif;
    color: var(--tv-text-main);
}
/* Сега <a> (Зоф побара 23.09.2026: клик на лентата да носи на "Мои
 * теми") - text-decoration/cursor тука, hover малку потемна подлога
 * (истата логика како .tv-foryou-list a:hover подолу). */
.tv-foryou-head {
    display: flex;
    align-items: center;
    padding: 10px 16px 10px 30px;
    background: #EEF1F4;
    color: #27313F;
    border-bottom: 1px solid #D9DEE5;
    text-decoration: none;
    cursor: pointer;
}
.tv-foryou-head:hover { background: #E4E9EF; }
.tv-foryou-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
}
.tv-foryou-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: .75; }
.tv-foryou-list {
    list-style: none;
    margin: 0;
    padding: 4px 16px 6px 30px;
}
.tv-foryou-list li { border-top: 1px solid var(--tv-border); }
.tv-foryou-list li:first-child { border-top: 0; }
/* "Сите мои теми" (Зоф побара 23.09.2026) - збирен ред секогаш прв,
 * задебелено име + линија под неа за да се одвои од темите поединечно. */
.tv-foryou-all { border-bottom: 1px solid var(--tv-border); }
.tv-foryou-all .tv-foryou-name { font-weight: 600; }
.tv-foryou-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    text-decoration: none;
    color: inherit;
}
.tv-foryou-name {
    font-size: 15px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tv-foryou-list a:hover .tv-foryou-name {
    color: var(--tv-navy);
    text-decoration: underline;
}
.tv-foryou-count {
    flex: 0 0 auto;
    min-width: 20px;
    text-align: center;
    padding: 2px 7px;
    border-radius: 999px;
    background: #EEF1F4;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--tv-navy);
}
/* Скелет-ред (JS откриено веднаш, пред fetch-от, за да не скока
 * "Пулс" под неа откако ќе пристигне мрежниот одговор). */
.tv-foryou-loading {
    display: block;
    padding: 9px 0;
    font-size: 13px;
    color: var(--tv-text-muted);
}

/* ===== BREAKING NEWS (Зоф побара 23.09.2026) =====
 * Теми кај кои бројот извори нагло расте во последниот час
 * (App\Services\BreakingNewsService) - НЕ "најчитани". Иста кутија/
 * лента/лев раб (30px) како .tv-pulse/.tv-foryou - иста "фамилија"
 * картички. За разлика од .tv-foryou нема [hidden]/JS - чисто
 * серверски, @if во blade-от целосно ја испушта кутијата кога нема
 * ниту еден ред (нема празна картичка). Точка со боја (не бројка)
 * го сигнализира интензитетот: црвено >=6, портокалово >=4, зелено
 * останатото (>=2, помалку се третира како шум и не влегува тука). */
.tv-breaking {
    background: #fff;
    border: 1px solid var(--tv-border);
    border-radius: 8px;
    overflow: hidden;
    font-family: 'Exo 2', sans-serif;
    color: var(--tv-text-main);
}
.tv-breaking-head {
    display: flex;
    align-items: center;
    padding: 10px 16px 10px 30px;
    background: #EEF1F4;
    color: #27313F;
    border-bottom: 1px solid #D9DEE5;
}
.tv-breaking-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
}
.tv-breaking-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: .75; }
.tv-breaking-list {
    list-style: none;
    margin: 0;
    padding: 4px 16px 6px 30px;
}
.tv-breaking-list li { border-top: 1px solid var(--tv-border); }
.tv-breaking-list li:first-child { border-top: 0; }
.tv-breaking-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    text-decoration: none;
    color: inherit;
}
.tv-breaking-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 5px;
}
.tv-breaking-dot--red { background: #DC2626; }
.tv-breaking-dot--orange { background: #EA580C; }
.tv-breaking-dot--green { background: #16A34A; }
.tv-breaking-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.tv-breaking-name {
    font-size: 15px;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.tv-breaking-item:hover .tv-breaking-name {
    color: var(--tv-navy);
    text-decoration: underline;
}
.tv-breaking-meta {
    font-size: 12px;
    line-height: 1.2;
    color: var(--tv-text-muted);
}

/* ===== МОИ ВЕСТИ (Зоф, 19.09.2026) =====
 * Следени теми - картичка над Пулс во левата колона, иста кутија/лента/
 * лев раб од 30px. Целата содржина ја црта JS (top-vesti.js, дел "Мои
 * вести"); [hidden] важи и врз display:flex правилата подолу. */
.tv-mynews {
    background: #fff;
    border: 1px solid var(--tv-border);
    border-radius: 8px;
    overflow: visible; /* autocomplete листата излегува под картичката */
    font-family: 'Exo 2', sans-serif;
    color: var(--tv-text-main);
}
.tv-mynews [hidden] { display: none !important; }
.tv-mynews-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px 10px 30px;
    background: #EEF1F4;
    color: #27313F;
    border-bottom: 1px solid #D9DEE5;
    border-radius: 8px 8px 0 0;
}
.tv-mynews-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
}
.tv-mynews-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: .75; }
/* "+ Додај своја тема" - копче-пилула со син бордер и мала "комета"
 * (сјаен лак) што постојано патува по работ, за да сугерира дека
 * треба да се кликне (Зоф, 21.09.2026). Бордерот е статичен и
 * секогаш видлив; кометата е дополнителен движечки highlight преку
 * ::before со conic-gradient + mask "исечи го внатрешното". */
.tv-mynews-add {
    position: relative;
    isolation: isolate;
    flex: 0 0 auto;
    padding: 4px 10px;
    border: 1px solid rgba(29, 111, 214, .45);
    border-radius: 14px;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: #1d6fd6;
    cursor: pointer;
    white-space: nowrap;
}
.tv-mynews-add:hover { background: #fff; border-color: #1d6fd6; }
.tv-mynews-add::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--tv-comet-angle, 0deg), transparent 0deg, transparent 300deg, #eaf3fb 336deg, #7ec8ff 350deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: tv-mynews-comet 2.6s linear infinite;
    pointer-events: none;
}
@property --tv-comet-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@keyframes tv-mynews-comet {
    to { --tv-comet-angle: 360deg; }
}
/* "+" и "×" поголеми од текстот до нив (Зоф, 19.09.2026). */
.tv-mynews-plus { font-size: 17px; font-weight: 600; line-height: 1; vertical-align: -1px; margin-right: 1px; }
.tv-mynews-add[disabled] { color: var(--tv-text-muted); cursor: default; background: transparent; border-color: transparent; }
.tv-mynews-add[disabled]::before { display: none; }
/* Полето за нова тема + autocomplete под него. */
.tv-mynews-form { position: relative; padding: 10px 16px 2px 30px; }
.tv-mynews-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid #D9DEE5;
    border-radius: 6px;
    font: inherit;
    font-size: 14px;
    color: var(--tv-text-main);
    background: #fff;
    outline: none;
}
.tv-mynews-input:focus { border-color: var(--tv-blue); box-shadow: 0 0 0 2px var(--tv-blue-tint); }
.tv-mynews-suggest {
    position: absolute;
    left: 30px;
    right: 16px;
    top: calc(100% - 2px);
    z-index: 5;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #D9DEE5;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(39, 49, 63, .12);
    max-height: 240px;
    overflow-y: auto;
}
.tv-mynews-suggest li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
}
.tv-mynews-suggest li:hover,
.tv-mynews-suggest li.is-active { background: var(--tv-bg-page); }
.tv-mynews-suggest li small { font-size: 11px; color: var(--tv-text-muted); font-variant-numeric: tabular-nums; }
.tv-mynews-suggest li.is-new { color: #1d6fd6; }
/* Чипови - следените теми. Бројчето = нови приказни од последното
 * отворање на темата (JS го смета). × = престани да следиш. */
.tv-mynews-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 16px 4px 30px;
}
.tv-mynews-chips:empty { display: none; }
/* Чипот е ФИЛТЕР (Зоф, 19.09.2026): клик на текстот филтрира feed-от,
 * × престанува да следи. Прв чип "Сите". Активниот е полн син. */
.tv-mynews-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 3px 2px 10px;
    border-radius: 999px;
    background: var(--tv-blue-tint);
    color: #1d6fd6;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
}
.tv-mynews-chip--all { padding-right: 10px; }
.tv-mynews-chip-label {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tv-mynews-chip:hover { background: var(--tv-blue-tint-hover); }
.tv-mynews-chip.is-active { background: #1d6fd6; color: #fff; }
.tv-mynews-chip.is-active .tv-mynews-badge { background: #fff; color: #1d6fd6; }
.tv-mynews-chip.is-active .tv-mynews-remove { color: #fff; }
.tv-mynews-chip.is-active .tv-mynews-remove:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.tv-mynews-badge {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--tv-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.tv-mynews-remove {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #1d6fd6;
    font: inherit;
    font-size: 19px;
    line-height: 20px;
    cursor: pointer;
    opacity: .6;
}
.tv-mynews-remove:hover { opacity: 1; background: #fff; color: var(--tv-brand-red); }
/* Приказните - до 6, најнови прво, една по кластер. */
.tv-mynews-list {
    list-style: none;
    margin: 0;
    padding: 4px 16px 6px 30px;
}
.tv-mynews-list:empty { display: none; }
.tv-mynews-list li { padding: 8px 0; border-top: 1px solid var(--tv-border); }
.tv-mynews-list li:first-child { border-top: 0; }
.tv-mynews-item-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* 14px / 400 / 18px (Зоф, 19.09.2026). */
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: var(--tv-text-main);
    text-decoration: none;
}
.tv-mynews-item-title:hover { color: #1d6fd6; text-decoration: none; }
.tv-mynews-item-meta {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--tv-text-muted);
}
.tv-mynews-item-meta a { color: inherit; text-decoration: none; }
/* Изворот во стандардната сина, како .tv-latest-meta .tv-source. */
.tv-mynews-item-source { color: var(--tv-blue); }

/* ===== "Мои вести" како страница (средна колона, 19.09.2026) =====
 * Истиот виџет (класи/JS), само поширок и без компактната листа -
 * под него feed со стандардните .tv-item картички. */
.tv-mynews--page .tv-mynews-list { display: none !important; }
/* Лентата како кај категориите (.tv-section-head: 19px / 400 / 14px 20px);
 * и "+ Следи тема" во истата големина (Зоф, 20.09.2026). */
.tv-mynews--page .tv-mynews-head {
    padding: 14px 20px;
    /* Темна тегет лента како .tv-lenta, без икона (Зоф, 20.09.2026). */
    background: var(--tv-navy);
    color: #fff;
    border-bottom: none;
}
.tv-mynews--page .tv-mynews-title { font-size: 19px; font-weight: 400; color: #fff; }
.tv-mynews--page .tv-mynews-icon { display: none; }
.tv-mynews--page .tv-mynews-add { font-size: 19px; font-weight: 400; padding: 3px 12px; color: #fff; border-color: rgba(126, 200, 255, .5); }
.tv-mynews--page .tv-mynews-add:hover { background: rgba(255, 255, 255, .12); border-color: #7ec8ff; }
.tv-mynews--page .tv-mynews-add[disabled] { color: rgba(255, 255, 255, .55); }
.tv-mynews--page .tv-mynews-plus { font-size: 21px; }
.tv-mynews--page .tv-mynews-note a { color: #1d6fd6; text-decoration: none; }
.tv-mynews--page .tv-mynews-note a:hover { text-decoration: underline; }
.tv-mynews--page .tv-mynews-form,
.tv-mynews--page .tv-mynews-chips,
.tv-mynews--page .tv-mynews-empty,
.tv-mynews--page .tv-mynews-note { padding-left: 20px; }
.tv-mynews--page .tv-mynews-suggest { left: 20px; }
.tv-mynews--page .tv-mynews-chip { font-size: 14px; }
.tv-mynews-feed { margin-top: 16px; }
/* Метата има повеќе делови тука (теми + извори) - нека се прекрши. */
.tv-mynews-feed .tv-meta { flex-wrap: wrap; row-gap: 2px; }
.tv-mynews-feed .tv-item.is-filtered { display: none; }
/* Во метата на картичката: темите (сини) и "+N извори" (сиво). */
.tv-meta .tv-meta-topic { color: #2476D9; }
.tv-meta .tv-meta-more { color: var(--tv-text-muted); text-decoration: none; }
.tv-meta .tv-meta-more:hover { text-decoration: underline; }
.tv-mynews-item-meta a:hover { text-decoration: underline; }
.tv-mynews-item-topic { color: #1d6fd6; }
.tv-mynews-item-more { white-space: nowrap; }
.tv-mynews-empty {
    margin: 0;
    padding: 10px 16px 4px 30px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--tv-text-muted);
}
.tv-mynews-note {
    margin: 0;
    padding: 6px 16px 12px 30px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--tv-text-muted);
}
.tv-mynews-status {
    margin: 0;
    padding: 6px 16px 0 30px;
    font-size: 12px;
    color: var(--tv-brand-red);
}
.tv-sidebar .tv-mynews { margin-bottom: 20px; }

/* Облаче над резултатите од пребарувањето - кажува што НЕ е во
 * опфатот (само последни 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: 80px;
    overflow: hidden;
}
.tv-latest-flip-track {
    display: flex;
    flex-direction: column;
    transition: transform .5s ease-in-out;
}
.tv-latest-flip-item {
    flex: 0 0 80px;
    height: 80px;
    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: 8px;
    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: var(--tv-text-main);
    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: var(--tv-text-muted);
    display: flex;
    gap: 6px;
    align-items: center;
}
.tv-podcast-meta .tv-podcast-channel { color: var(--tv-blue); }

.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 наслов, var(--tv-brand-red), нема 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 инлајн, лесно можеа да се раздвојат со текот на
 * времето (веќе се беше случило на категориската страница - стар
 * #01a0d0 никогаш не доби бело). Секој од нив уште држи сопствени
 * layout својства (padding/border-radius/flex) во својот poseben
 * селектор - .tv-lenta носи само боја/позадина, applied насекаде.
 */
.tv-lenta {
    /* Зоф побара темно тегет наместо црна проѕирност, 19.09.2026. */
    background: var(--tv-navy);
    color: #fff;
}

.tv-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--tv-navy);
    color: var(--tv-border);
    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: var(--tv-blue); text-decoration: underline; }
.tv-navlink-active { color: var(--tv-blue); font-weight: 700; }
/* "Мои вести" во хоризонталното мени (<1380px) - истата сина. */
.tv-navlink-mynews { color: #5aa9f0; }
/*
 * КРИТИЧНО: .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 var(--tv-border);
}
.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: 8px;
    overflow: hidden;
    background: #eef2ff;
}
.tv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Линкот околу сликата (Зоф, 20.09.2026) го пополнува целото поле;
 * градиентите (::after кај featured/banner) не смеат да го фаќаат кликот. */
.tv-thumb-link { display: block; width: 100%; height: 100%; }
.tv-thumb::after { pointer-events: none; }
/* Без слика: крупен favicon на изворот на неутрална подлога (Зоф,
 * 17.09.2026) - наместо празен виолетов правоаголник со текст. */
.tv-thumb-empty img { width: 48px; height: 48px; border-radius: 8px; opacity: .9; }
.tv-thumb-empty {
    background: var(--tv-bg-page);
    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: var(--tv-text-muted);
}
.tv-meta img { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; }
/* Останува црвено, само не болд (Зоф побара 16.09.2026). */
.tv-meta .tv-source { color: var(--tv-brand-red); font-weight: 400; }
/* Изворот како линк (страница на кластер) - ист изглед, подвлечен на ховер. */
a.tv-source { text-decoration: none; }
a.tv-source:hover { text-decoration: underline; }
/* h3 обвивка околу насловот - без сопствен изглед, сè останува на .tv-title. */
.tv-title-h { margin: 0; font: inherit; }
/* Скриен за око, видлив за пребарувачи/читачи на екран (h1). */
.tv-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.tv-title {
    display: block;
    font-family: 'PT Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--tv-text-main);
    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: var(--tv-text-muted);
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Картичка со кластер од само 1 статија (Зоф побара 23.09.2026):
 * "1 вест" не се прикажува (top-vesti-items.blade.php), па екцерптот
 * го зема тој ослободен ред (2 -> 3). Надвор од .tv-cat-block - таму
 * бројот на редови веќе го смета JS (applyCatCardLines, top-vesti.js)
 * според висината на насловот, повисока специфичност секогаш win-ува. */
.tv-item--solo .tv-excerpt { -webkit-line-clamp: 3; }
.tv-sources { font-family: 'PT Sans', sans-serif; font-size: 13px; line-height: 20px; color: var(--tv-text-muted); }
.tv-sources a { color: var(--tv-blue); text-decoration: none; }
.tv-sources a:hover { text-decoration: underline; }
/* Без стандардна виолетова/црвена боја на посетен линк (Зоф
 * пријави дека изворите поминуваат во црвено по клик, 16.09.2026). */
.tv-sources a:visited { color: var(--tv-blue); }
/* "N вести" бројачот - сива, не сина боја како изворите (Зоф
 * побара 16.09.2026, override на .tv-sources a). */
.tv-sources a.tv-sources-count { color: var(--tv-text-muted); }
.tv-sources a.tv-sources-count:visited { color: var(--tv-text-muted); }
.tv-sources a.tv-sources-count:hover { color: var(--tv-blue); }
.tv-empty { padding: 32px 20px; text-align: center; color: var(--tv-text-muted); }

/*
 * Хамбургер мени (Зоф побара 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 var(--tv-border);
    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 var(--tv-border);
    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: var(--tv-text-main);
}
.tv-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tv-menu-list > li { padding: 8px 0; }
/* Ставки само за мобилното хамбургер мени (Пулс, 20.09.2026). */
.tv-menu-mobile-only { display: none; }
.tv-menu-list > li + li { border-top: 1px solid var(--tv-border); }
.tv-menu-list a,
.tv-menu-toggle {
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    color: var(--tv-text-main);
    text-decoration: none;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}
.tv-menu-list a:hover,
.tv-menu-toggle:hover { color: var(--tv-blue); }
.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: var(--tv-text-muted);
}
.tv-menu-sub a { font-size: 14px; font-weight: 400; color: var(--tv-blue); 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: var(--tv-border); }
    .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; }
/* "Мобилна верзија" во хамбургерот е Зофова алатка за преглед од
 * лаптоп - нема смисла на самата мобилна верзија (Зоф побара
 * 19.09.2026), затоа се крие само под 768px. */

@media (max-width: 767px) {
    .tv-page > .tv-layout { display: none; }
    .tv-menu-desktop-tool { 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;
        /* Влезната swipe-анимација поместува хоризонтално - да нема страничен скрол. */
        overflow-x: hidden;
        /* Долното мени е фиксно преку содржината; 56px мени + safe-area
         * (iPhone gesture зона) + малку воздух за последната картичка. */
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
    .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 (ја наследува сината). --- */
    /* Без сенка под header-от (Зоф, 20.09.2026 - "линија со сенка"). */
    .tvm-header { background: #1e2633; }
    .tvm-header-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* 13px горе / 6px долу (Зоф, 20.09.2026: +5 над логото, помалку
         * до првата картичка). */
        padding: 13px 16px 6px;
        color: #65a8df;
    }
    .tvm-logo { display: block; }
    /* Респонзивно лого - помало на тесни телефони (~155-165px на
     * 390px viewport), поголемо на пошироките (~190-210px), логото е
     * 480x135 (omer 3.56:1), па 41vw ги погодува двете точки (Зоф
     * побара 19.09.2026). */
    .tvm-logo img { width: clamp(155px, 41vw, 205px); 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;
        border-radius: 4px;
        outline: none;
    }
    /* Свој accessibility focus прстен само при тастатура/focus-visible
     * (Зоф побара 19.09.2026) - не при обично кликање со глушец/допир. */
    .tvm-header-icons button:focus-visible {
        box-shadow: 0 0 0 2px rgba(101, 168, 223, .6);
    }
    .tvm-icon-search { width: 22px; height: 22px; color: #fff; } /* -20% (беше 27px), Зоф побара 19.09.2026 */
    .tvm-icon-menu { width: 28px; height: 28px; }

    /* --- Feed (index.vue: main grid px-4 grid-cols-1 gap-4) --- */
    .tvm-feed { padding: 8px 16px 0; }
    /* Swipe ефект (v3, 20.09.2026): старата страница избледува при
     * пуштање (останува видлива до новата), новата влегува од правецот
     * на свајпот. Без влечење со прстот. */
    .tvm-feed--leave { transition: opacity .18s ease-out; opacity: .55; }
    .tvm-feed--enter-left { animation: tvm-enter-left .24s ease-out both; }
    .tvm-feed--enter-right { animation: tvm-enter-right .24s ease-out both; }
    @keyframes tvm-enter-left { from { opacity: 0; transform: translate3d(36px, 0, 0); } to { opacity: 1; transform: none; } }
    @keyframes tvm-enter-right { from { opacity: 0; transform: translate3d(-36px, 0, 0); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) {
        .tvm-feed--enter-left, .tvm-feed--enter-right { animation: none; }
    }
    /* 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; text-align: center; }
    .tvm-ad.tv-ad-filled { margin-bottom: 16px; }
    /* Реклами по центар, не по лево (Зоф побара 19.09.2026) - Revive-от
     * враќа фиксна ширина (пр. 320px) во контејнер широк колку картичката. */
    .tvm-ad ins, .tvm-ad img, .tvm-ad iframe, .tvm-ad a { display: block; margin: 0 auto; }

    /* <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: 380px; border-radius: 8px; overflow: hidden; } /* 400 -> 380 (Зоф, 20.09.2026) */
    .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; }

    /* "Во тренд" на мобилна почетна (Зоф побара 19.09.2026) - истиот
     * реден-број+стрелка стил како десктопскиот sidebar виџет. */
    .tvm-trending { margin: 8px 0 20px; border-radius: 8px; overflow: hidden; }
    /* "Лента" наслов - сина, не црвена (Зоф побара 19.09.2026: се
     * мешаше со логото) и не темно-сина/навy (.tv-mobile.dark ја носи
     * истата боја како позадина на страницата, ќе се губеше). */
    .tvm-trending-head { margin: 0; padding: 10px 16px 10px 22px; font-size: 18px; line-height: 1.4; font-weight: 400; background: #01a0d0; color: #fff; }
    .tvm-trending-list { list-style: none; margin: 0; padding: 0 16px; background: #fff; }
    .tvm-trending-item { display: flex; align-items: center; gap: 8px; padding: 10px 0; text-decoration: none; color: inherit; border-bottom: 1px solid #e5e7eb; }
    .tvm-trending-list li:last-child .tvm-trending-item { border-bottom: 0; }
    /* Фиксна ширина/десно порамнета бројка (Зоф побара воедначен
     * размак 19.09.2026) - "1" е потесна цифра од "2-5" во фонтот,
     * па без фиксна ширина стрелката испаѓаше поблиску до неа. */
    .tvm-trending-rank { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
    .tvm-trending-num { flex: 0 0 14px; width: 14px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 300; font-size: 16px; line-height: 1; color: #787878; }
    .tvm-trending-move--up { flex: 0 0 auto; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid #01a0d0; }
    .tvm-trending-move--down { flex: 0 0 auto; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #b51c20; }
    .tvm-trending-move--same { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; }
    .tvm-trending-title { flex: 1 1 auto; min-width: 0; font-size: 16px; line-height: 22px; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    /* Заглавие на страница (барај / извор / најнови со филтер) -
     * рамката од старите десктоп заглавија (border primary-dark
     * rounded-lg px-4 py-2, Exo 2 text-xl, сино). */
    /* Лента на страница (Најнови вести, Поткасти, Барај, извор) - темна
     * тегет како лентите на десктоп (.tv-lenta), бел текст (Зоф,
     * 20.09.2026: "во склад со целиот сајт"); дотогаш беше сина рамка
     * со сино писмо. */
    .tvm-page-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: #1D2735;
        border-radius: 8px;
        padding: 10px 16px;
        font-size: 18px;
        line-height: 1.4;
        font-weight: 400;
        color: #fff;
    }
    .tvm-page-head select {
        font: inherit;
        font-size: 15px;
        color: #fff;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .45);
        border-radius: 6px;
        padding: 4px 8px;
        max-width: 50%;
    }
    .tvm-page-head select option { color: #1e2633; background: #fff; }
    .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; }
    /* Пулс во хамбургер менито (само мобилен). */
    .tv-menu-mobile-only { display: block; }
    .tv-menu-pulse-live { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #787878; vertical-align: middle; }
    .tv-menu-pulse-list li { padding: 6px 0; font-size: 14px; line-height: 1.35; }
    .tv-menu-pulse-list strong { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 4px; }
    .tv-mobile.dark .tv-menu-pulse-live { color: #9ca3af; }
    /* "Мои вести" на мобилен (20.09.2026): виџетот е истиот како на
     * десктоп (споделени .tv-mynews правила), тука само лента во бојата
     * на header-от и без 30px лев раб. */
    .tv-mynews--mobile { margin-bottom: 16px; }
    .tv-mynews--mobile .tv-mynews-head { padding: 12px 16px; background: #1e2633; color: #fff; border-bottom: none; }
    .tv-mynews--mobile .tv-mynews-title { font-size: 18px; font-weight: 400; color: #fff; }
    .tv-mynews--mobile .tv-mynews-add { color: #fff; font-size: 15px; border-color: rgba(126, 200, 255, .5); }
    .tv-mynews--mobile .tv-mynews-add:hover { background: rgba(255, 255, 255, .12); border-color: #7ec8ff; }
    .tv-mynews--mobile .tv-mynews-list { display: none !important; }
    .tv-mynews--mobile .tv-mynews-form,
    .tv-mynews--mobile .tv-mynews-chips,
    .tv-mynews--mobile .tv-mynews-empty,
    .tv-mynews--mobile .tv-mynews-note { padding-left: 16px; }
    .tv-mynews--mobile .tv-mynews-suggest { left: 16px; }
    .tv-mynews--mobile .tv-mynews-chip { font-size: 14px; line-height: 22px; }
    .tv-mynews--mobile .tv-mynews-remove { width: 24px; height: 24px; line-height: 24px; }
    .tvm-mynews-topics { margin-top: 6px; font-size: 13px; color: #2476D9; font-family: 'Exo 2', sans-serif; }
    .tv-mynews-feed > [data-tv-topics] { margin-bottom: 16px; }
    .tv-mynews-feed > [data-tv-topics].is-filtered { display: none; }
    .tv-mobile.dark .tv-mynews--mobile { background: #1e2633; border-color: #3f4c5c; color: #e4e4e7; }
    .tv-mobile.dark .tv-mynews--mobile .tv-mynews-head { background: #131a24; }
    .tv-mobile.dark .tv-mynews--mobile .tv-mynews-input { background: #1e2633; color: #e4e4e7; border-color: #3f4c5c; }
    .tv-mobile.dark .tv-mynews--mobile .tv-mynews-suggest { background: #1e2633; border-color: #3f4c5c; color: #e4e4e7; }
    .tv-mobile.dark .tv-mynews--mobile .tv-mynews-suggest li:hover { background: #2a3442; }
    .tv-mobile.dark .tv-mynews--mobile .tv-mynews-empty,
    .tv-mobile.dark .tv-mynews--mobile .tv-mynews-note { color: #9ca3af; }

    /* Поткасти - една колона, 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; скриено додека се скрола. --- */
    /* Долно мени v2 (Зоф, 20.09.2026): секогаш видливо, темно како
     * header-от, 56px + safe-area, хоризонтално скролање без видлив
     * scrollbar, пилули со 44px touch-висина. */
    .tvm-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #1e2633;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, .18);
        z-index: 10;
    }
    /* Мал фејд кон темната боја на двата краја (Зоф, 20.09.2026) -
     * покажува дека лентата продолжува. Над листата, не фаќа допир. */
    .tvm-bottom::before,
    .tvm-bottom::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: env(safe-area-inset-bottom, 0px);
        width: 28px;
        pointer-events: none;
        z-index: 1;
    }
    .tvm-bottom::before { left: 0; background: linear-gradient(to right, #1e2633, rgba(30, 38, 51, 0)); }
    .tvm-bottom::after { right: 0; background: linear-gradient(to left, #1e2633, rgba(30, 38, 51, 0)); }
    .tvm-bottom-list {
        list-style: none;
        margin: 0;
        /* 44px (беше 56) - Зоф: превисок, 20.09.2026. Пилулата и
         * понатаму има 44px touch-висина = целата лента. */
        padding: 0 12px;
        height: 44px;
        display: flex;
        align-items: center;
        gap: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        font-family: 'Exo 2', sans-serif;
        font-stretch: normal;
        font-variation-settings: normal;
    }
    .tvm-bottom-list::-webkit-scrollbar { display: none; }
    .tvm-bottom-list li { flex: 0 0 auto; display: flex; align-items: center; }
    /* Touch-полето останува 44px (целата висина на <a>), а видливата
     * пилула е 32px (25% пониска, Зоф 20.09.2026): проѕирни горна/долна
     * рамка од 6px + background-clip:padding-box. Радиусот на пилулата е
     * 4px како насекаде на сајтот (надворешниот 10px минус рамката). */
    /* .tv-mobile префикс задолжително: `.tv-mobile a { color: inherit }`
     * има поголема специфичност од самата класа, па во светла тема
     * текстот наследуваше темна боја врз темното мени и не се читаше
     * (Зоф, 20.09.2026). */
    .tv-mobile .tvm-bottom-link {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 44px;
        padding: 0 10px;
        /* 8px рамки => видлива пилула 28px (Зоф, 20.09.2026, трето
         * намалување); надворешен радиус 12 = 4px внатрешен. */
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-radius: 12px;
        background-clip: padding-box;
        font-size: 15px;
        line-height: 1;
        font-weight: 400;
        color: rgba(255, 255, 255, .8);
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
    }
    .tvm-bottom-link svg { width: 16px; height: 16px; flex-shrink: 0; }
    /* background-color, НЕ background: shorthand-от го ресетира
     * background-clip и пилулата се протега на цели 44px (така
     * изгледаше на телефон, 20.09.2026). */
    .tv-mobile .tvm-bottom-link.is-active { background-color: #2476D9; color: #fff; }
    /* Најнови = црвен акцент (како на десктоп), Мои вести = сина/bookmark;
     * неактивни дискретно, активни како обична пилула во своја боја. */
    /* Неактивните се сите иста светло-сива; боја само кога се избрани:
     * Најнови -> црвена, Мои вести и категориите -> сина (Зоф, 20.09.2026). */
    .tv-mobile .tvm-bottom-link--latest.is-active { background-color: #b51c20; color: #fff; }

    /* "ново" копчето (LatestArticlesBtn.vue) е тргнато 20.09.2026 -
     * Најнови вести е во долното мени. */

    /* Назад кон врв (BackToTop.vue): fixed bottom-[110px] right-4
     * p-2 rounded-full border border-primary-dark shadow-lg, само
     * кога scrollY > 300. */
    .tvm-top {
        position: fixed;
        bottom: calc(106px + env(safe-area-inset-bottom, 0px));
        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-trending-list { background: #1e2633; }
    .tv-mobile.dark .tvm-trending-item { border-bottom-color: #3f4c5c; color: #e4e4e7; }
    .tv-mobile.dark .tvm-trending-num { color: #9ca3af; }
    .tv-mobile.dark .tvm-trending-move--same { background: #22c55e; }
    .tv-mobile.dark .tvm-latest-empty { color: #e4e4e7; }
    /* Во темната тема тегетот се слева со позадината - малку посветла лента. */
    .tv-mobile.dark .tvm-page-head { background: #2b3648; }
    .tv-mobile.dark .tvm-page-head select option { background: #1e2633; color: #fff; }
    .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: #131a24; }
    .tv-mobile.dark .tvm-bottom::before { background: linear-gradient(to right, #131a24, rgba(19, 26, 36, 0)); }
    .tv-mobile.dark .tvm-bottom::after { background: linear-gradient(to left, #131a24, rgba(19, 26, 36, 0)); }
    .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; }
}