body {
    overflow-x: hidden;
    max-width: 100vw;
}

   /* === IMAGE GALLERY SLIDER CSS === */
   .article-gallery-wrap {
       margin-bottom: 16px;
       position: relative;
   }

   .featured-img-container {
       position: relative;
       width: 100%;
       border-radius: 8px;
       overflow: hidden;
       margin-bottom: 10px;
   }

   .featured-img-container img {
       width: 100%;
       max-height: 500px;
       object-fit: cover;
       border-radius: 8px;
       transition: opacity 0.3s ease;
   }

   .gallery-nav-btn {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       background: rgba(0, 0, 0, 0.6);
       color: #fff;
       border: none;
       width: 40px;
       height: 40px;
       border-radius: 50%;
       cursor: pointer;
       font-size: 18px;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
       z-index: 10;
   }

   .gallery-nav-btn:hover {
       background: rgba(228, 77, 38, 0.9);
   }

   .gallery-prev {
       left: 10px;
   }

   .gallery-next {
       right: 10px;
   }

   .gallery-thumbnails {
       display: flex;
       gap: 8px;
       overflow-x: auto;
       padding: 5px 0;
       scrollbar-width: thin;
       scrollbar-color: #e44d26 #f0f0f0;
       -webkit-overflow-scrolling: touch;
   }

   .gallery-thumbnails::-webkit-scrollbar {
       height: 4px;
   }

   .gallery-thumbnails::-webkit-scrollbar-track {
       background: #f0f0f0;
       border-radius: 4px;
   }

   .gallery-thumbnails::-webkit-scrollbar-thumb {
       background: #e44d26;
       border-radius: 4px;
   }

   .gallery-thumb {
       flex-shrink: 0;
       width: calc(16.666% - 7px);
       height: 85px;
       border-radius: 8px;
       overflow: hidden;
       cursor: pointer;
       border: 2px solid transparent;
       transition: all 0.3s ease;
       position: relative;
       opacity: 0.7;
   }

   .gallery-thumb:hover,
   .gallery-thumb.active {
       opacity: 1;
   }

   .gallery-thumb:hover {
       border-color: #e44d26;
       transform: translateY(-2px);
   }

   .gallery-thumb.active {
       border-color: #e44d26;
       box-shadow: 0 2px 8px rgba(228, 77, 38, 0.3);
   }

   .gallery-thumb img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }

   .gallery-image-counter {
       position: absolute;
       bottom: 10px;
       right: 10px;
       background: rgba(0, 0, 0, 0.7);
       color: #fff;
       padding: 4px 10px;
       border-radius: 20px;
       font-size: 12px;
       font-weight: 600;
       z-index: 5;
   }

   /* Dark Mode */
   body.dark-mode .gallery-nav-btn {
       background: rgba(0, 0, 0, 0.8);
   }

   body.dark-mode .gallery-nav-btn:hover {
       background: rgba(228, 77, 38, 0.9);
   }

   body.dark-mode .gallery-thumb {
       border-color: #2a2a3e;
   }

   body.dark-mode .gallery-thumb:hover,
   body.dark-mode .gallery-thumb.active {
       border-color: #e44d26;
   }

   body.dark-mode .gallery-thumbnails::-webkit-scrollbar-track {
       background: #1a1a2e;
   }

   .gallery-caption {
       font-size: 16px;
       font-weight: 700;
       color: #333;
       text-align: center;
       margin: 12px 0 20px 0;
       background: #fdfdfd;
       padding: 12px 16px;
       border-radius: 8px;
       border: 1px solid #eaeaea;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
   }


   .article-wrap {
       max-width: 1280px;
       margin: 0 auto;
       padding: 16px;
       display: flex;
       gap: 20px;
   }

   .article-main {
       flex: 1;
       min-width: 0;
       background: #fff;
       padding: 24px;
       border-radius: 8px;
       border: 1px solid #eaeaea;
       box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
   }

   .article-sidebar {
       width: 300px;
       flex-shrink: 0;
   }

   .article-header {
       background: #fff;
       padding: 0 0 15px 0;
       margin-bottom: 15px;
       border-bottom: 2px solid #f5f5f5;
   }

    .breadcrumb {
        font-size: 16px;
        font-weight: 500;
        color: #000000;
        margin-bottom: 16px;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

   .breadcrumb a {
       color: #000000;
       text-decoration: none;
       font-weight: 600;
   }



   .live-badge,
   .article-badge {
       display: inline-block;
       margin-bottom: 14px;
       margin-right: 8px;
       color: #fff;
       font-size: 13px;
       font-weight: 700;
       padding: 5px 14px;
       border-radius: 6px;
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }

   .badge-breaking {
       background: #d32f2f;
   }

   .badge-featured {
       background: #f57c00;
   }

   .badge-premium {
       background: #388e3c;
   }

   .live-badge {
       background: #e53935;
   }

   .article-cat {
       background: #e44d26;
       color: #fff;
       font-size: 13px;
       font-weight: 700;
       padding: 5px 14px;
       border-radius: 6px;
       display: inline-block;
       margin-bottom: 14px;
       margin-right: 8px;
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }

   .article-title {
       font-size: 32px;
       font-weight: 800;
       line-height: 1.4;
       color: #000;
       margin-bottom: 12px;
   }

   .article-meta-container {
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-wrap: wrap;
       padding: 12px 0;
       border-top: 1px solid #f0f0f0;
       border-bottom: 1px solid #f0f0f0;
       margin-bottom: 16px;
       gap: 15px;
   }

    .article-meta {
        display: flex;
        gap: 10px 18px;
        align-items: center;
        flex-wrap: wrap;
        font-size: 14px;
        color: #444;
        flex: 1;
    }

   .article-meta span {
       display: flex;
       align-items: center;
       gap: 6px;
   }

   .article-meta img {
       width: 32px;
       height: 32px;
       border-radius: 50%;
   }

   .share-btns {
       display: flex;
       gap: 8px;
       flex-wrap: wrap;
   }

   .share-btn {
       padding: 7px 14px;
       border-radius: 6px;
       font-size: 12px;
       font-weight: 600;
       display: flex;
       align-items: center;
       gap: 6px;
       border: none;
       cursor: pointer;
   }

   .share-fb {
       background: #1877f2;
       color: #fff;
   }

   .share-tw {
       background: #1da1f2;
       color: #fff;
   }

   .share-wa {
       background: #25d366;
       color: #fff;
   }

   .share-copy {
       background: #f0f0f0;
       color: #333;
   }

   .ad-banner {
       border-radius: 8px;
       border-color: #e8e8e8;
   }

   .ad-banner img {
       width: 100%;
   }

   .featured-img {
       width: 100%;
       border-radius: 8px;
       margin-bottom: 16px;
       max-height: 100%;
       object-fit: cover;
   }

   .article-content {
       background: #fff;
       padding: 10px 0;
       font-size: 19px;
       line-height: 1.8;
       color: #222;
       text-align: justify;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   }

   .article-content h2,
   .article-content h3 {
       margin: 20px 0 10px;
       font-weight: 800;
   }

   .article-content p {
       margin-bottom: 18px;
       text-align: justify;
   }

   .article-content figure {
       margin: 24px 0 !important;
       width: 100% !important;
       max-width: 100% !important;
       display: block;
   }

   .article-content figure img {
       margin: 0 !important;
   }

   .article-content img {
       width: 100% !important;
       height: auto !important;
       border-radius: 8px;
       margin: 24px 0;
       display: block;
   }

   .article-content ul,
   .article-content ol {
       margin: 20px 0 20px 20px;
       padding-left: 20px;
   }

   .article-content ul li,
   .article-content ol li {
       margin-bottom: 12px;
       padding-left: 5px;
   }

   .article-footer-meta {
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-wrap: wrap;
       padding: 16px;
       background: #fdfdfd;
       border: 1px solid #eaeaea;
       border-radius: 8px;
       margin: 32px 0;
       gap: 16px;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
   }

   .meta-label {
       font-size: 14px;
       font-weight: 700;
       color: #444;
       margin-right: 8px;
   }

   .source-wrap {
       display: flex;
       align-items: center;
       font-size: 14px;
       color: #666;
   }

   .source-name {
       font-weight: 700;
       color: #e44d26;
   }

   .tags-wrap {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
       gap: 8px;
   }

   .tag-chip {
       background: #fff;
       border: 1px solid #ddd;
       color: #555;
       padding: 4px 12px;
       border-radius: 20px;
       font-size: 13px;
       font-weight: 600;
       text-decoration: none;
       transition: all 0.3s;
   }

   .tag-chip:hover {
       background: #e44d26;
       color: #fff;
       border-color: #e44d26;
   }

   /* Comments Section */
   .comments-section {
       margin-bottom: 12px;
       line-height: 1.8;
   }

   .article-content table {
       width: 100% !important;
       max-width: 100% !important;
       border-collapse: collapse;
       margin: 24px 0;
       background: #fff;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
       border-radius: 8px;
       overflow: hidden;
   }

   .article-content figure.table {
       width: 100% !important;
       max-width: 100% !important;
       display: block;
       overflow-x: auto;
       margin: 24px 0 !important;
   }

   .article-content th,
   .article-content td {
       border: 1px solid #eaeaea;
       padding: 14px 16px;
       text-align: left;
       vertical-align: middle;
   }

   .article-content th {
       background-color: #f8f9fa !important;
       font-weight: 700;
       color: #333 !important;
   }

   .article-content tr:nth-child(even) td {
       background-color: #fafafa !important;
   }

   .article-content blockquote {
       border-left: 4px solid #e44d26;
       padding: 12px 16px;
       background: #fdfdfd !important;
       margin: 20px 0;
       font-style: italic;
       font-size: 20px;
       font-weight: 600;
       color: #444;
   }

   /* Copy-paste se aaye inline bg/color strip karo */
   .article-content p,
   .article-content span,
   .article-content div,
   .article-content li,
   .article-content td,
   .article-content h1,
   .article-content h2,
   .article-content h3,
   .article-content h4,
   .article-content h5,
   .article-content h6 {
       background-color: transparent !important;
       color: inherit !important;
   }

   .comments-section {
       background: #fff;
       border-radius: 10px;
       padding: 20px;
       margin-top: 16px;
       border: 1px solid #e8e8e8;
   }

   .comment-item {
       padding: 12px 0;
       border-bottom: 1px solid #f5f5f5;
   }

   .comment-user {
       font-weight: 700;
       font-size: 13px;
   }

   .comment-text {
       font-size: 14px;
       color: #444;
       margin-top: 4px;
   }

   .comment-time {
       font-size: 11px;
       color: #aaa;
       margin-top: 4px;
   }

   .comment-form textarea {
       width: 100%;
       border: 1px solid #e8e8e8;
       border-radius: 8px;
       padding: 10px;
       font-size: 14px;
       resize: vertical;
       min-height: 80px;
       font-family: inherit;
   }

   .comment-form button {
       background: #e44d26;
       color: #fff;
       border: none;
       padding: 8px 20px;
       border-radius: 6px;
       font-size: 14px;
       cursor: pointer;
       margin-top: 8px;
   }

   .related-card {
       display: flex;
       gap: 10px;
       padding: 10px 0;
       border-bottom: 1px solid #f5f5f5;
   }

   .related-card img {
       width: 75px;
       height: 55px;
       object-fit: cover;
       border-radius: 6px;
       flex-shrink: 0;
   }

   .related-card h4 {
       font-size: 13px;
       font-weight: 600;
       line-height: 1.4;
       color: #222;
   }

   .related-card h4:hover {
       color: #e44d26;
   }

   .article-sidebar-box {
       background: #fff;
       border-radius: 10px;
       padding: 16px;
       border: 1px solid #e8e8e8;
       margin-bottom: 16px;
   }

   /* Responsive */
   @media (max-width: 1024px) {
       .article-sidebar {
           width: 260px;
       }
   }

   @media (max-width: 768px) {
       .article-wrap {
           flex-direction: column;
           padding: 10px;
           gap: 12px;
       }

       .article-sidebar {
           width: 100%;
       }

       .article-title {
           font-size: 20px;
       }

       .share-btn {
           padding: 6px 10px;
           font-size: 11px;
       }

       .featured-img {
           max-height: 100%;
       }

       .gallery-nav-btn {
           width: 32px;
           height: 32px;
           font-size: 14px;
       }

       .gallery-thumb {
           width: 55px;
           height: 40px;
       }

       .featured-img-container img {
           max-height: 350px;
       }

       .gallery-thumbnails {
           gap: 6px;
       }

   }

   @media (max-width: 480px) {
       .article-title {
           font-size: 18px;
       }

       .article-header {
           padding: 14px;
       }

       .article-content {
           padding: 14px;
       }

       .article-meta-container {
           flex-direction: column;
           align-items: flex-start;
           gap: 12px;
       }

       .share-btns {
           width: 100%;
           justify-content: flex-start;
       }

       .article-meta {
           gap: 10px;
           font-size: 12px;
       }

       .gallery-nav-btn {
           width: 28px;
           height: 28px;
           font-size: 12px;
       }

       .gallery-thumb {
           width: 48px;
           height: 36px;
       }

       .featured-img-container img {
           max-height: 250px;
       }

       .gallery-thumbnails {
           gap: 5px;
       }

   }





   /* Dark mode — article page */
   body.dark-mode .article-main {
       background: #1a1a2e;
       border-color: #2a2a3e;
       box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
   }

   body.dark-mode .article-header {
       background: #1a1a2e;
       border-color: #2a2a3e;
   }

   body.dark-mode .article-title {
       color: #f0f0f0;
   }

   body.dark-mode .article-meta-container {
       border-color: #2a2a3e;
   }

   body.dark-mode .article-meta {
       color: #aaa;
   }

   body.dark-mode .breadcrumb {
       color: #ffffff;
   }

   body.dark-mode .breadcrumb a {
       color: #ffffff;
   }

   body.dark-mode .breadcrumb a:hover {
       color: #ff6b4a;
   }

   body.dark-mode .article-content {
       background: #1a1a2e;
       border-color: #2a2a3e;
       color: #ccc;
   }

   body.dark-mode .article-content h2,
   body.dark-mode .article-content h3 {
       color: #f0f0f0;
   }

   body.dark-mode .article-content blockquote {
       background: #12122a !important;
       border-color: #e44d26;
       color: #bbb;
   }

   body.dark-mode .gallery-caption {
       background: #12122a;
       border-color: #2a2a3e;
       color: #ddd;
   }

   body.dark-mode .article-content table {
       background: #1a1a2e;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
   }

   body.dark-mode .article-content th,
   body.dark-mode .article-content td {
       border-color: #2a2a3e;
   }

   body.dark-mode .article-content th {
       background-color: #252540 !important;
       color: #f0f0f0 !important;
   }

   body.dark-mode .article-content tr:nth-child(even) td {
       background-color: #12122a !important;
   }

   body.dark-mode .article-footer-meta {
       background: #1a1a2e;
       border-color: #2a2a3e;
   }

   body.dark-mode .meta-label {
       color: #ccc;
   }

   body.dark-mode .source-wrap {
       color: #aaa;
   }

   body.dark-mode .tag-chip {
       background: #12122a;
       border-color: #2a2a3e;
       color: #ddd;
   }

   body.dark-mode .tag-chip:hover {
       background: #e44d26;
       color: #fff;
   }

   body.dark-mode .comments-section {
       background: #1a1a2e;
       border-color: #2a2a3e;
   }

   body.dark-mode .comment-text {
       color: #bbb;
   }

   body.dark-mode .comment-user {
       color: #f0f0f0;
   }

   body.dark-mode .comment-item {
       border-color: #2a2a3e;
   }

   body.dark-mode .comment-form textarea {
       background: #12122a;
       border-color: #2a2a3e;
       color: #ddd;
   }

   body.dark-mode .article-sidebar-box {
       background: #1a1a2e;
       border-color: #2a2a3e;
   }

   body.dark-mode .related-card h4 {
       color: #ddd;
   }

   body.dark-mode .related-card {
       border-color: #2a2a3e;
   }

   body.dark-mode .share-copy {
       background: #252540;
       color: #ddd;
   }

   /* === REPORTER PROFILE CSS === */
   .reporter-profile {
       background: #fff;
       border-radius: 12px;
       padding: 24px;
       margin-top: 32px;
       margin-bottom: 32px;
       border: 1px solid #eaeaea;
       border-left: 4px solid #e44d26;
       display: flex;
       gap: 24px;
       align-items: center;
       transition: all 0.3s ease;
       position: relative;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
   }

   .reporter-profile:hover {
       box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
       transform: translateY(-2px);
   }

    .reporter-photo {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .reporter-photo img {
        width: 140px;
        height: 140px;
        border-radius: 8px;
        object-fit: cover;
        border: 1px solid #e44d26;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

   .reporter-photo img:hover {
       transform: scale(1.05);
   }

   .reporter-info {
       flex: 1;
   }

    .reporter-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        font-weight: 800;
        color: #000;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 0;
        background: #f0f0f0;
        padding: 4px 10px;
        border-radius: 20px;
    }

   .reporter-info h3 {
       font-size: 24px;
       font-weight: 800;
       color: #111;
       margin: 0 0 4px 0;
       line-height: 1.2;
   }

    .reporter-designation {
        font-size: 15px;
        color: #222;
        margin: 0 0 10px 0;
        font-weight: 700;
    }

   .reporter-bio {
       font-size: 15px;
       color: #444;
       line-height: 1.6;
       margin: 0 0 12px 0;
       font-weight: 500;
   }

    .reporter-meta {
        display: flex;
        gap: 16px;
        font-size: 14px;
        color: #222;
        font-weight: 600;
        flex-wrap: wrap;
        margin-bottom: 12px;
    }

    .reporter-meta span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .reporter-meta span i {
        color: #000;
        font-size: 11px;
    }

   .reporter-social {
       display: flex;
       gap: 10px;
       margin-bottom: 14px;
   }

   .reporter-social a {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 34px;
       height: 34px;
       border-radius: 50%;
       background: #f5f5f5;
       color: #555;
       font-size: 14px;
       text-decoration: none;
       transition: all 0.2s ease;
   }

   .reporter-social a:hover {
       background: #e44d26;
       color: #fff;
       transform: translateY(-2px);
   }

   /* Dark Mode */
   body.dark-mode .reporter-profile {
       background: #1a1a2e;
       border-color: #2a2a3e;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   }

   body.dark-mode .reporter-info h3 {
       color: #f0f0f0;
   }

   body.dark-mode .reporter-designation {
       color: #aaa;
   }

   body.dark-mode .reporter-bio {
       color: #999;
   }

   body.dark-mode .reporter-meta span {
       color: #888;
   }

   body.dark-mode .reporter-label {
       background: #2a1a1a;
       color: #ff6b4a;
   }

   body.dark-mode .reporter-social a {
       background: #252540;
       color: #aaa;
   }

   body.dark-mode .reporter-social a:hover {
       background: #e44d26;
       color: #fff;
   }

   /* Responsive */
   @media (max-width: 768px) {
       .reporter-profile {
           flex-direction: column;
           text-align: center;
           padding: 20px;
           gap: 16px;
           align-items: center;
       }

       .reporter-photo img {
           width: 80px;
           height: 80px;
       }

       .reporter-info h3 {
           font-size: 18px;
       }

       .reporter-meta {
           justify-content: center;
       }

       .reporter-social {
           justify-content: center;
       }

       .reporter-bio {
           -webkit-line-clamp: 4;
       }
   }

   /* Reporter Profile Dark Mode */
   body.dark-mode .reporter-profile {
       background: #1a1a2e;
       border-color: #2a2a3e;
       border-left-color: #e44d26;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
   }

   body.dark-mode .reporter-info h3 {
       color: #fff;
   }

   body.dark-mode .reporter-bio {
       color: #bbb;
   }

   body.dark-mode .reporter-meta {
       color: #999;
   }

   body.dark-mode .reporter-label {
       background: rgba(228, 77, 38, 0.15);
   }

   body.dark-mode .reporter-photo img {
       border-color: #1a1a2e;
   }

    /* === DARK MODE OVERRIDES === */
    body.dark-mode .breadcrumb { color: #ccc !important; }
    body.dark-mode .breadcrumb a { color: #f0f0f0 !important; }
    body.dark-mode .article-meta,
    body.dark-mode .article-meta span,
    body.dark-mode .article-meta span i,
    body.dark-mode .article-meta span strong { color: #aaa !important; }
    body.dark-mode .article-content,
    body.dark-mode .article-content p,
    body.dark-mode .article-content span,
    body.dark-mode .article-content li { color: #ccc !important; background-color: transparent !important; }
    body.dark-mode .meta-label,
    body.dark-mode .source-wrap,
    body.dark-mode .source-name { color: #aaa !important; }
    body.dark-mode .reporter-designation { color: #bbb !important; }
    body.dark-mode .reporter-meta,
    body.dark-mode .reporter-meta span,
    body.dark-mode .reporter-meta span i { color: #999 !important; }
    body.dark-mode .reporter-label { background: #2a1a1a !important; color: #ff6b4a !important; }
    body.dark-mode .article-sidebar-box,
    body.dark-mode .article-sidebar-box p,
    body.dark-mode .article-sidebar-box span { color: #ccc !important; }
    body.dark-mode .related-card h4 { color: #ddd !important; }