:root {
      --primary:       #0a899a;
      --primary-light: #e7f2fc;
      --primary-dark:  #076b79;
      --accent:        #00d4aa;
      --bg:            #f0f4f8;
      --surface:       #ffffff;
      --surface2:      #f7fafc;
      --border:        #e2e8f0;
      --text:          #1a202c;
      --text-muted:    #718096;
      --shadow:        0 4px 24px rgba(0,0,0,.08);
      --radius:        16px;
      --dark-bg:       #121212;
      --dark-card:     #181932;
      --dark-card-box: #201f43;
      --dark-text:     #9193a8;
      --dark-border:   #374151;
      --font:          'Hind Siliguri', 'Outfit', sans-serif;
    }
    body.dark, html.dark, .dark, [data-theme="dark"] {
      --bg:            #0f1117;
      --surface:       #1a1d2e;
      --surface2:      #222538;
      --border:        #2d3148;
      --text:          #e8eaf0;
      --text-muted:    #8892a4;
      --shadow:        0 4px 24px rgba(0,0,0,.4);
    }
    *, *::before, *::after { box-sizing: border-box; }
    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--text);
      transition: background .25s, color .25s;
      margin: 0;
      padding: 0;
      width: 100%;
    }
    a { color: inherit; text-decoration: none; }
    a:hover { color: inherit; }

    /* ── HEADER NAVBAR (mirrors home.php & header.php) ── */
    header {
      background: var(--primary-light);
    }
    body.dark header, html.dark header, .dark header {
      background: var(--dark-card) !important;
    }
    .navbar {
      padding: 0.7rem 0;
    }
    .navbar-brand {
      font-size: 1.5rem;
      font-weight: bold;
    }
    .navbar-nav .nav-link {
      font-weight: 500;
      color: #222;
      display: flex;
      align-items: center;
      transition: color .2s;
    }
    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link:focus,
    .navbar-nav .nav-link:hover {
      color: var(--primary) !important;
    }
    body.dark .navbar-nav .nav-link,
    html.dark .navbar-nav .nav-link {
      color: var(--dark-text);
    }
    body.dark .navbar-nav .nav-link.active,
    html.dark .navbar-nav .nav-link.active {
      color: #7fb1fa !important;
    }
    @media (max-width: 991px) {
      .navbar-brand {
        order: 1;
        margin-right: auto;
      }
      .theme-toggle-mobile {
        order: 2;
        margin-left: auto;
        margin-right: 10px;
      }
      .drawer-toggle-mobile {
        order: 3;
      }
    }

    /* ── SUB-NAV / BREADCRUMB ───────────────── */
    .ht-subnav-section {
      background: linear-gradient(135deg, rgba(10,137,154,0.06) 0%, rgba(0,206,201,0.04) 100%);
      border-bottom: 1px solid var(--border);
    }
    body.dark .ht-subnav-section,
    html.dark .ht-subnav-section {
      background: linear-gradient(135deg, rgba(10,137,154,0.15) 0%, rgba(24,25,50,0.5) 100%);
      border-bottom-color: rgba(255,255,255,.08);
    }
    .ht-lang-bar {
      display: flex;
      gap: 5px;
      align-items: center;
    }
    .ht-lang-pill {
      display: inline-flex;
      align-items: center;
      padding: 4px 12px;
      border-radius: 50px;
      font-size: .75rem;
      font-weight: 600;
      cursor: pointer;
      border: 1.5px solid var(--border);
      background: var(--surface);
      color: var(--text-muted);
      transition: all .2s;
      white-space: nowrap;
    }
    .ht-lang-pill.active,
    .ht-lang-pill:hover {
      border-color: var(--primary);
      color: #fff;
      background: var(--primary);
    }

    /* ── LAYOUT ─────────────────────────────── */
    .ht-wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 28px 20px 60px;
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 28px;
    }
    @media(max-width:960px) { .ht-wrap { grid-template-columns: 1fr; padding: 20px 14px 40px; } }

    /* ── ARTICLE ────────────────────────────── */
    .ht-article { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--border); }
    .ht-article-hero { position: relative; }
    .ht-article-hero img { width: 100%; max-height: 420px; object-fit: cover; display: block; }
    .ht-article-hero-placeholder { height: 240px; display: flex; align-items: center; justify-content: center; }
    .ht-article-hero-placeholder i { font-size: 5rem; color: rgba(255,255,255,.4); }
    .ht-article-body { padding: 32px; }
    @media(max-width:600px) { .ht-article-body { padding: 18px; } }

    /* Category + meta */
    .ht-article-cat { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; border-radius: 50px; color: #fff; font-size: .78rem; font-weight: 700; margin-bottom: 16px; }
    .ht-article-title { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 800; line-height: 1.3; margin-bottom: 18px; color: var(--text); }
    .ht-article-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: .82rem; color: var(--text-muted); margin-bottom: 24px; padding-bottom: 20px; border-bottom: 2px solid var(--border); }
    .ht-article-meta span { display: flex; align-items: center; gap: 5px; }

    /* Author block */
    .ht-author-block { display: flex; align-items: center; gap: 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 28px; }
    .ht-author-block img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary); }
    .ht-author-ico { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #00d4aa); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; border: 3px solid var(--primary); }
    .ht-author-block-name { font-weight: 700; font-size: .95rem; }
    .ht-author-block-qual { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
    .ht-author-block-spec { font-size: .75rem; color: var(--primary); margin-top: 2px; font-weight: 600; }

    /* Content */
    .ht-content { font-size: 1.05rem; line-height: 1.85; color: var(--text); }
    .ht-content h2, .ht-content h3 { font-weight: 700; margin: 28px 0 12px; color: var(--primary); }
    .ht-content p { margin-bottom: 16px; }
    .ht-content ul, .ht-content ol { padding-left: 22px; margin-bottom: 18px; }
    .ht-content li { margin-bottom: 8px; }
    .ht-content strong { color: var(--primary); }
    .ht-content img { border-radius: 12px; max-width: 100%; margin: 20px 0; }

    /* Video embed */
    .ht-video-box { margin: 28px 0; }
    .ht-video-label { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 700; color: var(--text-muted); margin-bottom: 12px; }
    .ht-video-label i { font-size: 1.1rem; }
    .yt-label { color: #e53e3e; }
    .fb-label { color: #1877f2; }

    /* Like btn */
    .ht-like-row { display: flex; align-items: center; gap: 14px; margin-top: 32px; padding-top: 24px; border-top: 2px solid var(--border); flex-wrap: wrap; }
    .ht-like-btn {
      display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px;
      border-radius: 50px; font-size: .9rem; font-weight: 700; cursor: pointer; transition: .25s;
      border: none;
    }
    .ht-like-btn.default { background: var(--surface2); border: 2px solid var(--border); color: var(--text-muted); }
    .ht-like-btn.liked { background: linear-gradient(135deg, #e53e3e, #c0392b); color: #fff; box-shadow: 0 4px 18px rgba(229,62,62,.4); }
    .ht-like-btn:hover { transform: scale(1.04); }
    .ht-share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 50px; font-size: .9rem; font-weight: 700; cursor: pointer; transition: .25s; background: linear-gradient(135deg, #0a899a, #076b79); color: #fff; border: none; }
    .ht-share-btn:hover { transform: scale(1.04); box-shadow: 0 4px 18px rgba(10,137,154,.35); }

    /* Tags */
    .ht-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
    .ht-tag { background: var(--surface2); border: 1px solid var(--border); border-radius: 50px; padding: 4px 14px; font-size: .75rem; color: var(--text-muted); }

    /* ── SIDEBAR ────────────────────────────── */
    .ht-sidebar { display: flex; flex-direction: column; gap: 22px; }
    .ht-sidebar-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--border); }
    .ht-sidebar-head { padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: .92rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
    .ht-sidebar-head i { color: var(--primary); }

    /* Related tip row */
    .ht-related-item { display: flex; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); transition: background .2s; }
    .ht-related-item:last-child { border-bottom: none; }
    .ht-related-item:hover { background: var(--surface2); }
    .ht-related-thumb { width: 68px; height: 58px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
    .ht-related-thumb-ph { width: 68px; height: 58px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .ht-related-title { font-size: .85rem; font-weight: 600; line-height: 1.35; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .ht-related-meta { font-size: .72rem; color: var(--text-muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; }

    /* Disclaimer card */
    .ht-disclaimer { padding: 18px; font-size: .82rem; color: var(--text-muted); line-height: 1.6; }
    .ht-disclaimer strong { color: var(--text); }