:root {
                --primary-color: #B80000;
                --primary-dark: #B80000;
                --primary-light: #B80000;
                --primary-soft: #B80000;
    
                --font-primary: 'Noto Serif Bengali', 'SolaimanLipi', serif;
                --font-heading: 'Noto Serif Bengali', 'SolaimanLipi', serif;
                --font-base-size: 16px;
                --font-line-height: 1.6;
                --font-heading-weight: 700;
                --font-article-size: 18px;
                --font-article-line-height: 1.8;
                --font-letter-spacing: normal;
            }
    
            html, body {
                max-width: 100%;
                overflow-x: clip;
            }
            /* 100% Universal Dynamic Font Override across Frontend Site */
            html, body, div, p, span, h1, h2, h3, h4, h5, h6, a, li, input, select, textarea, button, td, th, label, small, b, strong, article, section, header, nav, footer,
            [style*="font-family"], [style*="SolaimanLipi"], [style*="solaiman-lipi"], .font-\[\'SolaimanLipi\'\] {
                font-family: var(--font-primary) !important;
            }
    
            h1, h2, h3, h4, h5, h6, .news-title, .lead-title, .heading-font,
            h1[style*="font-family"], h2[style*="font-family"], h3[style*="font-family"], 
            h4[style*="font-family"], h5[style*="font-family"], h6[style*="font-family"] {
                font-family: var(--font-heading) !important;
                font-weight: var(--font-heading-weight);
            }
    
            .news-content, .news-content p, .news-content div, .news-content span, .news-content blockquote {
                font-family: var(--font-primary) !important;
                font-size: var(--font-article-size) !important;
                line-height: var(--font-article-line-height) !important;
            }
    
            /* ===== 100% ADVANCED DYNAMIC COLOR ENGINE OVERRIDES ===== */
            nav.bg-\[\var(--primary-soft)\], nav.bg-\[\var(--primary-soft)\], nav.bg-emerald-100, .bg-\[\var(--primary-soft)\], .bg-\[\var(--primary-soft)\] {
                background-color: var(--primary-light) !important;
            }
    
            .bg-\[\var(--primary-color)\], .bg-emerald-600, .bg-emerald-700,
            [style*="background-color: var(--primary-color)"], [style*="background-color:var(--primary-color)"], 
            [style*="background: var(--primary-color)"], [style*="background:var(--primary-color)"],
            footer.bg-\[\var(--primary-color)\], .agami-sec-title, .sidebar-widget-head, .sidebar-widget-green-head, .type6-block-head-1 {
                background-color: var(--primary-color) !important;
            }
    
            .creativeDesign_cat02, 
            [style*="linear-gradient(135deg, var(--primary-color)"], 
            [style*="linear-gradient(135deg,var(--primary-color)"] {
                background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
            }
    
            .map-area {
                background: var(--primary-soft) !important;
                border-color: var(--primary-light) !important;
            }
    
            .bg-\[\var(--primary-dark)\], .bg-\[\#006425\], .bg-\[\#1b4332\],
            footer .bg-\[\var(--primary-dark)\], [style*="background-color: var(--primary-dark)"], [style*="background: var(--primary-dark)"] {
                background-color: var(--primary-dark) !important;
            }
    
            footer {
                border-top-color: var(--primary-dark) !important;
            }
    
            .text-\[\var(--primary-color)\], .text-\[\var(--primary-dark)\], .text-\[\var(--primary-color)\], 
            .text-emerald-500, .text-emerald-600, .text-emerald-700, .text-emerald-800,
            .text-green-600, .text-green-700, .text-[var(--primary-dark)],
            [style*="color: var(--primary-color)"], [style*="color:var(--primary-color)"], .agami-sec-more {
                color: var(--primary-color) !important;
            }
    
            /* Top Admin Bar Accents */
            #wp-style-admin-bar {
                border-bottom-color: var(--primary-color) !important;
            }
            #wp-style-admin-bar i.text-emerald-400,
            #wp-style-admin-bar a.hover\:text-emerald-400:hover,
            #wp-style-admin-bar button.group-hover\:text-emerald-400:hover {
                color: var(--primary-color) !important;
            }
    
            .border-\[\var(--primary-color)\], .border-\[\var(--primary-dark)\], .border-emerald-500, .border-emerald-600, .border-emerald-700,
            [style*="border-color: var(--primary-color)"], [style*="border-color:var(--primary-color)"], .agami-sec-head {
                border-color: var(--primary-color) !important;
            }
    
            .agami-sec-title::after {
                background-color: var(--primary-color) !important;
            }
    
            .type1-header {
                background: linear-gradient(90deg, var(--primary-light) 0%, var(--primary-soft) 50%, var(--primary-light) 100%) !important;
                border-color: var(--primary-light) !important;
            }
            .type1-header-title {
                color: var(--primary-dark) !important;
            }
    
            /* Hover States, Group Hovers & Active Elements */
            [class*="hover:bg-emerald"]:hover,
            [class*="hover:bg-green"]:hover,
            [class*="hover:bg-[var(--primary-color)]"]:hover,
            .hover\:bg-\[\var(--primary-color)\]:hover, .hover\:border-\[\var(--primary-color)\]:hover {
                background-color: var(--primary-color) !important;
                border-color: var(--primary-color) !important;
                color: #ffffff !important;
            }
    
            [class*="hover:text-emerald"]:hover,
            [class*="hover:text-green"]:hover,
            [class*="hover:text-[var(--primary-color)]"]:hover,
            .hover\:text-\[\var(--primary-color)\]:hover, .hover\:text-emerald-600:hover, .hover\:text-emerald-700:hover, .hover\:text-[var(--primary-dark)]:hover,
            .group-hover\:text-\[\var(--primary-color)\]:group-hover, .group-hover\:text-emerald-600:group-hover {
                color: var(--primary-color) !important;
            }
    
            /* Form Radio, Checkbox & Active Indicators */
            input[type="radio"]:checked, input[type="checkbox"]:checked {
                accent-color: var(--primary-color) !important;
            }
    
            .bg-emerald-100, .bg-emerald-50, .bg-green-50, .bg-green-50\/50, .bg-emerald-50\/80,
            .hover\:bg-emerald-50:hover, .hover\:bg-emerald-50\/50:hover, .hover\:bg-green-50:hover, .hover\:bg-green-50\/50:hover {
                background-color: var(--primary-soft) !important;
            }
    
            #comment-total-count, span.bg-\[\var(--primary-color)\], .ticker-notice-label {
                background-color: var(--primary-color) !important;
            }
    
            /* ---- Scrollbar ---- */
            ::-webkit-scrollbar { width: 6px; }
            ::-webkit-scrollbar-track { background: #f1f1f1; }
            ::-webkit-scrollbar-thumb { background: var(--primary-color) !important; border-radius: 3px; }
    
            /* ---- Nav active item ---- */
            .nav-item-active {
                background-color: var(--primary-color);
                color: #fff;
                position: relative;
            }
            .nav-item-active::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 3px;
                background: #ff0000;
            }
            .nav-link {
                display: block;
                font-weight: 500;
                position: relative;
                text-transform: uppercase;
                font-size: 17px;
                line-height: 1.5;
                padding: 10px 10px;
                color: #1c1c1c;
                text-decoration: none;
                transition: background 0.15s;
                white-space: nowrap;
            }
            .nav-link:hover {
                background-color: var(--primary-color);
                color: #fff;
            }
            .nav-link.home-link {
                background-color: var(--primary-color);
                color: #fff;
            }
            .nav-link.home-link::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 3px;
                background: #ff0000;
            }
    
            /* ---- Subcategory Dropdown Styling ---- */
            .has-dropdown {
                position: relative;
            }
            .has-dropdown:hover .dropdown-menu {
                display: block;
            }
            .dropdown-menu {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                min-width: 170px;
                background: #ffffff;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                border-top: 3px solid var(--primary-color);
                z-index: 100;
                padding: 4px 0;
                border-radius: 0 0 4px 4px;
            }
            .dropdown-menu a {
                display: block;
                padding: 8px 14px;
                font-size: 15px;
                font-weight: 600;
                color: #1c1c1c;
                text-decoration: none;
                border-bottom: 1px solid #f3f4f6;
                white-space: nowrap;
                transition: all 0.15s ease;
            }
            .dropdown-menu a:last-child {
                border-bottom: none;
            }
            .dropdown-menu a:hover {
                background-color: var(--primary-soft);
                color: var(--primary-color);
                padding-left: 18px;
            }
    
            /* ---- Breaking news ticker ---- */
            .ticker-container {
                position: relative;
                display: flex;
                align-items: center;
                border: 1px solid var(--primary-color);
                background: #fff;
                overflow: hidden;
                height: 38px;
                box-sizing: border-box;
            }
            .breaking-label {
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                z-index: 10;
                background-color: var(--primary-color) !important;
                color: #fff !important;
                font-weight: bold;
                padding: 0 16px 0 12px;
                font-size: 16px;
                white-space: nowrap;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }
            .breaking-label::after {
                content: '';
                position: absolute;
                left: 100%;
                top: 0;
                width: 0;
                height: 0;
                border-top: 36px solid transparent;
                border-left: 16px solid var(--primary-color);
            }
            .ticker-text-wrapper {
                width: 100%;
                height: 100%;
                overflow: hidden;
                white-space: nowrap;
                display: flex;
                align-items: center;
                font-size: 16px;
                color: #111;
            }
            .ticker-text-wrapper marquee {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                line-height: 36px;
            }
            .ticker-item {
                display: inline-flex;
                align-items: center;
                color: #1c1c1c;
                font-weight: 500;
                margin-right: 30px;
                text-decoration: none;
            }
            .ticker-item:hover { color: var(--primary-color); }
    
            /* ---- Social icon circles (top bar) ---- */
            .social-icon {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 28px;
                height: 28px;
                border-radius: 50%;
                color: #fff;
                font-size: 12px;
                transition: opacity 0.2s;
            }
            .social-icon:hover { opacity: 0.8; }
    
            /* ---- Mobile Scrollmenu ---- */
            .scrollmenu {
                background-color: #eff3f4;
                padding-left: 5px;
                overflow-x: auto;
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
                border-bottom: 1px solid #e2e8f0;
                box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.15), 0 2px 4px -2px rgba(0, 0, 0, 0.08);
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollmenu::-webkit-scrollbar {
                display: none;
                width: 0;
                height: 0;
            }
            .scrollmenu ol {
                display: flex;
                align-items: center;
                list-style: none;
                margin: 0;
                padding: 6px 8px;
                gap: 14px;
            }
            .scrollmenu ol li {
                display: inline-block;
                flex-shrink: 0;
            }
            .scrollmenu ol li a {
                display: inline-block;
                color: #2b2b2b;
                font-weight: 700;
                font-size: 15px;
                text-decoration: none;
                transition: color 0.2s;
            }
            .scrollmenu ol li a:hover,
            .scrollmenu ol li a.active-category {
                color: var(--primary-color) !important;
            }
            html.dark .scrollmenu {
                background-color: #0f172a;
                border-color: #1e293b;
                box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.6), 0 2px 5px -2px rgba(0, 0, 0, 0.4);
            }
            html.dark .scrollmenu ol li a {
                color: #e2e8f0;
            }
            html.dark .scrollmenu ol li a:hover,
            html.dark .scrollmenu ol li a.active-category {
                color: var(--primary-light, #38bdf8) !important;
            }
    
            /* ---- Footer ---- */
            footer a:hover { text-decoration: underline; }
    
            /* ---- Marquee ---- */
            marquee { line-height: 1.8; }
    
            /* ---- Category section heading ---- */
            .cat-heading {
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 16px;
                font-weight: 700;
                color: #1c1c1c;
                border-bottom: 2px solid var(--primary-color);
                padding-bottom: 4px;
                margin-bottom: 10px;
            }
            .cat-bar {
                display: inline-block;
                width: 10px;
                height: 20px;
                background: var(--primary-color);
            }
    
            /* ---- Back to top ---- */
            #back-to-top {
                position: fixed;
                right: 20px;
                bottom: 30px;
                width: 38px;
                height: 38px;
                background: var(--primary-color) !important;
                color: #fff;
                font-size: 18px;
                border: none;
                border-radius: 8px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 99;
                opacity: 0;
                pointer-events: none;
                transition: bottom 0.3s ease, opacity 0.3s ease, background 0.3s ease, transform 0.2s ease;
            }
            #back-to-top.show {
                opacity: 0.95;
                pointer-events: auto;
            }
            #back-to-top:hover { opacity: 1; background: var(--primary-dark) !important; transform: translateY(-2px); }
    
            /* When PWA bottom banner is active, push back-to-top button up above banner */
            body.has-pwa-banner #back-to-top,
            body:has(#agami-pwa-install-banner) #back-to-top {
                bottom: 95px !important;
            }
    
            /* ---- Tabs (sidebar) ---- */
            .tab-btn.active {
                background: #fff;
                color: var(--primary-color);
                border-bottom: 2px solid var(--primary-color);
            }
    
            /* Mobile nav & scroll utilities */
            .scrollbar-none::-webkit-scrollbar { display: none !important; }
            .scrollbar-none {
                -ms-overflow-style: none !important;
                scrollbar-width: none !important;
                -webkit-overflow-scrolling: touch;
            }
            @media (max-width: 767px) {
                .nav-scroll {
                    overflow-x: auto;
                    -ms-overflow-style: none;
                    scrollbar-width: none;
                    -webkit-overflow-scrolling: touch;
                }
                .nav-scroll::-webkit-scrollbar { display: none; }
            }
    
            /* Prevent body scroll when mobile drawer is open */
            body.drawer-open {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                width: 100% !important;
                height: 100% !important;
                overflow: hidden !important;
                touch-action: none !important;
                overscroll-behavior: none !important;
            }
            .drawer-content-scroll {
                overflow-y: auto !important;
                overscroll-behavior: contain !important;
                touch-action: pan-y !important;
                -webkit-overflow-scrolling: touch !important;
            }
    
            /* Dropdown */
            .has-dropdown {
                position: relative;
            }
            .has-dropdown:hover > .dropdown-menu { 
                display: block !important; 
            }
            .dropdown-menu {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                min-width: 190px;
                background: #ffffff;
                border: 1px solid #e0e0e0;
                border-top: 3px solid var(--primary-color);
                box-shadow: 0 8px 16px rgba(0,0,0,0.15);
                z-index: 99999;
                padding: 4px 0;
                border-radius: 0 0 4px 4px;
            }
            .dropdown-menu a, .dropdown-menu .dropdown-item-wrapper {
                display: block;
                position: relative;
            }
            .dropdown-menu a {
                padding: 8px 14px;
                font-size: 15px;
                font-weight: 600;
                color: #1c1c1c;
                border-bottom: 1px solid #f0f0f0;
                text-decoration: none;
                white-space: nowrap;
                transition: all 0.15s ease;
            }
            .dropdown-menu a:last-child {
                border-bottom: none;
            }
            .dropdown-menu a:hover {
                background-color: var(--primary-soft);
                color: var(--primary-color);
                padding-left: 18px;
            }
    
            /* Nested Sub-dropdowns (2nd Level Dropdowns under 'আরও' or parent items) */
            .sub-has-dropdown {
                position: relative;
            }
            .sub-has-dropdown:hover > .sub-dropdown-menu {
                display: block !important;
            }
            .sub-dropdown-menu {
                display: none;
                position: absolute;
                top: 0;
                right: 100%;
                min-width: 180px;
                background: #ffffff;
                border: 1px solid #e0e0e0;
                border-left: 3px solid var(--primary-color);
                box-shadow: 0 8px 16px rgba(0,0,0,0.15);
                z-index: 100000;
                padding: 4px 0;
                border-radius: 4px 0 4px 4px;
            }
            .sub-dropdown-menu a {
                font-size: 14px;
                font-weight: 500;
            }
    
            /* Search bar */
            .search-form input:focus { outline: none; }
            .search-form button { background: var(--primary-color); color: #fff; }
    
            /* Hide Google Translate Banner for clean look */
            .goog-te-banner-frame.skiptranslate { display: none !important; }
            body { top: 0px !important; }
            .goog-text-highlight { background-color: transparent !important; box-shadow: none !important; }
    
            /* ========================================================= */
            /* ===== COMPLETE COMPREHENSIVE DARK MODE ENGINE OVERRIDES ===== */
            /* ========================================================= */
            html.dark body {
                background-color: #0f172a !important;
                color: #f1f5f9 !important;
            }
    
            /* 1. Universal Containers & Cards */
            html.dark .bg-white, 
            html.dark [class*="bg-white"],
            html.dark [style*="background:#fff"],
            html.dark [style*="background: #fff"],
            html.dark [style*="background:#ffffff"],
            html.dark [style*="background: #ffffff"] {
                background-color: #1e293b !important;
                color: #f1f5f9 !important;
                border-color: #334155 !important;
            }
    
            html.dark .bg-\[\#eeeeee\], 
            html.dark .bg-gray-100, 
            html.dark .bg-gray-50,
            html.dark .bg-gray-200,
            html.dark .bg-\[\#f5f5f5\],
            html.dark .bg-\[\#f0f0f0\],
            html.dark .bg-\[\#f9f9f9\],
            html.dark [style*="background:#f5f5f5"],
            html.dark [style*="background: #f5f5f5"],
            html.dark [style*="background:#f9f9f9"],
            html.dark [style*="background: #f9f9f9"],
            html.dark [style*="background:#f0f0f0"],
            html.dark [style*="background: #f0f0f0"] {
                background-color: #0f172a !important;
                color: #f1f5f9 !important;
                border-color: #334155 !important;
            }
    
            html.dark .bg-emerald-50, 
            html.dark .bg-emerald-50\/80, 
            html.dark .bg-emerald-100, 
            html.dark .bg-amber-50, 
            html.dark .bg-amber-50\/80, 
            html.dark .bg-green-50 {
                background-color: #0f172a !important;
                border-color: #334155 !important;
            }
    
            /* 2. Text Colors & Contrast */
            html.dark .text-gray-900, 
            html.dark .text-gray-800, 
            html.dark .text-gray-700, 
            html.dark .text-gray-600,
            html.dark .text-emerald-800,
            html.dark .text-emerald-950,
            html.dark .text-purple-900,
            html.dark .text-amber-950,
            html.dark .text-\[\#1c1c1c\],
            html.dark .text-\[\#111\],
            html.dark .text-\[\#222\],
            html.dark .text-\[\#333\],
            html.dark .text-\[\#555\],
            html.dark .text-\[\#666\],
            html.dark [style*="color:#1c1c1c"],
            html.dark [style*="color: #1c1c1c"],
            html.dark [style*="color:#111"],
            html.dark [style*="color: #111"],
            html.dark [style*="color:#222"],
            html.dark [style*="color: #222"],
            html.dark [style*="color:#333"],
            html.dark [style*="color: #333"],
            html.dark [style*="color:#555"],
            html.dark [style*="color: #555"],
            html.dark [style*="color:#666"],
            html.dark [style*="color: #666"],
            html.dark [style*="color:#2f3640"],
            html.dark [style*="color: #2f3640"] {
                color: #f1f5f9 !important;
            }
    
            html.dark .text-gray-500, 
            html.dark .text-gray-400 {
                color: #94a3b8 !important;
            }
    
            /* 3. Header & Navigation Fixes */
            html.dark header {
                background-color: #1e293b !important;
                border-color: #334155 !important;
            }
    
            nav.sticky {
                background-color: var(--primary-color) !important;
            }
            html.dark nav.sticky,
            html.dark nav {
                background-color: var(--primary-dark, #064e3b) !important;
            }
    
            nav .nav-link,
            html.dark nav .nav-link {
                color: #ffffff !important;
                font-weight: 700 !important;
                background-color: transparent;
            }
    
            nav .nav-link:hover,
            html.dark nav .nav-link:hover {
                background-color: var(--primary-dark, rgba(0,0,0,0.25)) !important;
                color: #ffffff !important;
            }
    
            nav .nav-link.nav-item-active,
            html.dark nav .nav-link.nav-item-active {
                background-color: var(--primary-dark, rgba(0,0,0,0.35)) !important;
                color: #ffffff !important;
            }
    
            html.dark .dropdown-menu,
            html.dark .sub-dropdown-menu {
                background-color: #1e293b !important;
                border-color: #334155 !important;
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
            }
    
            html.dark .dropdown-menu a,
            html.dark .sub-dropdown-menu a {
                color: #f1f5f9 !important;
                border-color: #334155 !important;
            }
    
            html.dark .dropdown-menu a:hover,
            html.dark .sub-dropdown-menu a:hover {
                background-color: #334155 !important;
                color: var(--primary-light) !important;
            }
    
            html.dark input, 
            html.dark select, 
            html.dark textarea {
                background-color: #1e293b !important;
                color: #ffffff !important;
                border-color: #475569 !important;
            }
    
            html.dark .ticker-container {
                background-color: #1e293b !important;
                border-color: var(--primary-dark) !important;
            }
    
            html.dark .ticker-item {
                color: #f1f5f9 !important;
            }
    
            html.dark .ticker-item:hover {
                color: var(--primary-light) !important;
            }
    
            /* 4. Sidebar & Grid Overrides */
            html.dark .card-news,
            html.dark .hero-side-item,
            html.dark .trending-bar,
            html.dark .trending-tag,
            html.dark .type1-lead-box,
            html.dark .type1-side-card,
            html.dark .type1-bottom-card,
            html.dark .type2-col,
            html.dark .type2-list-item,
            html.dark .type3-card-lead,
            html.dark .type3-list-card,
            html.dark .type5-banner-card,
            html.dark .type5-mini-card,
            html.dark .type6-block,
            html.dark .type7-lead-col,
            html.dark .type7-list-col,
            html.dark .sidebar-widget,
            html.dark .sidebar-widget-banner,
            html.dark .sidebar-col > div,
            html.dark .photo-side-item,
            html.dark .video-card {
                background-color: #1e293b !important;
                border-color: #334155 !important;
                color: #f1f5f9 !important;
            }
    
            html.dark .card-title,
            html.dark .hero-side-title,
            html.dark .type1-lead-title,
            html.dark .type1-side-card-title,
            html.dark .type1-bottom-card-title,
            html.dark .type2-list-title,
            html.dark .type3-card-lead-title,
            html.dark .type3-list-title,
            html.dark .type5-banner-title,
            html.dark .type5-mini-title,
            html.dark .sidebar-news-title,
            html.dark .photo-side-title,
            html.dark .video-card-title {
                color: #f1f5f9 !important;
            }
    
            html.dark .hero-side-item:hover,
            html.dark .type2-list-item:hover,
            html.dark .type3-list-card:hover,
            html.dark .sidebar-news-item:hover,
            html.dark .photo-side-item:hover {
                background-color: #334155 !important;
            }
    
            html.dark .sidebar-news-item {
                background-color: transparent !important;
                border-color: #334155 !important;
            }
    
            html.dark .sidebar-tab-bar {
                background-color: #0f172a !important;
                border-color: #334155 !important;
            }
    
            html.dark .stab {
                color: #94a3b8 !important;
                background-color: transparent !important;
            }
    
            html.dark .stab.active {
                background-color: #1e293b !important;
                color: var(--primary-light) !important;
                border-bottom-color: var(--primary-color) !important;
            }
    
            html.dark .sidebar-widget-banner-head {
                background: #334155 !important;
                color: #f1f5f9 !important;
                border-color: #475569 !important;
            }
    
            html.dark .sidebar-widget-green-head,
            html.dark .sidebar-widget-head {
                background-color: var(--primary-color) !important;
                color: #ffffff !important;
            }
    
            html.dark .map-area {
                background-color: #1e293b !important;
                border-color: #334155 !important;
                color: #f1f5f9 !important;
            }
    
            html.dark .type1-header {
                background: #1e293b !important;
                border-color: #334155 !important;
            }
    
            html.dark .type1-header-title {
                color: var(--primary-light) !important;
            }
    
            html.dark .type1-lead-excerpt,
            html.dark .type5-banner-excerpt {
                color: #cbd5e1 !important;
            }
    
            /* 5. Sidebar Widgets Specific Fixes */
            html.dark #sb-widget-en-date, 
            html.dark #sb-widget-bn-date, 
            html.dark #sb-widget-hijri-date {
                color: #f1f5f9 !important;
            }
    
            html.dark #sb-pt-fajr, 
            html.dark #sb-pt-dhuhr, 
            html.dark #sb-pt-asr, 
            html.dark #sb-pt-maghrib, 
            html.dark #sb-pt-isha, 
            html.dark #sb-pt-sehri {
                color: #38bdf8 !important;
            }
    
            html.dark #poll-form-wrapper label {
                background-color: #0f172a !important;
                border-color: #334155 !important;
                color: #f8fafc !important;
            }
    
            html.dark #poll-form-wrapper label:hover {
                background-color: #334155 !important;
            }
    
            html.dark #poll-results-wrapper span {
                color: #f8fafc !important;
            }
    
            html.dark #poll-results-wrapper .bg-gray-100 {
                background-color: #334155 !important;
                border-color: #475569 !important;
            }
    
            /* 6. Single News & Articles Overrides */
            html.dark .news-content,
            html.dark .news-content p,
            html.dark .news-content h2,
            html.dark .news-content h3,
            html.dark .news-content blockquote,
            html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 {
                color: #f1f5f9 !important;
            }
    
            html.dark .news-content blockquote {
                border-left-color: var(--primary-light) !important;
                color: #cbd5e1 !important;
            }
    
            html.dark .border-gray-200, 
            html.dark .border-gray-300, 
            html.dark .border-gray-100,
            html.dark .border-gray-400,
            html.dark .divide-gray-100,
            html.dark .divide-gray-200 {
                border-color: #334155 !important;
            }
            /* Lazy loading images fade-in effect */
            img.lazyload {
                opacity: 0.1;
                transition: opacity 0.4s ease-in-out;
            }
            img.lazyloaded {
                opacity: 1;
            }
    
            /* ===== SKELETON LOADERS FOR ZERO CLS ===== */
            @keyframes skeleton-shimmer {
                0% { background-position: -200% 0; }
                100% { background-position: 200% 0; }
            }
            .agami-skeleton {
                background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%);
                background-size: 200% 100%;
                animation: skeleton-shimmer 1.4s ease infinite;
                border-radius: 4px;
                display: block;
            }
            html.dark .agami-skeleton {
                background: linear-gradient(90deg, #1e293b 25%, #334155 37%, #1e293b 63%);
                background-size: 200% 100%;
            }
            .agami-skeleton-title { height: 20px; margin-bottom: 8px; width: 85%; }
            .agami-skeleton-text { height: 13px; margin-bottom: 6px; width: 95%; }
            .agami-skeleton-img { width: 100%; height: 160px; margin-bottom: 8px; }
            .agami-skeleton-card {
                background: #fff;
                border: 1px solid #e5e7eb;
                border-radius: 4px;
                padding: 10px;
            }
            html.dark .agami-skeleton-card {
                background: #1e293b;
                border-color: #334155;
            }
            .agami-lazy-section {
                min-height: 250px;
                transition: opacity 0.25s ease-in-out;
            }
            .agami-lazy-section.is-hydrated {
                min-height: auto;
            }
            /* SEO-Safe Native CSS Section Lazy Rendering Engine (Zero CLS & 100% Googlebot Crawlable) */
            .hp-lazy-sec {
                content-visibility: auto;
                contain-intrinsic-size: auto 450px;
            }
            /* SEO-Safe Single News Page Instant Rendering Optimization */
            #news-comments-section,
            .related-posts-wrapper,
            .article_readmore_col,
            .single_post_wrapper_block:not(:first-child) {
                content-visibility: auto;
                contain-intrinsic-size: auto 350px;
            }
            .single_post_wrapper_block:not(:first-child) {
                contain-intrinsic-size: auto 800px;
            }

/* ---- extracted style block ---- */

.no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- extracted style block ---- */

/* Dailytopnotch Mobile Header & Drawer Styles */
    .mobile_scroll_bar_row {
        height: 56px !important;
        min-height: 56px !important;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1030 !important;
        background-color: #ffffff !important;
    }

    html.dark .mobile_scroll_bar_row {
        background-color: #18181b !important;
    }
    
    #dark-mode-toggle-mobile {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 2px !important;
    }
    
    #dark-mode-icon-mobile {
        font-size: 22px !important;
        line-height: 1 !important;
        display: inline-block !important;
    }
    
    .mobile_bar {
        background-color: #ffffff !important;
        box-shadow: none !important;
        position: relative !important;
    }
    
    
    
    #mobile-main-header.is-scrolled::before {
        display: none !important;
    }
    
    html.dark #mobile-main-header.is-scrolled::before {
        display: none !important;
    }
    
    #mobile-main-header.smart-hide-top {
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    html.dark .mobile_bar {
        background-color: #18181b !important;
        border-bottom: 1px solid #27272a !important;
    }
    
    .mobile_bar .hamburger,
    .mobile_bar #open_search_mobile {
        font-size: 20px !important;
        color: #222222 !important;
        cursor: pointer;
        text-decoration: none !important;
    }
    
    html.dark .mobile_bar .hamburger,
    html.dark .mobile_bar #open_search_mobile {
        color: #f4f4f5 !important;
    }
    
    .mobile_bar .logo img {
        max-height: 48px !important;
        height: auto !important;
        width: auto !important;
    }
    
    .site-logo-light { display: inline-block !important; }
    .site-logo-dark { display: none !important; }
    
    html.dark .site-logo-light { display: none !important; }
    html.dark .site-logo-dark { display: inline-block !important; }
    
    /* Hide scrollbar for mobile scroll menu */
    .no-scrollbar::-webkit-scrollbar {
        display: none !important;
    }
    
    .no-scrollbar {
        -ms-overflow-style: none !important;  /* IE and Edge */
        scrollbar-width: none !important;  /* Firefox */
    }
    
    /* Off-canvas Sidebar (#PrimeItWorlSidebar) */
    #PrimeItWorlSidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 360px;
        max-width: 90vw;
        height: 100%;
        background-color: #ffffff;
        z-index: 99999;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25);
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform;
        overflow-y: auto;
        overscroll-behavior: contain !important;
        overscroll-behavior-y: contain !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    }
    
    #PrimeItWorlSidebar::-webkit-scrollbar {
        width: 5px !important;
        display: block !important;
    }
    
    #PrimeItWorlSidebar::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.02);
    }
    
    #PrimeItWorlSidebar::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 10px;
    }
    
    #PrimeItWorlSidebar::-webkit-scrollbar-thumb:hover {
        background: var(--primary-color, #a8282b);
    }
    
    html.dark #PrimeItWorlSidebar {
        background-color: #18181b !important;
        color: #f4f4f5 !important;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }
    
    html.dark #PrimeItWorlSidebar::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.02);
    }
    
    html.dark #PrimeItWorlSidebar::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
    }
    
    #PrimeItWorlSidebar.active {
        transform: translateX(0) !important;
        left: 0 !important;
    }
    
    #PrimeItWorlSidebarBackdrop {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 99998;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    #PrimeItWorlSidebarBackdrop.active {
        display: block !important;
        opacity: 1 !important;
    }
    
    .ttarangaNesar_sbhead {
        padding: 14px 16px;
        background-color: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    html.dark .ttarangaNesar_sbhead {
        background-color: #09090b !important;
        border-bottom: 1px solid #27272a !important;
    }
    
    .ttarangaNesar_sbhead .closeBtn {
        font-size: 20px;
        color: #333333;
        text-decoration: none;
    }
    
    html.dark .ttarangaNesar_sbhead .closeBtn {
        color: #f4f4f5 !important;
    }
    
    .ttarangaNesar_sbbody {
        padding: 15px;
    }
    
    .ttarangaNesar_sbnav {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .ttarangaNesar_sbnav > li {
        border-bottom: 1px solid #f0f0f0;
    }
    
    html.dark .ttarangaNesar_sbnav > li {
        border-bottom: 1px solid #27272a;
    }
    
    .ttarangaNesar_sbnav > li > a,
    .ttarangaNesar_sbnav > li > .drawer-nav-row > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 0;
        font-size: 18.5px;
        font-weight: 700;
        color: #222222;
        text-decoration: none;
        transition: color 0.2s ease;
    }
    
    html.dark .ttarangaNesar_sbnav > li > a,
    html.dark .ttarangaNesar_sbnav > li > .drawer-nav-row > a {
        color: #e4e4e7;
    }
    
    .ttarangaNesar_sbnav > li > a:hover,
    .ttarangaNesar_sbnav > li > .drawer-nav-row > a:hover {
        color: var(--primary-color, #a8282b);
    }
    
    .ttarangaNesar_sbnav li a span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .ttarangaNesar_sbnav li a span i {
        margin-right: 10px !important;
        width: 20px !important;
        text-align: center !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
    }
    
    /* Submenu Dropdown & Toggle Button */
    .drawer-dropdown-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 8px 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6b7280;
        transition: color 0.2s ease;
    }
    
    html.dark .drawer-dropdown-btn {
        color: #9ca3af;
    }
    
    .drawer-dropdown-btn i {
        transition: transform 0.25s ease-in-out;
        display: inline-block;
    }
    
    .drawer-dropdown-btn:hover {
        color: var(--primary-color, #a8282b);
    }
    
    .drawer-submenu {
        display: none;
        list-style: none;
        padding: 6px 0 6px 14px;
        margin: 4px 0 8px 6px;
        border-left: 3px solid var(--primary-color, #a8282b);
        background-color: rgba(0, 0, 0, 0.03);
        border-radius: 0 0 6px 6px;
    }
    
    html.dark .drawer-submenu {
        border-left-color: var(--primary-color, #a8282b);
        background-color: rgba(255, 255, 255, 0.04);
    }
    
    .drawer-submenu.show,
    .drawer-submenu.active {
        display: block !important;
    }
    
    .drawer-submenu li {
        border-bottom: none !important;
    }
    
    .drawer-submenu li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 7px 10px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #4b5563 !important;
        text-decoration: none;
        border-bottom: none !important;
        border-radius: 6px;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    
    html.dark .drawer-submenu li a {
        color: #d1d5db !important;
        border-bottom: none !important;
    }
    
    .drawer-submenu li a:hover {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--primary-color, #a8282b) !important;
    }
    
    html.dark .drawer-submenu li a:hover {
        background-color: rgba(255, 255, 255, 0.08);
        color: #ffffff !important;
    }
    
    .rotate-180 {
        transform: rotate(180deg) !important;
    }

/* ---- extracted style block ---- */

/* Dailytopnotch Desktop Header Styles — nav-only sticky on article pages too */
    #desktop-main-header {
        width: 100%;
        font-family: var(--font-primary, 'SolaimanLipi', sans-serif);
        transition: background-color 0.3s ease !important;
        position: relative !important;
        background-color: #ffffff !important;
    }
    
    html.dark #desktop-main-header {
        background-color: #18181b !important;
    }
    
    #desktop-main-header.is-scrolled::before {
        display: none !important;
    }
    
    #desktop-main-header.smart-hide-top {
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    #desktop-main-header .main_bar {
        background-color: #ffffff !important;
        border-bottom: 1px solid #cfcfcf !important;
        padding: 14px 0 !important;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    
    html.dark #desktop-main-header .main_bar {
        background-color: #18181b !important;
        border-bottom: 1px solid #27272a !important;
        color: #f4f4f5 !important;
    }
    
    #desktop-main-header .headerMenuBtn.hamburger,
    #desktop-main-header #open_search {
        font-size: 21px !important;
        color: #222222 !important;
        cursor: pointer;
        transition: color 0.2s ease !important;
        text-decoration: none !important;
    }
    
    html.dark #desktop-main-header .headerMenuBtn.hamburger,
    html.dark #desktop-main-header #open_search {
        color: #f4f4f5 !important;
    }
    
    #desktop-main-header .headerMenuBtn.hamburger:hover,
    #desktop-main-header #open_search:hover {
        color: var(--primary-color, #a8282b) !important;
    }
    
    #desktop-main-header .header-meta-action .date {
        font-size: 16px !important;
        color: #333333 !important;
        font-weight: 500 !important;
        margin-top: 8px !important;
    }
    
    html.dark #desktop-main-header .header-meta-action .date {
        color: #d4d4d8 !important;
    }
    
    #desktop-main-header .logo img {
        max-height: 65px !important;
        height: auto !important;
        width: auto !important;
    }
    
    .site-logo-light { display: inline-block !important; }
    .site-logo-dark { display: none !important; }
    
    html.dark .site-logo-light { display: none !important; }
    html.dark .site-logo-dark { display: inline-block !important; }
    
    #desktop-main-header .header-social-links {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
    }
    
    #desktop-main-header .header-social-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 30px !important;
        height: 30px !important;
        border-radius: 0 !important;
        background-color: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        line-height: 1 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    
    html.dark #desktop-main-header .header-social-icon {
        background-color: #27272a !important;
        border-color: #3f3f46 !important;
    }
    
    #desktop-main-header .header-social-icon:hover {
        border-color: #cbd5e1 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
    }
    
    html.dark #desktop-main-header .header-social-icon:hover {
        border-color: #52525b !important;
    }
    
    #desktop-main-header .header-social-icon svg {
        display: block !important;
        transition: transform 0.2s ease !important;
    }
    
    #desktop-main-header .header-social-icon.twitter svg {
        fill: #111111 !important;
        color: #111111 !important;
    }
    
    html.dark #desktop-main-header .header-social-icon.twitter svg {
        fill: #f4f4f5 !important;
        color: #f4f4f5 !important;
    }
    
    #desktop-main-header .header-social-icon:hover svg {
        transform: scale(1.08) !important;
    }
    
    /* PC Navigation Bar — sticky only */
    .pc_manubar {
        background-color: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.12) !important;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        width: 100%;
        position: sticky !important;
        top: 0 !important;
        z-index: 1030 !important;
    }
    
    html.dark .pc_manubar {
        background-color: #09090b !important;
        border-bottom: 1px solid #18181b !important;
    }
    
    .pc_manubar .main-nav-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    
    .pc_manubar .nav-link-item {
        font-size: 18.5px !important;
        font-weight: 600 !important;
        color: #111111 !important;
        padding: 8px 12px !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        transition: color 0.2s ease, background-color 0.2s ease !important;
    }
    
    html.dark .pc_manubar .nav-link-item {
        color: #f4f4f5 !important;
    }
    
    .pc_manubar .nav-link-item:hover,
    .pc_manubar .nav-link-item.active {
        color: var(--primary-color, #a8282b) !important;
    }
    
    .pc_manubar .dropdown-sub-item {
        font-size: 17.5px !important;
        font-weight: 550 !important;
        line-height: 1.35 !important;
        color: #1e293b !important;
        padding: 7px 16px !important;
        display: block !important;
        text-decoration: none !important;
        transition: background-color 0.2s ease, color 0.2s ease !important;
    }
    
    html.dark .pc_manubar .dropdown-sub-item {
        color: #e2e8f0 !important;
    }
    
    .pc_manubar .dropdown-sub-item:hover {
        background-color: #f1f5f9 !important;
        color: var(--primary-color, #a8282b) !important;
    }
    
    html.dark .pc_manubar .dropdown-sub-item:hover {
        background-color: #334155 !important;
        color: var(--primary-color, #a8282b) !important;
    }

/* ---- extracted style block ---- */

.ad-hb-banner { padding: 8px 20px; }
                            .ad-hb-icon { width: 36px; height: 36px; font-size: 18px; border-radius: 8px; }
                            .ad-hb-badge { font-size: 9px; padding: 1px 6px; margin-bottom: 2px; }
                            .ad-hb-title { font-size: 15px; font-weight: 800; line-height: 1.2; margin: 0; }
                            .ad-hb-btn { padding: 7px 16px; font-size: 12px; border-radius: 6px; }
                            @media (max-width: 640px) {
                                .ad-hb-banner { padding: 4px 8px !important; gap: 6px !important; border-width: 1px !important; }
                                .ad-hb-icon { width: 24px !important; height: 24px !important; font-size: 12px !important; border-radius: 4px !important; }
                                .ad-hb-badge { font-size: 8px !important; padding: 0px 4px !important; margin-bottom: 0px !important; }
                                .ad-hb-title { font-size: 11px !important; line-height: 1.15 !important; }
                                .ad-hb-btn { padding: 3px 8px !important; font-size: 10px !important; border-radius: 4px !important; }
                            }

/* ---- extracted style block ---- */

/* Modern Desktop & Mobile Jugantor-Inspired Footer Styles */
    .site-footer-wrapper {
        width: 100%;
        font-family: var(--font-primary, 'SolaimanLipi', sans-serif);
        background-color: #f8f9fa;
        border-top: 1px solid #e5e7eb;
        color: #1f2937;
        margin-top: 28px;
        transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    
    html.dark .site-footer-wrapper {
        background-color: #0f1117;
        border-top: 1px solid #1f2430;
        color: #e5e7eb;
    }
    
    /* Footer Logo */
    .site-footer-wrapper .footer-main-logo {
        max-height: 52px;
        height: auto;
        width: auto;
        object-fit: contain;
    }
    
    /* Editorial & Publisher Line */
    .site-footer-wrapper .footer-editorial-info {
        font-size: 18.5px;
        line-height: 1.75;
        color: #374151;
        font-weight: 500;
    }
    
    html.dark .site-footer-wrapper .footer-editorial-info {
        color: #d1d5db;
    }
    
    .site-footer-wrapper .footer-editorial-info strong,
    .site-footer-wrapper .footer-editorial-info b {
        font-weight: 700;
        color: #111827;
    }
    
    html.dark .site-footer-wrapper .footer-editorial-info strong,
    html.dark .site-footer-wrapper .footer-editorial-info b {
        color: #f9fafb;
    }
    
    .site-footer-wrapper .footer-editorial-divider {
        color: #9ca3af;
        margin: 0 10px;
        font-weight: normal;
    }
    
    html.dark .site-footer-wrapper .footer-editorial-divider {
        color: #6b7280;
    }
    
    /* Copyright line */
    .site-footer-wrapper .footer-copyright-text {
        font-size: 15.5px;
        line-height: 1.7;
        color: #4b5563;
        margin-top: 6px;
    }
    
    html.dark .site-footer-wrapper .footer-copyright-text {
        color: #9ca3af;
    }
    
    /* Follow Us Title */
    .site-footer-wrapper .footer-social-title {
        font-size: 16px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 8px;
    }
    
    html.dark .site-footer-wrapper .footer-social-title {
        color: #f3f4f6;
    }
    
    /* Social Icon Buttons (Official Brand Colors & Styling) */
    .site-footer-wrapper .footer-social-links {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
    }
    
    .site-footer-wrapper .footer-social-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        background-color: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        text-decoration: none;
        transition: all 0.2s ease-in-out;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    
    html.dark .site-footer-wrapper .footer-social-btn {
        background-color: #1e2433;
        border-color: #333d52;
        box-shadow: none;
    }
    
    .site-footer-wrapper .footer-social-btn:hover {
        transform: translateY(-2px);
        border-color: #cbd5e1;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    }
    
    html.dark .site-footer-wrapper .footer-social-btn:hover {
        border-color: #4b5563;
    }
    
    .site-footer-wrapper .footer-social-btn svg {
        display: block;
        transition: transform 0.2s ease;
    }
    
    .site-footer-wrapper .footer-social-btn:hover svg {
        transform: scale(1.1);
    }
    
    /* Outlined Pill Buttons for Footer Navigation */
    .site-footer-wrapper .footer-nav-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #ffffff;
        border: 1px solid #d1d5db;
        border-radius: 5px;
        padding: 7px 16px;
        font-size: 15.5px;
        font-weight: 600;
        color: #374151;
        text-decoration: none;
        transition: all 0.2s ease-in-out;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
        white-space: nowrap;
    }
    
    html.dark .site-footer-wrapper .footer-nav-btn {
        background-color: #1a1f2c;
        border-color: #323b4e;
        color: #d1d5db;
        box-shadow: none;
    }
    
    .site-footer-wrapper .footer-nav-btn:hover {
        background-color: #ffffff;
        border-color: #b91c1c;
        color: #b91c1c;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    }
    
    html.dark .site-footer-wrapper .footer-nav-btn:hover {
        background-color: #262d3d;
        border-color: #ef4444;
        color: #f87171;
    }
    
    /* Developer Credit */
    .site-footer-wrapper .footer-developer-credit {
        font-size: 14.5px;
        line-height: 1.6;
        color: #4b5563;
    }
    
    html.dark .site-footer-wrapper .footer-developer-credit {
        color: #9ca3af;
    }
    
    .site-footer-wrapper .footer-developer-credit a {
        color: #1f2937;
        font-weight: 700;
        text-decoration: none;
        transition: color 0.2s ease;
    }
    
    html.dark .site-footer-wrapper .footer-developer-credit a {
        color: #f3f4f6;
    }
    
    .site-footer-wrapper .footer-developer-credit a:hover,
    html.dark .site-footer-wrapper .footer-developer-credit a:hover {
        color: #b91c1c;
        text-decoration: underline;
    }
    
    /* Responsive Mobile Adjustments (< 768px) */
    @media (max-width: 767px) {
        .site-footer-wrapper {
            margin-top: 20px;
        }
        .site-footer-wrapper .footer-editorial-info {
            font-size: 17.5px;
            line-height: 1.7;
        }
        .site-footer-wrapper .footer-copyright-text {
            font-size: 15.5px;
            line-height: 1.65;
            color: #374151;
        }
        html.dark .site-footer-wrapper .footer-copyright-text {
            color: #d1d5db;
        }
        .site-footer-wrapper .footer-nav-btn {
            font-size: 15px;
            padding: 6px 14px;
        }
        .site-footer-wrapper .footer-developer-credit {
            font-size: 15px;
            line-height: 1.65;
            color: #374151;
        }
        html.dark .site-footer-wrapper .footer-developer-credit {
            color: #d1d5db;
        }
    }
    
    /* Strict Logo Dark/Light Mode Display Rules */
    .site-footer-wrapper .footer-logo-light {
        display: inline-block !important;
    }
    .site-footer-wrapper .footer-logo-dark {
        display: none !important;
    }
    html.dark .site-footer-wrapper .footer-logo-light {
        display: none !important;
    }
    html.dark .site-footer-wrapper .footer-logo-dark {
        display: inline-block !important;
    }

/* ---- extracted style block ---- */

:root {
                --primary-color: #B80000;
                --primary-dark: color-mix(in srgb, var(--primary-color) 80%, black 20%);
                --primary-light: color-mix(in srgb, var(--primary-color) 22%, white 78%);
                --primary-soft: color-mix(in srgb, var(--primary-color) 12%, white 88%);
    
                --font-primary: 'Noto Serif Bengali', 'SolaimanLipi', serif;
                --font-heading: 'Noto Serif Bengali', 'SolaimanLipi', serif;
            }
    
            body, body *, html, html * {
                font-family: var(--font-primary) !important;
            }
    
            h1, h2, h3, h4, h5, h6, .heading-font,
            h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
                font-family: var(--font-heading) !important;
            }
    
            /* Dynamic Color Overrides at DOM Bottom */
            nav.bg-\[\var(--primary-soft)\], nav.bg-\[\var(--primary-soft)\], nav.bg-emerald-100, .bg-\[\var(--primary-soft)\], .bg-\[\var(--primary-soft)\] {
                background-color: var(--primary-light) !important;
            }
    
            .bg-\[\var(--primary-color)\], .bg-emerald-600, .bg-emerald-700,
            [style*="background-color: var(--primary-color)"], [style*="background-color:var(--primary-color)"], 
            [style*="background: var(--primary-color)"], [style*="background:var(--primary-color)"],
            footer.bg-\[\var(--primary-color)\], .agami-sec-title, .sidebar-widget-head, .sidebar-widget-green-head, .type6-block-head-1 {
                background-color: var(--primary-color) !important;
            }
    
            .creativeDesign_cat02, 
            [style*="linear-gradient(135deg, var(--primary-color)"], 
            [style*="linear-gradient(135deg,var(--primary-color)"] {
                background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
            }
    
            .map-area {
                background: var(--primary-soft) !important;
                border-color: var(--primary-light) !important;
            }
    
            .bg-\[\var(--primary-dark)\], .bg-\[\#006425\], .bg-\[\#1b4332\],
            footer .bg-\[\var(--primary-dark)\], [style*="background-color: var(--primary-dark)"], [style*="background: var(--primary-dark)"] {
                background-color: var(--primary-dark) !important;
            }
    
            footer {
                border-top-color: var(--primary-dark) !important;
            }
    
            .text-\[\var(--primary-color)\], .text-\[\var(--primary-dark)\], .text-\[\var(--primary-color)\], .text-emerald-600, .text-emerald-700,
            [style*="color: var(--primary-color)"], [style*="color:var(--primary-color)"], .agami-sec-more {
                color: var(--primary-color) !important;
            }
    
            /* Top Admin Bar Accents */
            #wp-style-admin-bar {
                border-bottom-color: var(--primary-color) !important;
            }
            #wp-style-admin-bar i.text-emerald-400,
            #wp-style-admin-bar a.hover\:text-emerald-400:hover,
            #wp-style-admin-bar button.group-hover\:text-emerald-400:hover {
                color: var(--primary-color) !important;
            }
    
            .border-\[\var(--primary-color)\], .border-\[\var(--primary-dark)\], .border-emerald-600, .border-emerald-700,
            [style*="border-color: var(--primary-color)"], [style*="border-color:var(--primary-color)"], .agami-sec-head {
                border-color: var(--primary-color) !important;
            }
    
            /* Hover States, Group Hovers & Active Elements */
            .hover\:bg-\[\var(--primary-color)\]:hover, .hover\:border-\[\var(--primary-color)\]:hover {
                background-color: var(--primary-color) !important;
                border-color: var(--primary-color) !important;
                color: #ffffff !important;
            }
    
            .hover\:text-\[\var(--primary-color)\]:hover, .group-hover\:text-\[\var(--primary-color)\]:group-hover {
                color: var(--primary-color) !important;
            }
    
            /* Form Radio, Checkbox & Active Indicators */
            input[type="radio"]:checked, input[type="checkbox"]:checked {
                accent-color: var(--primary-color) !important;
            }
    
            .bg-emerald-100, .bg-emerald-50, .bg-green-50, .bg-green-50\/50,
            .hover\:bg-emerald-50:hover, .hover\:bg-emerald-50\/50:hover, .hover\:bg-green-50\/50:hover {
                background-color: var(--primary-soft) !important;
            }
    
            #comment-total-count, span.bg-\[\var(--primary-color)\], .ticker-notice-label {
                background-color: var(--primary-color) !important;
            }
    
            /* Preserve FontAwesome icons */
            .fa, .fas, .far, .fab, .fal, .fad, i.fa {
                font-family: 'FontAwesome', sans-serif !important;
            }

/* ---- extracted style block ---- */

/* Hide Google Translate top banner, toolbar, iframes and powered-by popups */
        .goog-te-banner-frame,
        .goog-te-banner-frame.skiptranslate,
        iframe.goog-te-banner-frame,
        iframe.skiptranslate,
        iframe[id*=":"],
        iframe[src*="translate.googleapis.com"],
        iframe[src*="translate.google.com"],
        .goog-te-balloon-frame,
        #goog-gt-tt,
        .goog-te-spinner-pos,
        .goog-tooltip,
        .goog-tooltip:hover,
        .VIpgJd-yDvfNd-OR9Eae-sJufe,
        .VIpgJd-yDvfNd-O22p-brzqft,
        .VIpgJd-yDvfNd-l5Tlfe,
        .goog-te-gadget-icon,
        .goog-te-gadget-simple,
        .goog-te-menu-frame,
        .goog-te-menu2,
        #google_translate_element {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            height: 0 !important;
            width: 0 !important;
            max-height: 0 !important;
            max-width: 0 !important;
            clip: rect(0 0 0 0) !important;
            clip-path: inset(50%) !important;
            overflow: hidden !important;
            position: absolute !important;
            top: -9999px !important;
            left: -9999px !important;
            pointer-events: none !important;
            z-index: -99999 !important;
        }
    
        /* Prevent body shift caused by google translate iframe header */
        html, body {
            top: 0px !important;
            position: static !important;
            margin-top: 0px !important;
            padding-top: 0px !important;
        }
    
        /* Prevent hover highlights added by Google Translate */
        .goog-text-highlight {
            background-color: transparent !important;
            box-shadow: none !important;
        }

/* =========================================================
   LN SINGLE — Professional article redesign
   ========================================================= */
:root {
  --ln-single-max: 720px;
  --ln-single-red: var(--primary-color, #B80000);
}

#reading-progress-bar {
  background: linear-gradient(90deg, var(--ln-single-red), #ef4444) !important;
  height: 3px !important;
  box-shadow: 0 0 8px rgba(184, 0, 0, 0.35);
}

.single_page_container {
  background:
    radial-gradient(ellipse at top, rgba(184, 0, 0, 0.03), transparent 50%),
    #fafafa;
}

html.dark .single_page_container {
  background:
    radial-gradient(ellipse at top, rgba(184, 0, 0, 0.08), transparent 50%),
    #0b0f14;
}

.single_post_wrapper_block {
  gap: 1.75rem !important;
}

/* Category chip */
.single_category_header {
  margin-bottom: 0.85rem !important;
}
.single_category_header .inline-block {
  border-bottom: none !important;
  display: inline-flex !important;
  align-items: center;
  background: var(--ln-single-red);
  color: #fff !important;
  padding: 0.28rem 0.85rem;
  border-radius: 4px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  padding-right: 1.1rem;
}
.single_category_header a {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
}

/* Headline */
.title_post_tt,
h1.title_post_tt {
  font-size: clamp(1.65rem, 2.4vw, 2.35rem) !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  letter-spacing: -0.01em;
  margin: 0.75rem 0 1.15rem !important;
  max-width: 38ch;
}

html.dark .title_post_tt,
html.dark h1.title_post_tt {
  color: #f8fafc !important;
}

/* Meta / info box */
.info_box {
  background: #fff;
  border: 1px solid #e8e8e8 !important;
  border-radius: 12px;
  padding: 0.85rem 1rem !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

html.dark .info_box {
  background: #15191f;
  border-color: #27272a !important;
  box-shadow: none;
}

/* Featured image */
.printable_area_single img.w-full,
.printable_area_single .featured-image img,
.single_featured_image img,
.printable_area_single figure img {
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}

/* Article body reading column */
.news-content,
.printable_area_single .news-content {
  max-width: var(--ln-single-max);
  font-size: 1.125rem !important;
  line-height: 1.85 !important;
  color: #1e293b;
}

html.dark .news-content {
  color: #e2e8f0;
}

.news-content p {
  margin-bottom: 1.15em !important;
}

.news-content h2,
.news-content h3 {
  margin-top: 1.6em !important;
  margin-bottom: 0.65em !important;
  font-weight: 800 !important;
  color: #0f172a;
}

html.dark .news-content h2,
html.dark .news-content h3 {
  color: #f8fafc;
}

.news-content blockquote {
  border-left: 4px solid var(--ln-single-red);
  background: rgba(184, 0, 0, 0.05);
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-radius: 0 10px 10px 0;
  font-style: italic;
}

html.dark .news-content blockquote {
  background: rgba(184, 0, 0, 0.12);
}

.news-content a {
  color: var(--ln-single-red);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.news-content img {
  border-radius: 10px;
  margin: 1.25rem 0;
}

/* Share / action bar polish */
.share_buttons_wrap,
.social_share_box,
.info_box .flex.items-center.gap-2 {
  gap: 0.4rem;
}

.info_box a[title],
.share-btn,
.social-share-btn {
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.info_box a[title]:hover,
.share-btn:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}

/* Sidebar widgets */
.single_post_wrapper_block aside,
.single_post_wrapper_block .sidebar-col,
.single_post_wrapper_block > div > div:last-child .sidebar-widget,
.sticky_sidebar_widget,
.sidebar-widget {
  border-radius: 12px;
}

.sidebar-widget-head,
.sidebar-widget-green-head {
  border-radius: 10px 10px 0 0;
  font-weight: 800 !important;
}

.sidebar-news-item {
  transition: background-color 0.15s ease;
  border-radius: 8px;
}
.sidebar-news-item:hover {
  background: rgba(184, 0, 0, 0.04);
}

/* Related news cards */
.related_news_wrap,
.related-posts,
.jugantor_related {
  margin-top: 2rem;
}

.related_news_wrap .newsItem,
.related-posts a {
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.related_news_wrap .newsItem:hover,
.related-posts a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

/* Breadcrumb if present */
.breadcrumb,
.breadcrumbs {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 1rem;
}
.breadcrumb a {
  color: var(--ln-single-red);
  text-decoration: none;
}

/* Tags */
.news-tags a,
.post-tags a {
  display: inline-flex;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: #fff1f1;
  color: var(--ln-single-red) !important;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none !important;
  margin: 0.2rem;
  border: 1px solid #fecaca;
}
html.dark .news-tags a,
html.dark .post-tags a {
  background: rgba(184, 0, 0, 0.15);
  border-color: rgba(248, 113, 113, 0.3);
}

/* Printable area card feel on desktop */
@media (min-width: 1024px) {
  .printable_area_single {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 1.5rem 1.75rem 2rem;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05);
  }
  html.dark .printable_area_single {
    background: #12161c;
    border-color: #27272a;
    box-shadow: none;
  }
}

@media (max-width: 768px) {
  .title_post_tt {
    max-width: none;
  }
  .info_box {
    padding: 0.75rem !important;
  }
  .news-content {
    font-size: 1.05rem !important;
  }
}


/* ===== Breadcrumb (redesigned) ===== */
.ln-single-breadcrumb {
  margin: 0 0 1.15rem;
  padding: 0;
}
.ln-bc-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0.45rem 0.65rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
html.dark .ln-bc-list {
  background: linear-gradient(135deg, #1a1f27 0%, #15191f 100%);
  border-color: #2a3140;
}
.ln-bc-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
.ln-bc-sep {
  color: #94a3b8;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}
.ln-bc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.55rem;
  border-radius: 6px;
  color: var(--primary-color, #B80000) !important;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}
.ln-bc-link:hover {
  background: rgba(184, 0, 0, 0.08);
  text-decoration: none !important;
}
html.dark .ln-bc-link:hover {
  background: rgba(248, 113, 113, 0.12);
}
.ln-bc-home {
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
html.dark .ln-bc-home {
  background: #0f1318;
  border-color: #2a3140;
}
.ln-bc-home i {
  font-size: 12px;
}
.ln-bc-current {
  color: #64748b;
  padding: 0.28rem 0.45rem;
}
html.dark .ln-bc-current {
  color: #94a3b8;
}
.ln-bc-truncated {
  display: block;
  max-width: min(42ch, 55vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .ln-bc-list {
    padding: 0.4rem 0.5rem;
    font-size: 12.5px;
  }
  .ln-bc-truncated {
    max-width: min(28ch, 48vw);
  }
  .ln-bc-home span {
    display: none;
  }
}

.ln-single-article {
  position: relative;
}

/* Soft divider under headline meta */
.ln-single-article .info_box {
  position: relative;
}

/* Sidebar column polish on single */
.single_post_wrapper_block > div:last-child .sticky,
.single_post_wrapper_block .lg\:sticky {
  top: 1rem;
}


/* Share icon buttons */
.share_icon_btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #334155 !important;
  border: 1px solid #e2e8f0;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  font-size: 14px;
}
html.dark .share_icon_btn {
  background: #1f2937;
  border-color: #374151;
  color: #e5e7eb !important;
}
.share_icon_btn:hover {
  background: var(--primary-color, #B80000);
  border-color: var(--primary-color, #B80000);
  color: #fff !important;
  transform: translateY(-1px);
}

/* Featured image card */
.the_post_banner {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid #e8e8e8 !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08) !important;
}
html.dark .the_post_banner {
  border-color: #27272a !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35) !important;
}
.the_thumb_caption {
  font-size: 13.5px !important;
  color: #64748b !important;
  background: #f8fafc !important;
}
html.dark .the_thumb_caption {
  background: #18181b !important;
  color: #94a3b8 !important;
}

/* আরও পড়ুন rail */
.article_readmore_col {
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}
html.dark .article_readmore_col {
  background: #15191f !important;
}
.readmore_header span {
  border-color: var(--primary-color, #B80000) !important;
  font-size: 16px !important;
}
.readmore_item a {
  font-size: 14.5px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
}
.readmore_item a:hover {
  color: var(--primary-color, #B80000) !important;
}

/* Main body column */
.article_body_layout .news-content,
.article_body_layout .post_details_content,
.article_body_layout .details_content {
  flex: 1;
  min-width: 0;
}

/* ===== Public comments ===== */
.ln-comments {
  margin: 1.75rem 0 0.5rem;
  padding: 1.35rem 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
html.dark .ln-comments {
  background: #15191f;
  border-color: #2a3140;
  box-shadow: none;
}
.ln-comments-head {
  margin-bottom: 1.15rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--primary-color, #B80000);
}
.ln-comments-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}
html.dark .ln-comments-title {
  color: #f1f5f9;
}
.ln-comments-title i {
  color: var(--primary-color, #B80000);
  font-size: 1.05rem;
}
.ln-comments-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 0.4rem;
  margin-left: 0.15rem;
  border-radius: 999px;
  background: var(--primary-color, #B80000);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}
.ln-comments-sub {
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  color: #64748b;
}
.ln-comment-form {
  margin-bottom: 1.5rem;
  padding: 1rem 1rem 1.1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
html.dark .ln-comment-form {
  background: #0f1318;
  border-color: #2a3140;
}
.ln-comment-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
@media (max-width: 560px) {
  .ln-comment-form-row {
    grid-template-columns: 1fr;
  }
}
.ln-comment-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.ln-comment-form-row .ln-comment-field {
  margin-bottom: 0;
}
.ln-comment-field label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #334155;
}
html.dark .ln-comment-field label {
  color: #cbd5e1;
}
.ln-comment-field label span {
  color: var(--primary-color, #B80000);
}
.ln-comment-field input,
.ln-comment-field textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid #d0d7e2;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.45;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
html.dark .ln-comment-field input,
html.dark .ln-comment-field textarea {
  background: #15191f;
  border-color: #3a4454;
  color: #f1f5f9;
}
.ln-comment-field input:focus,
.ln-comment-field textarea:focus {
  outline: none;
  border-color: var(--primary-color, #B80000);
  box-shadow: 0 0 0 3px rgba(184, 0, 0, 0.12);
}
.ln-comment-field textarea {
  resize: vertical;
  min-height: 110px;
}
.ln-comment-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}
.ln-comment-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.2rem;
  border: none;
  border-radius: 8px;
  background: var(--primary-color, #B80000);
  color: #fff;
  font-size: 0.925rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.ln-comment-submit:hover {
  background: #9a0000;
}
.ln-comment-submit:active {
  transform: translateY(1px);
}
.ln-comment-note {
  font-size: 0.8rem;
  color: #94a3b8;
}
.ln-comment-toast {
  margin-top: 0.75rem;
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  font-size: 0.875rem;
  font-weight: 600;
}
html.dark .ln-comment-toast {
  background: #064e3b;
  border-color: #059669;
  color: #a7f3d0;
}
.ln-comments-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ln-comment-item {
  display: flex;
  gap: 0.85rem;
  padding: 1rem 0;
  border-bottom: 1px solid #eef2f7;
}
.ln-comment-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
html.dark .ln-comment-item {
  border-bottom-color: #2a3140;
}
.ln-comment-avatar {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 1rem;
  font-weight: 800;
}
.ln-comment-avatar--2 {
  background: #dbeafe;
  color: #1d4ed8;
}
.ln-comment-avatar--3 {
  background: #dcfce7;
  color: #15803d;
}
.ln-comment-avatar--4 {
  background: #fef3c7;
  color: #b45309;
}
.ln-comment-avatar--new {
  background: #ede9fe;
  color: #6d28d9;
}
.ln-comment-body {
  flex: 1;
  min-width: 0;
}
.ln-comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.35rem;
}
.ln-comment-author {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
}
html.dark .ln-comment-author {
  color: #f1f5f9;
}
.ln-comment-time {
  font-size: 0.78rem;
  color: #94a3b8;
  font-weight: 500;
}
.ln-comment-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #334155;
}
html.dark .ln-comment-text {
  color: #cbd5e1;
}
@media (max-width: 640px) {
  .ln-comments {
    padding: 1.1rem 0.9rem 1.25rem;
    border-radius: 12px;
  }
  .ln-comment-form {
    padding: 0.85rem;
  }
}