/*
Theme Name: Vista Hub V3
Theme URI: https://www.vhoriginal.com
Author: Vivek Hardaha
Author URI: https://www.vhoriginal.com
Description: Vista Hub V3 — naya naam/slug taaki purani "Viata Vh 02" theme se WordPress isko bilkul alag pehchaane, koi cache/version clash na ho. MOBILE-FIRST LOCK: poori site ek phone-column (620px), desktop pe wahi bada. HYBRID ads: Auto Ads + lazy in-feed. Engagement layer: news ribbon, UP-NEXT mega card, audio-end toast, 1-tap poll (meta-driven). 4:5 audio cards, global player, content-visibility scroll engine, E-E-A-T, PWA, LiteSpeed friendly. v3.0 — dono ticker rows: bada font + tez loop + paas-paas news items; card CTA halki green; itihas box 3-point clickable; TOC label renamed.
Version: 4.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vistahub
*/

/* =============================================================
   VISTA HUB v2  —  vhoriginal.com
   Dark | Game-dashboard | Mobile-first | Hindi (Devanagari)
   Animations live in /css/animations.css
   ============================================================= */

/* ---------- Design tokens ---------- */
:root{
  /* v3.23 — Soft Charcoal (pure black nahi).
     Pure #080808 OLED pe scroll karte waqt smear karta hai aur card/bg
     ka farak nahi dikhta. Ye thoda blue-cool charcoal hai — same darkness
     feel, par depth aur layering saaf. */
  --bg:        #0D0F11;
  --bg-2:      #121417;
  --card:      #16191C;
  --card-2:    #1B1F23;
  --hover:     #21262B;
  --border:    #23272B;
  --border-2:  #2C3136;

  --text:      #F4F6F8;   /* v1.0 polish — cool-white, glare-free */
  --body:      #DDE2E7;   /* reading text: brighter + blue undertone match (35+ eyes) */
  --meta:      #9BA4AE;   /* cool grey — charcoal ke undertone se cohesive, AA-safe */
  /* v1.1 — CONTRAST FIX: purana #6a6a6a bg pe sirf 3.55:1 tha (WCAG AA
     fail — 4.5:1 chahiye). Search placeholder, copyright, audio time,
     PWA sub-text sab isi pe the — dhoop mein phone pe padhna mushkil.
     #8a9099 = 5.97:1, aur cool-grey tint charcoal ke blue undertone se
     match karta hai (purana wala flat neutral tha). Design same, bas
     ab dikhai deta hai. */
  --muted:     #8a9099;

  /* v1.0 polish — GOLD ab root pe (pehle sirf css/vh-card.css me tha;
     skip-link ka var(--vh-gold, fallback) ab kabhi mismatch nahi). */
  --vh-gold:   #FFD24C;

  --accent:    #e53935;   /* primary red — brand, mat badlo */
  --accent-2:  #ff5a3c;   /* warm red for gradients */
  --pink:      #ff2d6f;   /* SECONDARY accent — CTA, promo, radio */
  --pink-dk:   #c81e52;   /* pink ka darker shade (borders/shadows) */
  --blue:      #00d4ff;   /* electric blue */
  --neon:      #00ff88;   /* neon green */
  /* v2.2 — G2 PALETTE: har rang ka EK matlab, poori site me wahi ek matlab.
     🟢 --vh-green = aaj/taaza  (ticker ka date label, "ताज़ा अपडेट", CTA)
     🟡 --vh-gold  = purana/itihaas + "tu kahan hai" (active pill, play btn)
     🔴 --accent   = urgent (logo teer, Tools, NEW badge, ❤️)
     Baaki sab neutral — koi rang barbaad nahi. Yahi G2 ka poora sutra. */
  --vh-green:  #00ff88;
  --vh-green-soft: #a3e6b9;   /* v2.4 — हल्की ग्रीन: "पूरा पढ़ें" jaisी soft CTA text (neon se alag, aankhon ko aaram) */
  --wa:        #25d366;   /* whatsapp */

  --radius:    14px;
  --radius-sm: 10px;
  --maxw:      620px;   /* v2.0 — MOBILE-FIRST LOCK: poori site ek phone-column */

  --sans: 'Hind', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, Consolas, monospace;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* v1.2 — hidden → clip: clip programmatic scrollLeft bhi nahi hone deta
   (hidden kabhi-kabhi de deta hai) = "right-shift" ke against tighter net.
   Saath me headings me lambe English words (Camera Trick / Pro Phones
   type titles) kabhi viewport ke bahar na dhakelein — break-word. */
/* v3.3 — LAYOUT-SHIFT LOCK (Auto Ads right-shift glitch fix):
   Auto Ads jab load hoti hai to kabhi-kabhi 100vw se widi element
   (ya body ke bahar node) inject karti hai — browser 1-2s ke liye
   horizontal scroll khol deta hai, content right khisak jaata hai,
   phir settle hota hai (screenshot-verified). Ilaaj:
   - overflow-x: hidden dono pe (clip se strict — koi horizontal scroll
     kabhi allow nahi)
   - width:100% + max-width:100vw so viewport se zyada kabhi na ho
   - #site-wrapper already center-locked (margin:0 auto, max-width:620px)
     — ye ensure karta hai ki reflow column ke bahar na jaye. */
html{ overflow-x:hidden; }
html,body{ width:100%; max-width:100vw; overflow-x:hidden; }
h1,h2,h3,.post-title{ overflow-wrap:break-word; }

/* Auto Ads / injected elements width se bahar na jaayein */
ins.adsbygoogle,
.google-auto-placed,
.adsbygoogle{ max-width:100% !important; overflow:hidden !important; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.7;
  word-wrap:break-word;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* Ambient depth — two faint corner glows fixed behind everything */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(620px circle at 12% -5%, rgba(229,57,53,.10), transparent 60%),
    radial-gradient(560px circle at 100% 100%, rgba(0,150,255,.07), transparent 55%);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

::selection{ background:var(--accent); color:#fff; }

/* Custom scrollbar (desktop) */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#262626; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

/* ---------- Layout wrapper ---------- */
#site-wrapper{ max-width:var(--maxw); margin:0 auto; padding:18px 16px 48px; }
.single-post-wrap{ max-width:760px; margin:0 auto; }

/* =============================================================
   READING PROGRESS
   ============================================================= */
#reading-progress{
  position:fixed; top:0; left:0;
  width:0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow:0 0 10px rgba(229,57,53,.7);
  z-index:9999;
}

/* =============================================================
   HEADER
   ============================================================= */
#site-header{
  /* v4.4 — sticky HATAYA. Vivek chahta hai header normal scroll ho jaye,
     aur uski jagah .vh-sticky-top (boxes + ticker) top pe chipke.
     Header ab document flow mein normal block hai. */
  position:relative; z-index:1000;
  background:rgba(8,8,8,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  height:52px; max-width:var(--maxw); margin:0 auto;  /* v3.3 — height matched to shared Vista Core header (52px) so all 4 apps' headers are identical; category-nav/ticker sticky offsets below depend on this */
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
}
/* v3.4 — Header accent ab CORE se aata hai.
   Pehle yahan rang hardcoded tha (aur comment "dark professional blue"
   kehta tha jabki value red thi — classic stale-comment trap). Ab
   --vista-hub-p core/config.php ke VISTA_COLOR_HUB se aata hai, wahi
   jo bottom navbar ka Hub tint banata hai. Ek jagah badlo, header aur
   navbar dono badal jaate hain — chaaron apps ke saath sync me.

   Fallback #CE2029 tab kaam aata hai jab core load na ho.
   NOTE: theme-wide --accent (logo teer, NEW badge, ❤️, CTA) alag hai
   aur waisa hi rehta hai — usse ye chhedta nahi. */
#site-header{ --vh-header-accent: var(--vista-hub-p, #CE2029); }
.site-logo{ display:flex; align-items:center; gap:8px; color:#fff; min-width:0; }
.vh-header-dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:var(--vh-header-accent); box-shadow:0 0 8px var(--vh-header-accent);
  animation:vhHeaderPulse 1.7s ease-in-out infinite;
}
@keyframes vhHeaderPulse{
  0%   { box-shadow:0 0 0 0 var(--vh-header-accent); opacity:1; }
  70%  { box-shadow:0 0 0 7px transparent; opacity:.8; }
  100% { box-shadow:0 0 0 0 transparent; opacity:1; }
}
.vh-brand{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.logo-text{
  font-family:var(--mono); font-size:16px; font-weight:800; letter-spacing:2px;
  line-height:1.1; white-space:nowrap; color:#fff;
  display:flex; align-items:center; gap:6px;
}
.logo-text b{ color:var(--vh-header-accent); font-weight:800; }
.logo-text .vh-title-ic{ font-size:15px; letter-spacing:0; line-height:1; }
.logo-sub{
  font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.3px;
  color:var(--meta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.header-buttons{ display:flex; align-items:center; gap:6px; }
.search-btn,.menu-toggle{
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text); font-size:20px;
  transition:background .2s, color .2s;
}
.search-btn svg{ width:21px; height:21px; }
.search-btn:hover,.menu-toggle:hover{ background:var(--hover); color:var(--accent); }



/* =============================================================
   SECTION HEADINGS
   ============================================================= */
.section-heading{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:34px 0 16px;
}
.section-heading h1,.section-heading h2{
  position:relative;
  font-weight:700; color:#fff;
  padding-left:14px; line-height:1.3;
}
.section-heading h1{ font-size:1.32rem; }
.section-heading h2{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:#cfcfcf; }
.section-heading h1::before,.section-heading h2::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:5px; height:1.05em; border-radius:3px;
  background:linear-gradient(180deg, var(--accent), var(--blue));
  box-shadow:0 0 12px rgba(0,212,255,.35);
}
.view-all{
  flex-shrink:0;
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.4px;
  color:var(--meta); padding:6px 12px; border-radius:999px;
  border:1px solid var(--border-2);
  transition:color .2s, border-color .2s, background .2s;
}
.view-all:hover{ color:#fff; border-color:var(--accent); background:rgba(229,57,53,.08); }

/* =============================================================
   HERO  (full-width latest post, magazine style)
   ============================================================= */
.hero{
  position:relative; display:block;
  border-radius:var(--radius); overflow:hidden;
  margin-top:6px;
  border:1px solid var(--border);
  background:var(--card);
  min-height:230px;
}
.hero-img{
  width:100%; height:auto; display:block;
  transition:transform .6s ease;
}
.hero:hover .hero-img{ transform:scale(1.04); }
.hero-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:22px 20px;
  background:linear-gradient(to top, rgba(0,0,0,.92) 8%, rgba(0,0,0,.55) 45%, rgba(0,0,0,0) 80%);
}
.hero-cat{
  align-self:flex-start;
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase;
  padding:5px 11px; border-radius:999px; margin-bottom:10px;
  background:var(--accent); color:#fff;
  box-shadow:0 4px 14px rgba(229,57,53,.4);
}
.hero-title{
  font-size:1.5rem; font-weight:700; color:#fff; line-height:1.35;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.hero-meta{
  margin-top:10px; display:flex; gap:14px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; color:#cfcfcf;
}

/* =============================================================
   POST CARDS GRID
   ============================================================= */
/* v2.0 — .posts-grid ka layout ab SIRF css/vh-card.css me (single source).
   Yahan wala 2-col base + neeche wale breakpoints + masonry block DELETED. */
.post-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.post-card:hover{
  transform:translateY(-4px);
  border-color:var(--accent);
  box-shadow:0 12px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(229,57,53,.25);
}
.post-card a{ display:block; color:inherit; }
.post-thumb-wrap{ position:relative; aspect-ratio:16/9; background:var(--bg-2); overflow:hidden; }
.post-thumb{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.post-card:hover .post-thumb{ transform:scale(1.05); }
.no-thumb{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:34px; background:linear-gradient(135deg,#141414,#0c0c0c); color:#333;
}
.card-body{ padding:12px 13px 14px; }
.card-title{
  font-size:.96rem; font-weight:600; color:var(--text); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.card-date{ font-family:var(--mono); font-size:11px; color:var(--meta); margin-top:8px; }

/* =============================================================
   CATEGORY GRID (5x4 tiles)
   ============================================================= */
.cat-grid{
  display:grid; gap:11px;
  grid-template-columns:repeat(4,1fr);
}
.cat-grid-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  padding:16px 6px;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-sm); text-align:center;
  transition:transform .18s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.cat-grid-item:hover{
  transform:translateY(-3px);
  border-color:var(--accent);
  background:var(--card-2);
  box-shadow:0 8px 22px rgba(0,0,0,.4);
}
.cat-grid-icon{ font-size:26px; line-height:1; transition:transform .25s ease; }
.cat-grid-item:hover .cat-grid-icon{ transform:translateY(-3px) scale(1.12); }
.cat-grid-label{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.4px;
  color:var(--body);
}
.cat-grid-item:hover .cat-grid-label{ color:#fff; }

/* =============================================================
   ARCHIVE / SEARCH HEADER
   ============================================================= */
.archive-head{
  margin:4px 0 22px; padding:22px 20px;
  background:linear-gradient(135deg, var(--card), var(--bg-2));
  border:1px solid var(--border); border-left:4px solid var(--accent);
  border-radius:var(--radius);
}
.archive-head h1{ font-size:1.5rem; color:#fff; font-weight:700; line-height:1.3; }
.archive-head .archive-desc{ color:var(--meta); margin-top:8px; font-size:.95rem; line-height:1.6; }
.archive-head .archive-count{
  font-family:var(--mono); font-size:12px; color:var(--accent); margin-top:10px; display:inline-block;
}

/* =============================================================
   SINGLE POST
   ============================================================= */
.vho-breadcrumb{
  font-family:var(--mono); font-size:12px; color:var(--meta);
  display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:6px 0 16px;
}
.vho-breadcrumb a{ color:var(--meta); transition:color .2s; }
.vho-breadcrumb a:hover{ color:var(--accent); }
.vho-breadcrumb .sep{ color:var(--muted); }
.vho-breadcrumb .current{ color:var(--body); }

.post-title-main{
  font-size:1.85rem; font-weight:700; color:#fff; line-height:1.32;
  margin-bottom:14px; letter-spacing:.1px;
}
.post-meta-bar{
  display:flex; flex-wrap:nowrap; align-items:center; gap:14px;
  padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid var(--border);
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.post-meta-bar::-webkit-scrollbar{ display:none; }
.meta-item{ font-family:var(--mono); font-size:12px; color:var(--meta); display:inline-flex; align-items:center; gap:5px; white-space:nowrap; flex-shrink:0; }
.meta-item a{ color:var(--accent); }
.meta-item a:hover{ text-decoration:underline; }

.post-feature{ margin-bottom:18px; }
.post-feature img{ width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--border); }

/* TOC */
.toc-wrapper{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); margin-bottom:22px; overflow:hidden;
}
.toc-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px; cursor:pointer; user-select:none;
  font-weight:600; color:#fff;
  border-left:3px solid var(--accent);
}
.toc-header:hover{ background:var(--card-2); }
#toc-arrow{ color:var(--accent); font-size:12px; transition:transform .25s ease; }
.toc-content{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.toc-content.show{ max-height:1200px; }
.toc-list{ list-style:none; padding:6px 16px 16px; }
.toc-list li{ padding:5px 0; }
.toc-list li a{ color:var(--body); font-size:.92rem; transition:color .2s; }
.toc-list li a:hover{ color:var(--accent); }
.toc-list li.toc-h3{ padding-left:18px; }
.toc-list li.toc-h3 a{ color:var(--meta); font-size:.88rem; }

/* Post body / Hindi typography */
.post-body-content{
  font-size:19px; line-height:1.85; color:var(--body);
}
.post-body-content p{ margin:0 0 1.15em; }
.post-body-content h2{ font-size:1.4rem; color:#fff; font-weight:700; margin:1.5em 0 .55em; line-height:1.4; }
.post-body-content h3{ font-size:1.18rem; color:#f3f3f3; font-weight:600; margin:1.3em 0 .5em; }
.post-body-content h2,.post-body-content h3{ scroll-margin-top:120px; }
.post-body-content a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.post-body-content a:hover{ color:var(--accent-2); }
.post-body-content ul,.post-body-content ol{ margin:0 0 1.15em 1.3em; }
.post-body-content li{ margin-bottom:.5em; }
.post-body-content img{ border-radius:var(--radius); margin:1.2em auto; border:1px solid var(--border); }
.post-body-content blockquote{
  margin:1.3em 0; padding:14px 18px;
  border-left:4px solid var(--accent); background:var(--card);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; color:var(--text);
}
.post-body-content table{ width:100%; border-collapse:collapse; margin:1.3em 0; font-size:.95rem; }
.post-body-content th,.post-body-content td{ border:1px solid var(--border-2); padding:9px 12px; text-align:left; }
.post-body-content th{ background:var(--card); color:#fff; }
.post-body-content code{ background:var(--card); padding:2px 6px; border-radius:6px; font-family:var(--mono); font-size:.88em; color:var(--neon); }
.post-body-content pre{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px; overflow-x:auto; margin:1.3em 0; }
.post-body-content pre code{ background:none; padding:0; color:var(--body); }
.post-body-content iframe{ max-width:100%; border-radius:var(--radius); margin:1.2em 0; }

/* Auto-ad placeholder spacing (Auto Ads injects here naturally) */
.vh-auto-ad{ margin:22px 0; min-height:1px; text-align:center; clear:both; }

/* Share buttons — light brand-tinted, always visible (not just on hover) */
.post-share-end{ display:flex; flex-wrap:wrap; gap:9px; margin:26px 0; }
.ps-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; padding:9px 15px; border-radius:999px;
  border:1px solid transparent; transition:transform .15s, box-shadow .2s, filter .2s;
}
.ps-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.35); filter:brightness(1.05); }

.ps-btn.wa{ background:rgba(37,211,102,.14); color:var(--wa); border-color:rgba(37,211,102,.3); }
.ps-btn.fb{ background:rgba(24,119,242,.14); color:#5b9dff; border-color:rgba(24,119,242,.3); }
.ps-btn.tw{ background:var(--hover); color:#fff; border-color:var(--border-2); }
.ps-btn.cp{ background:rgba(229,57,53,.14); color:#ff7a75; border-color:rgba(229,57,53,.3); }

/* Tags */
.post-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:22px 0; }
.post-tags > span{ font-family:var(--mono); font-size:12px; color:var(--meta); }
.post-tags a{
  font-size:12.5px; padding:5px 12px; border-radius:999px;
  background:var(--card); border:1px solid var(--border-2); color:var(--body);
  transition:border-color .2s, color .2s;
}
.post-tags a:hover{ border-color:var(--accent); color:#fff; }

/* Author box (expandable — E-E-A-T / Publisher Trust) */
.vho-author-box{
  margin:18px 0; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-sm); border-left:3px solid var(--accent); overflow:hidden;
}
.vho-author-head{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:11px 14px; background:none; border:none; cursor:pointer;
  text-align:left; color:inherit; font-family:inherit;
}
.vho-author-pic{
  width:40px; height:40px; flex:0 0 auto; border-radius:50%;
  object-fit:cover; border:1px solid var(--border-2);
}
.vho-author-info{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.vho-author-name{ font-size:.9rem; font-weight:700; color:#fff; line-height:1.2; }
.vho-author-creds{ font-family:var(--mono); font-size:10.5px; color:var(--meta); line-height:1.3; }
.vho-author-role{ font-family:var(--mono); font-size:10.5px; color:var(--accent); line-height:1.3; }
.vho-author-caret{ flex:0 0 auto; color:var(--meta); font-size:.8rem; transition:transform .3s ease; }
.vho-author-box.open .vho-author-caret{ transform:rotate(180deg); }

.vho-author-bio{ padding:2px 16px 18px; border-top:1px solid var(--border); }
.vho-author-pic-lg{
  width:84px; height:84px; border-radius:50%; object-fit:cover;
  border:2px solid var(--accent); margin:16px auto 12px; display:block;
}
.vho-author-bio p{
  margin:0 auto; max-width:560px; font-size:.9rem; line-height:1.65; color:var(--body);
}

/* Bot signals (SEO footer block) */
.bot-signals{
  margin:22px 0; padding:14px 16px; border:1px dashed var(--border-2);
  border-radius:var(--radius-sm); font-family:var(--mono); font-size:11.5px; color:var(--muted);
}
.bot-signals .signal-row{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-bottom:6px; }
.bot-signals .signal-row:last-child{ margin-bottom:0; }
.bot-signals .signal-label{ color:var(--meta); }
.bot-signals a{ color:var(--accent); }

/* Related posts */
.vho-related-section{ margin-top:34px; padding-top:24px; border-top:1px solid var(--border); }
.vho-related-title{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  font-weight:700; color:#cfcfcf; margin-bottom:14px; position:relative; padding-left:14px;
}
.vho-related-title::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:5px; height:1em; border-radius:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2)); box-shadow:0 0 12px rgba(229,57,53,.5);
}
.vho-related-grid{ display:grid; gap:13px; grid-template-columns:repeat(2,1fr); }
.vho-related-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; transition:transform .2s, border-color .2s, box-shadow .2s;
}
.vho-related-card:hover{ transform:translateY(-4px); border-color:var(--accent); box-shadow:0 12px 28px rgba(0,0,0,.45); }
.vho-related-img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.vho-related-info{ padding:11px 12px 13px; }
.vho-related-card-title{
  font-size:.92rem; font-weight:600; color:var(--text); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.vho-related-date{ font-family:var(--mono); font-size:11px; color:var(--meta); margin-top:7px; }

/* =============================================================
   PAGINATION
   ============================================================= */
.pagination{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:34px 0 10px; }
.pagination .page-numbers{
  min-width:40px; height:40px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:14px; font-weight:600;
  background:var(--card); border:1px solid var(--border-2); border-radius:10px; color:var(--body);
  transition:border-color .2s, color .2s, background .2s;
}
.pagination .page-numbers:hover{ border-color:var(--accent); color:#fff; }
.pagination .page-numbers.current{ background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 4px 14px rgba(229,57,53,.3); }
.pagination .dots{ border:none; background:none; }

/* =============================================================
   MOBILE MENU (slides from right) + overlay
   ============================================================= */
#menu-overlay{
  position:fixed; inset:0; z-index:1100;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;
}
#menu-overlay.active{ opacity:1; visibility:visible; }

#mobile-menu{
  position:fixed; top:0; right:0; z-index:1200;
  width:min(310px,82vw); height:100%;
  background:var(--bg-2); border-left:1px solid var(--border);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
  box-shadow:-20px 0 40px rgba(0,0,0,.4);
  overflow-y:auto;
}
#mobile-menu.active{ transform:translateX(0); }
.mobile-menu-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px; border-bottom:1px solid var(--border);
}
.mobile-menu-close{ width:38px; height:38px; border-radius:10px; font-size:18px; color:var(--text); transition:background .2s,color .2s; }
.mobile-menu-close:hover{ background:var(--hover); color:var(--accent); }
.mobile-menu-links{ display:flex; flex-direction:column; padding:10px 0; }
.mobile-menu-links a{
  display:flex; align-items:center; gap:13px;
  padding:13px 20px; color:var(--body); font-size:.98rem; font-weight:500;
  border-left:3px solid transparent; transition:background .2s, color .2s, border-color .2s;
}
.mobile-menu-links a:hover{ background:var(--card); color:#fff; border-left-color:var(--accent); }
.menu-icon{ font-size:18px; width:22px; text-align:center; }

/* =============================================================
   SEARCH OVERLAY (fade + scale)
   ============================================================= */
#search-overlay{
  position:fixed; inset:0; z-index:1300;
  display:flex; align-items:flex-start; justify-content:center;
  padding:14vh 18px 0;
  background:rgba(8,8,8,.82);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s;
}
#search-overlay.active{ opacity:1; visibility:visible; }
.search-box{ width:100%; max-width:620px; transform:scale(.94); transition:transform .25s ease; }
#search-overlay.active .search-box{ transform:scale(1); }
.search-box form{
  display:flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--border-2);
  border-radius:14px; padding:6px 6px 6px 18px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.search-box input{
  flex:1; background:none; border:none; outline:none;
  color:#fff; font-size:1.05rem; font-family:var(--sans); padding:12px 0;
}
.search-box input::placeholder{ color:var(--muted); }
.search-close{ width:42px; height:42px; border-radius:10px; font-size:18px; color:var(--meta); transition:background .2s,color .2s; }
.search-close:hover{ background:var(--hover); color:var(--accent); }


/* =============================================================
   FOOTER
   ============================================================= */
#site-footer{
  border-top:1px solid var(--border); margin-top:30px;
  padding:30px 16px 36px; background:var(--bg-2);
}
.footer-links{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center;
  max-width:var(--maxw); margin:0 auto 16px;
}
.footer-links a{ color:var(--meta); font-size:.92rem; transition:color .2s; }
.footer-links a:hover{ color:var(--accent); }
.copyright{ text-align:center; font-family:var(--mono); font-size:12px; color:var(--muted); }

/* =============================================================
   404
   ============================================================= */
.error-404{ text-align:center; padding:70px 20px; }
.error-404 .err-emoji{ font-size:78px; margin-bottom:18px; }
.error-404 h1{ color:#fff; font-size:1.9rem; margin-bottom:14px; }
.error-404 p{ color:var(--meta); margin-bottom:24px; }
.btn-home{
  display:inline-block; padding:12px 28px; border-radius:999px; font-weight:600; color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 6px 18px rgba(229,57,53,.35); transition:transform .15s;
}
.btn-home:hover{ transform:translateY(-2px); }

.no-results{ color:var(--meta); text-align:center; padding:48px 0; font-size:1.02rem; }

/* Widgets (if sidebar used) */
.widget{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:18px; }
.widget-title{ font-size:1.05rem; color:#fff; margin-bottom:12px; }

/* =============================================================
   RESPONSIVE
   v3.2 — MOBILE-FIRST, TRUE LOCK: desktop pe koi alag multi-column
   grid nahi banta — wahi ek phone-column layout hai, bas SCALE-UP
   (bada) hota hai. Pehle kai jagah (.cat-grid 5-col, .vh-tile-grid
   2/3-col, .cat-featured horizontal, .vh-ftools-grid 6-col) desktop
   pe apni shape badal dete the — Vivek: "desktop pe mobile jaisi hi
   dikhe, bas badi" — un sabko neeche unset/disable kiya gaya hai,
   is single block mein taaki poora responsive-strategy ek jagah
   padha ja sake. */
@media (min-width:900px){
  :root{ --maxw: 760px; }         /* poora column bada, shape same */
  body{ font-size:17px; }         /* text bhi thoda bada (desktop = "badi mobile") */
}
@media (min-width:1200px){
  :root{ --maxw: 860px; }
  body{ font-size:18px; }
}
@media (min-width:600px){
  .hero-title{ font-size:1.75rem; }
}
@media (min-width:900px){
  .post-title-main{ font-size:2.15rem; }
  .hero{ margin-top:10px; }
  .hero-overlay{ padding:34px 32px; }
  .hero-title{ font-size:2.1rem; max-width:78%; }
  .section-heading h1{ font-size:1.5rem; }
}
@media (max-width:380px){
  body{ font-size:17px; }
  .post-body-content{ font-size:18px; }
  .logo-sub{ display:none; }
}

/* =============================================================
   VISTA HUB v3 — NEW FEATURES
   Ticker · Story scroll · NEW badge · Live search · Random posts
   ============================================================= */

/* ---------- Trending Ticker ---------- */
/* ब्लैक और डार्क ग्रीन प्रीमियम टिकर */
/* v2.2 — sticky: header(58px) + category-nav ke NEECHE chipka rehta hai.
   --vh-catnav-h JS set karta hai (main.js, category-nav ki real height —
   fixed px hardcode karne se chhote/bade screen pe gap/overlap aata). */
.ticker-bar {
  background: linear-gradient(90deg, #050505, #0a1f12);
  border-top: 1px solid #14331e;
  border-bottom: 1px solid #14331e;
  overflow: hidden;
  height: 38px;
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  position: sticky;
  top: 52px;
  z-index: 850;
}

/* नीयन ग्रीन लेबल (Neon Green) */
.ticker-label {
  background: #00ff88; /* नीयन हरा */
  color: #050505; /* डार्क ब्लैक टेक्स्ट */
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
  box-shadow: 3px 0 12px rgba(0, 255, 136, 0.2); /* हल्का हरा ग्लो */
  z-index: 2;
}

.ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  display: block;
}

.ticker-inner {
  white-space: nowrap;
  /* layout (flex) + scroll animation handled by css/animations.css → seamless vh-ticker */
}

/* लिंक्स का रंग (हल्का हरा) */
.ticker-item {
  color: #a3e6b9; 
  font-size: 14px;
  font-weight: 500;
  padding: 0 28px;
  text-decoration: none;
  transition: opacity 0.2s, color 0.2s;
}

/* लिंक्स के बीच का डॉट (•) */
.ticker-item::after {
  content: '•';
  margin-left: 28px;
  color: #00ff88;
  opacity: 0.5;
}

.ticker-item:hover {
  color: #ffffff; /* छूने पर सफ़ेद हो जाएगा */
  opacity: 1;
}

/* टिकर का engine अब css/animations.css में है (seamless vh-ticker + hover pause) */


/* ---------- Story Horizontal Scroll ---------- */
.story-section{ margin:20px 0; }
.story-scroll{
  display:flex;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:4px;
}
.story-scroll::-webkit-scrollbar{ display:none; }
.story-card{
  flex-shrink:0;
  width:120px;
  border-radius:14px;
  overflow:hidden;
  position:relative;
  text-decoration:none;
  display:block;
  aspect-ratio:9/16;
  background:#111;
  border:2px solid transparent;
  transition:border-color .2s, transform .2s;
}
.story-card:hover{
  border-color:var(--accent);
  transform:scale(1.04);
}
.story-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.story-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,0) 55%);
  display:flex;
  align-items:flex-end;
  padding:8px;
}
.story-title{
  color:#fff;
  font-size:11px;
  font-weight:600;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.story-cat-badge{
  position:absolute;
  top:8px;
  left:8px;
  background:var(--accent);
  color:#fff;
  font-size:9px;
  font-weight:700;
  padding:2px 6px;
  border-radius:4px;
  text-transform:uppercase;
}

/* ---------- NEW Badge ---------- */
.new-badge{
  display:inline-flex;
  align-items:center;
  background:linear-gradient(135deg,#e53935,#ff6b6b);
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.5px;
  padding:2px 6px;
  border-radius:4px;
  text-transform:uppercase;
  vertical-align:middle;
  margin-left:4px;
  line-height:1.4;
}

/* ---------- Live Search Results ---------- */
.live-search-results{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:var(--hover);
  border:1px solid var(--border-2);
  border-top:none;
  border-radius:0 0 12px 12px;
  max-height:320px;
  overflow-y:auto;
  z-index:9999;
  display:none;
}
.live-search-results.active{ display:block; }
.live-search-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  text-decoration:none;
  color:var(--text);
  border-bottom:1px solid var(--border);
  transition:background .15s;
  font-size:13px;
}
.live-search-item:last-child{ border-bottom:none; }
.live-search-item:hover{ background:var(--hover); }
.live-search-thumb{
  width:42px;
  height:28px;
  object-fit:cover;
  border-radius:4px;
  flex-shrink:0;
  background:#222;
}
.live-search-title{ flex:1; line-height:1.4; }
.search-loading, .search-no-results{
  padding:14px;
  text-align:center;
  color:var(--meta);
  font-size:13px;
}
#search-overlay .search-box{ position:relative; }

/* ---------- Back to Top v3 ---------- */
#back-to-top{
  position:fixed;
  bottom:calc(24px + var(--vh-anchor, 0px));
  right:18px;
  width:46px;
  height:46px;
  background:linear-gradient(135deg,#e53935,#b71c1c);
  color:#fff;
  border:none;
  border-radius:50%;
  font-size:20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:translateY(12px) scale(.85);
  transition:opacity .25s, transform .25s;
  z-index:999;
  box-shadow:0 4px 18px rgba(229,57,53,.45);
}
#back-to-top.show{
  opacity:1;
  transform:translateY(0) scale(1);
}
#back-to-top:hover{
  background:linear-gradient(135deg,#ff6b6b,#e53935);
  box-shadow:0 6px 24px rgba(229,57,53,.6);
  transform:translateY(-2px) scale(1.05);
}

/* ============================================================
   PHASE 2  —  Category (1 BIG + 4 small) · Blue accent · Widgets
   Tweak freely: red = var(--accent) · blue = var(--blue) (#00d4ff)
   ============================================================ */

/* secondary blue on "View All" hover */
.view-all:hover{ color:#fff; border-color:var(--blue); background:rgba(0,212,255,.10); }

/* ---------- BIG featured card (first post of a category) ---------- */
.cat-featured{
  display:block; position:relative; text-decoration:none;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; margin-bottom:14px;
  transition:border-color .2s, transform .2s, box-shadow .25s;
}
.cat-featured:hover{ border-color:var(--blue); box-shadow:0 0 22px rgba(0,212,255,.18); }
.cat-featured-thumb{ width:100%; aspect-ratio:16/9; overflow:hidden; background:#111; }
.cat-featured-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
.cat-featured:hover .cat-featured-img{ transform:scale(1.05); }
.cat-featured-body{ padding:14px 16px 18px; }
.cat-featured-badge{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.5px; color:#fff;
  background:linear-gradient(90deg, var(--accent), var(--blue));
  padding:4px 13px; border-radius:20px; margin-bottom:10px;
}
.cat-featured-title{ font-size:1.28rem; line-height:1.4; font-weight:700; color:var(--text); }
.cat-featured-meta{ margin-top:8px; font-size:.82rem; color:var(--meta); font-family:var(--mono); }

/* ---------- 4 small cards ---------- */
.cat-small-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:28px;
}
.cat-small-card{
  display:block; text-decoration:none; background:var(--card);
  border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;
  transition:border-color .2s, transform .2s;
}
.cat-small-card:hover{ border-color:var(--blue); transform:translateY(-3px); }
.cat-small-thumb{ width:100%; aspect-ratio:16/9; overflow:hidden; background:#111; }
.cat-small-img{ width:100%; height:100%; object-fit:cover; display:block; }
.cat-small-title{
  font-size:.9rem; line-height:1.4; font-weight:600; color:var(--text);
  padding:9px 10px 12px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* v3.2 — MOBILE-FIRST LOCK: pehle yahan desktop pe .cat-featured
   horizontal-flex ban jaata tha aur .cat-small-grid 4-column ho
   jaata tha — shape badal jaati thi. Ab wahi mobile stacked/2-col
   shape har width pe rehti hai, --maxw se poora block bada dikhta
   hai (Vivek: "desktop pe mobile jaisi hi dikhe, bas badi"). */

/* ---------- Widget (gadget) areas ---------- */
.vh-widget-area{ margin:20px 0; }
.vh-widget-area .widget{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px; margin-bottom:14px;
}
.vh-widget-area .widget-title{
  font-size:1rem; font-weight:700; color:var(--text); margin:0 0 10px;
  padding-left:10px; border-left:3px solid var(--blue);
}

/* category icon tiles: blue glow on hover (secondary accent) */
.cat-grid-item:hover{ border-color:var(--blue); box-shadow:0 0 16px rgba(0,212,255,.15); }



/* Hero: colored category pill + description (date/time removed) */
.hero-cat{ background:var(--c,var(--accent)) !important; }
.hero-desc{
  margin:10px 0 0; color:#ececec; line-height:1.5; max-width:92%;
  font-size:clamp(.9rem,3.6vw,1rem);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* v3.6 — white text readable on light images (subtle black outline) */
.hero-title,.hero-desc{
  text-shadow:0 0 4px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.85);
}

/* v3.22 — header category nav: static, tappable, manual scroll.
   (v3.6 ka auto-scroll marquee hata diya — chalti pill pe tap nahi hota tha.)
   Base rules line ~145 pe hain; ye sirf momentum-scroll + edge-fade add karta hai. */
/* v3.29 — overflow:hidden HATA DIYA: dropdown isse clip ho jaata tha.
   Horizontal scroll .cat-nav-inner khud sambhalta hai (overflow-x:auto),
   isliye nav pe hidden ki zaroorat nahi. */
#category-nav{ position:sticky; }
.cat-nav-inner{
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;   /* swipe-nav ke saath takraav na ho */
}
.cat-nav-item{ scroll-snap-align:start; }
.cat-nav-item:active{ transform:scale(.96); }
/* .is-active ab v3.27 block mein define hai (neeche) */

/* ============================================================
   v3.9 — READ-MORE GATE (single posts)
   Full content stays in DOM (SEO-safe); JS caps it visually to
   ~65% height, only for genuinely long posts. Progressive
   enhancement: with JS off, full article shows, no gate at all.
   ============================================================ */
.vh-gate{ position:relative; overflow:hidden; transition:max-height .45s ease; }
.vh-gate.vh-gate--capped::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:120px;
  background:linear-gradient(to bottom, rgba(8,8,8,0) 0%, var(--bg) 90%);
  pointer-events:none;
}
.vh-gate-more{ text-align:center; margin:6px 0 8px; }
.vh-gate-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:#fff; font-weight:700; font-size:.98rem;
  font-family:var(--sans); border:none; border-radius:999px; padding:13px 30px;
  cursor:pointer; box-shadow:0 6px 20px rgba(229,57,53,.35);
  transition:filter .18s ease, transform .12s ease;
}
.vh-gate-btn:hover{ filter:brightness(1.08); }
.vh-gate-btn:active{ transform:scale(.97); }
.vh-gate-btn:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* For You peek — right below the button, shows a bit of the first card */
.vh-gate-foryou{ margin-top:4px; }


/* ============================================================
   v0.1 — PERFORMANCE: per-CARD render skipping (grid-level se shift)

   PEHLE (v3.14): `content-visibility:auto` .posts-grid aur
   .vho-related-section pe tha. Spec ke hisaab se ye property element
   pe `contain: layout style paint` HAMESHA lagati hai — matlab poora
   grid Auto-Ads insertion-scanner ke liye ek sealed black-box ban
   gaya tha. Mobile ke tight single-column layout mein scanner ko
   cards ke beech koi valid boundary milti hi nahi thi = ads gayab
   (desktop wide viewport pe kabhi-kabhi mil jaati thi, isliye wahan
   chalta raha aur bug chhupa raha).

   AB: skipping har CARD pe individually (.vh-card / .ovl-card, niche
   card kill-zone block dekho). Perf benefit wahi ka wahi — offscreen
   card ka paint/layout skip — par grid khud OPEN hai: Google cards
   ke DARMIYAN ad daal sakta hai. `contain-intrinsic-size:auto <est>`
   se browser last-rendered size yaad rakhta hai, scroll-jump nahi.
   ============================================================ */

/* Smoother in-page anchor jumps, respecting reduced-motion */
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }

/* ============================================================
   v3.16 — Sticky native-share FAB (single posts)
   5s बाद fade-in (expanded), फिर paper-plane में सिमट जाए,
   ~हर 13s पर "शेयर करें" label झाँके (reminder). Tap → native
   share sheet (सारे apps); desktop पर link-copy fallback.
   ============================================================ */
/* v3.22 — share FAB: WhatsApp-green, glassy/transparent, smaller.
   #25D366 = WhatsApp brand green. 82% alpha + blur so the page shows through. */
.vh-fab-share{
  position:fixed; z-index:920;
  right:14px; bottom:calc(18px + env(safe-area-inset-bottom) + var(--vh-anchor, 0px));
  display:inline-flex; align-items:center;
  background:rgba(37,211,102,.82); color:#fff;
  backdrop-filter:blur(10px) saturate(1.25);
  -webkit-backdrop-filter:blur(10px) saturate(1.25);
  border:1px solid rgba(37,211,102,.55);
  border-radius:999px; cursor:pointer;
  padding:10px; line-height:0;
  box-shadow:0 6px 20px rgba(37,211,102,.28);
  opacity:0; transform:translateY(24px) scale(.85); pointer-events:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1),
             padding .38s ease, background .25s ease, box-shadow .25s ease;
}
.vh-fab-share.show{ opacity:1; transform:none; pointer-events:auto; }
.vh-fab-share:active{ transform:scale(.93); }
.vh-fab-share.expanded{
  padding-left:14px;
  background:rgba(37,211,102,.92);
  box-shadow:0 8px 26px rgba(37,211,102,.42);
}
.vh-fab-label{
  max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  font-family:var(--sans); font-size:.74rem; font-weight:600; line-height:1;
  transition:max-width .38s ease, opacity .3s ease, margin .38s ease;
}
.vh-fab-share.expanded .vh-fab-label{ max-width:130px; opacity:1; margin-right:7px; }
.vh-fab-icon{ display:inline-grid; place-items:center; flex:0 0 auto; }
.vh-fab-icon svg{ width:19px; height:19px; display:block; }
.vh-fab-share:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* Blur unsupported (older Android WebView) → solid green, still on-brand */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vh-fab-share{ background:#25D366; }
  .vh-fab-share.expanded{ background:#1fb457; }
}

/* ============================================================
   v2.3 — .vh-audio POORA REDESIGN vh-card.css mein (mockup: flat
   .vh-player row, amber, koi pulsing border/blinking dot nahi).
   Purana pink BEM system (.vh-audio__row/__btn/__meta/__kicker/
   __track/__fill/__bars/__time) yahan se GAYA — main.js ab wo
   markup banata hi nahi, aur `.vh-audio__kicker` naam reuse hone
   se iska blinking dot + uppercase mono style naye kicker pe leak
   ho raha tha. Sirf native <audio>-hider bacha, wo abhi bhi zaroori
   hai (main.js `controls` attr hataata hai par element khud CSS se
   collapse karna padta hai).
   ============================================================ */
.vh-audio audio{
  position:absolute !important; width:1px !important; height:0 !important;
  opacity:0 !important; pointer-events:none; filter:none !important;
  margin:0 !important; padding:0 !important; border:0 !important;
}

/* v3.28 — radio pill strip se hata diya (Vivek). CSS bhi gaya. */

/* ============================================================
   v3.24 — CATEGORY GRID: 10 tiles ke liye fix
   4-col grid pe 10 items = aakhri row mein 2 orphan tile (screenshot mein
   dikh raha tha). 2/3/5 columns se rows hamesha bharti hain: 5×2 / 2×5.
   Halke background + per-category accent tint.
   ============================================================ */
.cat-grid{
  grid-template-columns:repeat(2,1fr);   /* mobile: 2×5 — sab bhare */
  gap:10px;
}
/* v3.2 — MOBILE-FIRST LOCK: 5-column desktop restructure hataya.
   2-column shape ab HAR width pe same rehti hai — --maxw badhne se
   poora grid apne aap bada dikhta hai, shape badle bina. */

.cat-grid-item{
  background:linear-gradient(150deg, var(--card-2) 0%, var(--card) 100%);
  border:1px solid var(--border-2);
  padding:18px 8px;
  position:relative; overflow:hidden;
}
/* upar halki accent sheen — flat nahi lagega */
.cat-grid-item::after{
  content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:.35; transition:opacity .2s ease;
}
.cat-grid-item:hover::after{ opacity:1; }
.cat-grid-item:hover{
  border-color:var(--accent);
  background:linear-gradient(150deg, var(--hover) 0%, var(--card-2) 100%);
}
.cat-grid-item:active{ transform:scale(.97); }
.cat-grid-icon{ font-size:24px; }

/* ============================================================
   v3.25 — CATEGORY PAGE: Zone 1 BADE tiles (Pinterest masonry)
   NO CROP — image apni natural height pe (height:auto).
   16:9 chhota tile, 9:16 wallpaper lamba tile — jaisa hai waisa.
   ============================================================ */
/* Home page jaisa: mobile pe 1 BADA column, full-width tile.
   (v3.25 mein 2 column tha → cards chhote + blurry the.) */
.vh-tile-grid{
  column-count:1; column-gap:16px;
  margin-top:6px;
}
/* v3.2 — MOBILE-FIRST LOCK: 2/3-column desktop restructure hataya.
   Single column ab har width pe — --maxw badhne se tile khud bada
   dikhega, masonry-multi-column ki zaroorat nahi. */


/* v0.1 — grid-level content-visibility HATAYA (implicit contain poore
   grid ko Auto-Ads scanner se seal kar deta tha). Ab per-card skipping
   hai — .ovl-card pe, card kill-zone block mein. */

/* ============================================================
   v3.26 — z-index sirf. (v3.25 ka min-height/background hack HATA DIYA:
   Iron Man wala card black isliye tha kyunki WALLPAPER hi black hai —
   bug nahi tha. Grey min-height patch har card pe dikhta.)
   ============================================================ */


/* ---------- Swipe hint: archive-head pe chevrons ---------- */
/* ============================================================
   v3.27 — archive-head BOX HATA DIYA.
   Category navigation ab poori tarah header strip se. Box khaali jagah
   kha raha tha, arrow title pe overlap kar raha tha, aur "swipe karein"
   hint koi padhta nahi tha.
   ============================================================ */

/* h1 crawlers/screen-readers ke liye — visually hidden, SEO intact */
.vh-sr-only{
  position:absolute !important; width:1px; height:1px;
  margin:-1px; padding:0; border:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.archive-desc--bare{
  margin:0 0 12px; color:var(--meta);
  font-size:.86rem; line-height:1.55;
}

/* ---------- v3.28: Strip = asli switcher (sliding indicator ke saath) ---------- */
/* v2.2 — W5: header(44px) ke neeche chipki, ultra-patli auto-scroll strip */
#category-nav{ position:sticky; top:52px; z-index:900; }

/* track relative — indicator isi ke coordinate space mein translate hota hai,
   isliye scroll ke saath khud-ba-khud chalta hai */
.cat-nav-inner{ position:relative; }

/* sliding indicator — active pill ke neeche */
.cat-nav-ind{
  position:absolute; left:0; bottom:4px; height:3px; width:0;
  border-radius:99px; z-index:0;
  background:linear-gradient(90deg, var(--accent) 0%, var(--pink) 100%);
  box-shadow:0 0 12px rgba(229,57,53,.55);
  opacity:0; transform:translateX(0);
  transition:transform .34s cubic-bezier(.25,.9,.25,1),
             width .34s cubic-bezier(.25,.9,.25,1),
             opacity .2s ease;
  pointer-events:none;
}
.cat-nav-ind.is-on{ opacity:1; }

/* pills indicator ke upar rahein */
.cat-nav-item{ position:relative; z-index:1; }

/* active pill — ab ye page ka title bhi hai */
.cat-nav-item.is-active{
  background:linear-gradient(135deg, var(--accent) 0%, #c62828 100%);
  border-color:var(--accent); color:#fff;
  box-shadow:0 4px 18px rgba(229,57,53,.42);
  font-weight:700;
}
.cat-nav-item.is-active:hover{ transform:none; }


/* pill switch smooth */
.cat-nav-item{
  transition:background .24s ease, border-color .24s ease,
             color .24s ease, box-shadow .24s ease, transform .15s ease;
}

@media (prefers-reduced-motion:reduce){
  .cat-nav-item{ transition:none; }
  .cat-nav-ind{ transition:opacity .2s ease; }
}


/* ============================================================
   v3.25 — SUBDOMAIN TOOL CTA (16:4 banner)
   section-heading ke baad, posts-grid se pehle. new-tab.
   ============================================================ */
.vh-promo{
  --t:  var(--pink);
  --t2: var(--pink-dk);
  position:relative; display:flex; align-items:center; gap:12px;
  margin:0 0 14px; padding:12px 13px;
  border-radius:var(--radius-sm); overflow:hidden;
  background:linear-gradient(135deg, var(--card-2) 0%, var(--card) 100%);
  border:1px solid var(--t2);
  transition:transform .18s ease, border-color .2s ease, box-shadow .22s ease;
  min-height:64px;
}
.vh-promo:hover{
  transform:translateY(-2px); border-color:var(--t);
  box-shadow:0 10px 28px rgba(0,0,0,.5);
}
.vh-promo:active{ transform:scale(.985); }

/* sweeping glow — clickbait feel, par bhadka hua nahi */
.vh-promo__glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 200% at 0% 50%, color-mix(in srgb, var(--t) 22%, transparent) 0%, transparent 62%);
}
@supports not (background: color-mix(in srgb, red 20%, transparent)){
  .vh-promo__glow{ background:radial-gradient(130% 200% at 0% 50%, rgba(255,255,255,.07) 0%, transparent 62%); }
}
.vh-promo::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent);
  transform:skewX(-18deg); pointer-events:none;
  animation:vh-promo-sheen 4.5s ease-in-out infinite;
}
@keyframes vh-promo-sheen{ 0%,72%{left:-60%} 92%,100%{left:118%} }

.vh-promo__icon{
  position:relative; z-index:1; flex:0 0 auto;
  width:42px; height:42px; border-radius:11px;
  display:grid; place-items:center; font-size:21px; line-height:1;
  background:linear-gradient(135deg, color-mix(in srgb, var(--t) 26%, transparent), transparent);
  border:1px solid var(--t2);
}
@supports not (background: color-mix(in srgb, red 20%, transparent)){
  .vh-promo__icon{ background:rgba(255,255,255,.05); }
}

.vh-promo__body{ position:relative; z-index:1; flex:1 1 auto; min-width:0; }
.vh-promo__name{
  display:block; font-family:var(--mono);
  font-size:9px; font-weight:700; letter-spacing:.9px; text-transform:uppercase;
  color:var(--t); margin-bottom:2px;
}
.vh-promo__head{
  display:block; color:var(--text); font-weight:700; line-height:1.3;
  font-size:clamp(.8rem,3.3vw,.92rem);
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

.vh-promo__cta{
  position:relative; z-index:1; flex:0 0 auto;
  display:inline-flex; align-items:center; gap:4px;
  padding:8px 11px; border-radius:999px;
  background:linear-gradient(135deg, var(--t) 0%, var(--t2) 100%);
  color:#fff; font-weight:700; font-size:.72rem; white-space:nowrap;
  box-shadow:0 3px 12px color-mix(in srgb, var(--t) 40%, transparent);
}
@supports not (box-shadow: 0 0 0 color-mix(in srgb, red 20%, transparent)){
  .vh-promo__cta{ box-shadow:0 3px 12px rgba(0,0,0,.4); }
}
.vh-promo__cta svg{ width:13px; height:13px; transition:transform .2s ease; }
.vh-promo:hover .vh-promo__cta svg{ transform:translateX(3px); }

/* bahut chhoti screen — CTA text chhupao, sirf arrow */
@media (max-width:359px){
  .vh-promo__cta{ padding:8px 9px; font-size:0; gap:0; }
  .vh-promo__cta svg{ width:15px; height:15px; }
}

/* ---------- tints ---------- */
.vh-promo--pink  { --t:#ff2d6f; --t2:#c81e52; }
.vh-promo--cyan  { --t:#00d4ff; --t2:#0b8fae; }
.vh-promo--violet{ --t:#a855f7; --t2:#7127b8; }
.vh-promo--amber { --t:#f59e0b; --t2:#b06f05; }
.vh-promo--green { --t:#22c55e; --t2:#158641; }
.vh-promo--blue  { --t:#3b82f6; --t2:#1d55b0; }

@media (prefers-reduced-motion:reduce){
  .vh-promo::after{ animation:none; display:none; }
  .vh-promo:hover{ transform:none; }
}


/* ============================================================
   v3.29 — TOOLS PILL + DROPDOWN
   Strip ki pehli pill. data-slug nahi hai → swipe/AJAX se bahar.
   ============================================================ */
.cat-nav-item.is-tools{
  display:inline-flex; align-items:center; gap:5px;
  background:linear-gradient(135deg, rgba(255,45,111,.20) 0%, rgba(229,57,53,.16) 100%);
  border-color:var(--pink-dk); color:#ffd9e5;
  font-weight:700; cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.5px;
  padding:7px 12px; border-radius:999px; white-space:nowrap;
  border-width:1px; border-style:solid;
}
.cat-nav-item.is-tools:hover{
  border-color:var(--pink); color:#fff;
  box-shadow:0 4px 16px rgba(255,45,111,.30);
}
.is-tools .tools-caret{
  width:11px; height:11px; transition:transform .22s ease;
}
.is-tools[aria-expanded="true"] .tools-caret{ transform:rotate(180deg); }
.is-tools[aria-expanded="true"]{
  background:linear-gradient(135deg, var(--pink) 0%, var(--pink-dk) 100%);
  color:#fff; border-color:var(--pink);
}

/* ---------- dropdown ---------- */
.vh-tools-backdrop{
  position:fixed; inset:0; z-index:940;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  opacity:0; transition:opacity .2s ease;
}
.vh-tools-backdrop.is-open{ opacity:1; }

.vh-tools-menu{
  position:absolute; z-index:950;
  top:calc(100% + 8px); left:12px; right:12px;
  max-width:420px;
  background:linear-gradient(160deg, var(--card-2) 0%, var(--card) 100%);
  border:1px solid var(--border-2);
  border-radius:var(--radius);
  box-shadow:0 18px 50px rgba(0,0,0,.65);
  overflow:hidden;
  opacity:0; transform:translateY(-8px) scale(.98);
  transform-origin:top left;
  transition:opacity .2s ease, transform .22s cubic-bezier(.2,.8,.25,1);
}
.vh-tools-menu.is-open{ opacity:1; transform:none; }
@media (min-width:560px){ .vh-tools-menu{ left:16px; right:auto; width:400px; } }

.vh-tools-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px 10px; border-bottom:1px solid var(--border);
}
.vh-tools-title{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.9px; color:var(--pink); text-transform:uppercase;
}
.vh-tools-close{
  background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:15px; line-height:1; padding:4px 6px; border-radius:6px;
}
.vh-tools-close:hover{ color:#fff; background:var(--hover); }

.vh-tools-list{ padding:6px; max-height:min(64vh, 460px); overflow-y:auto; }

.vh-tool{
  --t:  var(--pink);
  --t2: var(--pink-dk);
  display:flex; align-items:center; gap:11px;
  padding:10px 10px; border-radius:var(--radius-sm);
  transition:background .18s ease, transform .14s ease;
}
.vh-tool:hover{ background:var(--hover); }
.vh-tool:active{ transform:scale(.985); }

.vh-tool__icon{
  flex:0 0 auto; width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center; font-size:19px; line-height:1;
  background:linear-gradient(135deg, color-mix(in srgb, var(--t) 24%, transparent), transparent);
  border:1px solid var(--t2);
}
@supports not (background: color-mix(in srgb, red 20%, transparent)){
  .vh-tool__icon{ background:rgba(255,255,255,.05); }
}
.vh-tool__body{ flex:1 1 auto; min-width:0; }
.vh-tool__name{
  display:block; color:var(--text); font-weight:700;
  font-size:.9rem; line-height:1.25;
}
.vh-tool__desc{
  display:block; color:var(--meta); font-size:.75rem; margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vh-tool__go{
  flex:0 0 auto; width:15px; height:15px; color:var(--t);
  transition:transform .2s ease;
}
.vh-tool:hover .vh-tool__go{ transform:translateX(3px); }

.vh-tool--pink  { --t:#ff2d6f; --t2:#c81e52; }
.vh-tool--cyan  { --t:#00d4ff; --t2:#0b8fae; }
.vh-tool--violet{ --t:#a855f7; --t2:#7127b8; }
.vh-tool--amber { --t:#f59e0b; --t2:#b06f05; }
.vh-tool--green { --t:#22c55e; --t2:#158641; }
/* v1.1 — INTERNAL hub entry: gold = ghar ka, premium, sabse alag */
.vh-tool--gold  { --t:#FFD24C; --t2:#b8860b; }

/* v1.1 — dropdown chips: 6 top tools ke deep-links (#emi, #age…) */
.vh-tools-chips{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:2px 10px 12px; margin-bottom:4px;
  border-bottom:1px solid var(--border);
}
.vh-chip{
  display:inline-flex; align-items:center; gap:4px;
  background:var(--card); border:1px solid var(--border-2);
  color:var(--body); font-size:.8rem; font-weight:600;
  padding:7px 12px; border-radius:99px;
  transition:border-color .15s ease, color .15s ease;
}
.vh-chip:hover{ border-color:var(--vh-gold); color:var(--vh-gold); }

/* v1.1 — FOOTER TOOLS STRIP: categories-grid jaisa native look,
   har page se hub ko 6 keyword-anchor deep-links (site-level nav,
   article-content ke andar spam-box NAHI). */
.vh-ftools{ max-width:var(--maxw); margin:0 auto 26px; padding:0 16px; }
.vh-ftools h2{
  color:var(--text); font-size:1rem; margin-bottom:12px;
  display:flex; align-items:center; gap:8px;
}
.vh-ftools h2::after{ content:''; flex:1; height:1px; background:var(--border-2); }
.vh-ftools-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
/* v3.2 — MOBILE-FIRST LOCK: 6-column desktop restructure hataya.
   2-column shape ab har width pe same, --maxw se bada dikhega. */
.vh-ftool{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:14px 10px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--body); font-size:.82rem; font-weight:600; text-align:center;
  transition:transform .15s ease, border-color .15s ease;
}
.vh-ftool:hover{ transform:translateY(-2px); border-color:var(--vh-gold); color:var(--text); }
.vh-ftool .fi{ font-size:1.5rem; line-height:1; }
.vh-ftool--all{ border-style:dashed; border-color:var(--border-2); color:var(--vh-gold); }

@media (prefers-reduced-motion:reduce){
  .vh-tools-menu, .vh-tools-backdrop{ transition:opacity .15s ease; }
  .vh-tools-menu{ transform:none !important; }
  .is-tools .tools-caret{ transition:none; }
}

/* ============================================================
   v3.30 — CLIENT-SIDE SHUFFLE support
   PHP har section mein 2x cards bhejta hai. JS shuffle karke `data-show`
   jitne rakhta hai, baaki hata deta hai.

   Yahan ka kaam: extra cards ko PEHLE HI chhupa do, taaki paint pe
   flash na ho. `.vh-shuffled` JS lagata hai — uske baad DOM mein sirf
   `data-show` jitne bache hote hain, isliye rule bekaar ho jaata hai.

   JS off / fail → `.vh-shuffled` kabhi nahi lagti → extra cards chhupe
   rehte hain → user ko theek utne hi cards dikhte hain. Kuch nahi tootta.
   ============================================================ */
.posts-grid.vh-shuffle > *:nth-child(n+7){ display:none; }
.posts-grid.vh-shuffle[data-show="5"] > *:nth-child(n+6){ display:none; }
.posts-grid.vh-shuffle[data-show="4"] > *:nth-child(n+5){ display:none; }
.posts-grid.vh-shuffle.vh-shuffled > *{ display:revert; }

/* ============================================================
   v3.31 — AdSense Auto Ads: TOP ZONE PROTECTION

   Kya protect ho raha hai (single post ke sabse upar):
     breadcrumb → title → meta bar → featured image → TOC → audio player

   Iske NEECHE (article body, related posts, feed) Auto Ads ko poori
   chhoot hai — Vivek ne wahi chaaha.

   Kaise kaam karta hai:
   1. `contain:layout style` — DOM sub-tree ko isolate karta hai. Auto Ads
      ka script insertion point dhundhne ke liye layout naapta hai; contained
      tree mein use koi valid "text block boundary" nahi milta.
   2. `.vh-noads > *` pe `contain:layout` — har child bhi isolated.
   3. AdSense apne inject kiye elements ko `ins.adsbygoogle` deta hai.
      Agar phir bhi ghus jaye to CSS se hide kar rahe hain — ye last resort
      hai, revenue-safe (ad load hi nahi hota, sirf top zone mein).

   NOTE: koi official "exclude" attribute nahi hai. Google ke "Excluded
   areas" DOM-number based hain, aur hamara #site-wrapper AJAX se replace
   hota hai (swipe nav) — numbers shift ho jaate. Isliye CSS/contain wala
   raasta zyada tikau hai.
   ============================================================ */
.vh-post-head{
  contain:layout style;
  position:relative;
}
.vh-post-head > *{ contain:layout; }

/* audio player ko main.js `.vh-noads` deta hai */
.vh-noads{ contain:layout style; }

/* v2.0 — display:none SAB HATA (AdSense: served ad chhupana = viewability 0
   → serving throttle + policy grey-zone; yahi mobile pe "ads kam" ka ek
   culprit tha). `contain` upar already scanner ko insertion point nahi
   deta. Phir bhi kuch aa jaaye → AdSense dashboard → Auto ads →
   "Excluded areas" se us zone ko draw karke rok — theme se nahi. */

/* Horizontal scroll containers — ad kabhi nahi aana chahiye,
   warna scroll toot jaata hai */
.cat-nav-inner, .story-scroll, .post-meta-bar{ contain:layout style; }
/* v2.0 — yahan ka display:none bhi gaya (wahi viewability-throttle wajah).
   `contain` in strips ko waise hi seal karta hai; zaroorat pade to
   AdSense "Excluded areas". */

/* ------------------------------------------------------------
   v0.1 — FEED GRIDS: cards ke BEECH Auto Ads ALLOWED.

   PEHLE (v2.0): `.posts-grid`/`.vh-tile-grid` pe `contain:layout style`
   + sibling-ad display:none + grid-level content-visibility (v3.14) —
   teeno milke poora grid Auto-Ads scanner ke liye sealed black-box
   bana rahe the. Mobile ke single-column tight layout mein scanner ko
   koi insertion boundary milti hi nahi thi = mobile pe ads gayab.
   Desktop wide viewport pe kabhi mil jaati thi, isliye wahan chalta
   raha aur bug chhupa raha.

   AB: grid khud OPEN hai (na contain, na content-visibility, na block).
   Overlap wali purani multicol bimari (ad card ke upar float, title
   dhakna) ka ilaaj surgical hai — GRID SPANNER: Google grid ke andar
   (cards ke beech) jo bhi inject kare, `column-span:all` se full-width
   block banta hai. Multicol columns uske upar-niche saaf split ho
   jaate hain — overlap ho hi nahi sakta. Mobile (column-count:1) pe
   no-op — ad waise hi full-width aata hai.
   ------------------------------------------------------------ */
.posts-grid > ins.adsbygoogle,
.posts-grid > .google-auto-placed,
.posts-grid > .vh-infeed,
.vh-tile-grid > ins.adsbygoogle,
.vh-tile-grid > .google-auto-placed,
.vh-tile-grid > .vh-infeed{
  /* v2.0 — grid ab single-source (vh-card.css, bina !important; masonry
     DELETED). Full-width row ke liye grid-column hi kaafi hai; column-span
     sirf legacy-safety fallback hai. */
  grid-column:1 / -1;
  column-span:all;
  -webkit-column-span:all;
  display:block;
  width:100%;
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  margin:16px 0;
}

/* ------------------------------------------------------------
   v3.0 — IN-FEED WRAPPER (jank-proof by construction)
   - min-height RESERVED: fluid in-feed fill hone pe resize wrapper
     ke ANDAR hota hai; feed ke cards apni jagah se nahi hilte (CLS≈0).
   - contain:layout — fill/resize ka reflow wrapper-boundary pe rukta
     hai, poore feed ka relayout kabhi trigger nahi hota. (paint/style
     containment JAANBUJHKE nahi — ad iframe apni marzi ka paint
     karta hai, use chhedna nahi.)
   - "विज्ञापन" tag — AdSense policy: native-dikhne wale ads pe label.
   - unfilled hone par global collapse-rule (niche AUTO ADS GLOBAL
     TAMING) ins ko 0 kar deta hai; wrapper ka min-height bhi tabhi
     collapse ho, iske liye :has() rule — supported browsers me khali
     grey patti bhi nahi dikhegi, baaki me sirf ek chhota gap rahega.
   ------------------------------------------------------------ */
.vh-infeed{
  contain:layout;
  min-height:150px;
  position:relative;
  border-radius:var(--radius, 14px);
  background:var(--card, #16181b);
  border:1px solid var(--border, #23262a);
  padding:26px 10px 10px;
}
.vh-infeed-tag{
  position:absolute; top:6px; left:12px;
  font-size:.62rem; letter-spacing:.4px;
  color:var(--meta, #8b9097); opacity:.75;
  text-transform:uppercase;
}
.vh-infeed ins.adsbygoogle{ display:block; width:100%; }
#post-body .vh-infeed{ margin:18px 0 22px; }
.vh-infeed:has(ins[data-ad-status="unfilled"]),
.vh-infeed:has(ins[data-ad-status="unfill-optimized"]){
  /* v2.0 — !important: `.vh-shuffle.vh-shuffled > *` (3 classes) is rule ko
     specificity me haraa deta tha → shuffle grids me khaali grey
     "विज्ञापन" box reh jaata tha. Ab collapse hamesha jeetta hai. */
  display:none !important;
}

/* ------------------------------------------------------------
   v0.1 — CARD KILL-ZONE (Vivek: "card ke andar ad NAHI")
   Har card ek SEALED unit hai:
     - `contain:layout style` — Auto-Ads scanner card ke andar
       insertion point nahi dekh sakta
     - `content-visibility:auto` — offscreen card ka paint/layout
       skip (v3.14 ka perf engine, ab grid ki jagah PER-CARD;
       `auto <est>` = browser rendered size yaad rakhta hai,
       scroll-jump nahi). Hero/LCP card kabhi skip nahi hota.
     - child-level ins/iframe block — agar phir bhi kuch ghus
       jaaye to collapse (last resort)
   Card ke BAAHAR (grid sibling, section boundaries, article body)
   Google ko poori chhoot hai.
   ------------------------------------------------------------ */
.vh-card, .vh-box{ contain:layout style; }
/* .vh-card ka content-visibility css/vh-card.css mein hai (grid-scoped).
   .ovl-* system v2.0 me DELETED — koi PHP template ise print nahi karta tha. */
.vh-card--hero{ content-visibility:visible; }


/* ------------------------------------------------------------
   v2.0 — AUTO ADS GLOBAL TAMING (dark theme + CLS)
   - Reserved/loading slot ka apna bg transparent — dark page pe
     blinding safed patch na dikhe jab tak iframe paint na ho.
   - "unfilled" ka collapse Google ka OFFICIAL pattern hai
     (support.google.com/adsense/answer/10762946) — khaali white
     box screenshot wali bimari isi se jaati hai.
   - Auto-inserted ads ko saans lene ki margin, par page ki
     scroll-anchoring ko disturb kiye bina.
   ------------------------------------------------------------ */
ins.adsbygoogle{ background:transparent !important; }

ins.adsbygoogle[data-ad-status="unfilled"],
ins.adsbygoogle[data-ad-status="unfill-optimized"]{
  display:none !important;
  height:0 !important; min-height:0 !important;
  margin:0 !important; padding:0 !important;
}

#post-body .google-auto-placed{ margin:22px auto; }

/* Auto Ads ko jagah kahan milegi:
     - article body (#post-body) ke paragraphs ke beech
     - .section-heading aur .vh-promo ke beech
     - author box / related section ke aas-paas
   Ye sab text blocks hain, Auto Ads inhe khud dhundh leta hai.
   (Manual units v2.0 mein poori tarah REMOVED — inc/vh-ads.php dekho.) */

/* =============================================================
   v1.1 — SKIP LINK + FOOTER SOCIAL (naye components)
   ============================================================= */

/* Skip link — normally screen ke bahar; Tab dabate hi top-left pe
   gold pill. Sighted users ko kabhi nahi dikhta, keyboard/screen-reader
   users ke liye pehla focusable element. */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--vh-gold, #FFD24C); color:#0D0F11;
  padding:10px 18px; border-radius:0 0 12px 0;
  font-weight:700; font-size:.95rem; text-decoration:none;
}
.skip-link:focus{ left:0; outline:3px solid #fff; outline-offset:-3px; }

/* Footer social — chhote text-pills. Icon-fonts/SVG jaanbujh ke nahi:
   text = crawlable anchor (entity signal) + zero galat-glyph risk.
   Style .footer-links jaisa hi muted, hover pe zinda. */
.footer-social{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  list-style:none; margin:0 auto 16px; padding:0 12px; max-width:var(--maxw);
}
.footer-social a{
  display:inline-block; padding:7px 14px;
  border:1px solid var(--border-2); border-radius:999px;
  color:var(--meta); font-size:.85rem; line-height:1;
  transition:color .2s, border-color .2s, background .2s;
}
.footer-social a:hover{
  color:var(--text); border-color:var(--meta); background:var(--hover);
}

/* v2.0 — MANUAL IN-FEED CSS REMOVED (units khud hi nahi rahe).
   Ads = Auto Ads only; rules upar "AUTO ADS ZONES" section mein. */


/* ============================================================
   v2.0 — ENGAGEMENT LAYER: news ribbon · UP-NEXT · toast · poll
   (sab `contain` ke saath — Auto Ads in boxes ke andar nahi)
   ============================================================ */

/* ---------- News ribbon (single post top) ---------- */
.vh-news-ribbon{
  display:flex; align-items:center; gap:10px;
  margin:0 0 14px; padding:10px 14px;
  background:linear-gradient(90deg, rgba(229,57,53,.16), rgba(229,57,53,.05));
  border:1px solid rgba(229,57,53,.35); border-radius:12px;
  color:var(--text); font-weight:600; font-size:.92rem;
  contain:layout style;
}
.vh-news-ribbon:hover{ border-color:var(--accent); background:rgba(229,57,53,.14); }
.vh-news-dot{
  width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 0 rgba(229,57,53,.6); animation:vh-news-pulse 1.6s infinite;
}
@keyframes vh-news-pulse{
  70%{ box-shadow:0 0 0 9px rgba(229,57,53,0); }
  100%{ box-shadow:0 0 0 0 rgba(229,57,53,0); }
}
.vh-news-txt{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vh-news-arrow{ color:var(--accent); font-size:1.2rem; line-height:1; }
@media (prefers-reduced-motion:reduce){ .vh-news-dot{ animation:none; } }

/* ---------- UP-NEXT mega card ---------- */
.vh-upnext{
  display:block; position:relative; margin:22px 0;
  background:var(--card); border:1px solid var(--border-2);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 10px 34px rgba(0,0,0,.45);
  contain:layout style;
  transition:border-color .2s, transform .2s;
}
.vh-upnext:hover{ border-color:var(--accent); transform:translateY(-3px); }
.vh-upnext-label{
  position:absolute; top:10px; left:10px; z-index:2;
  background:var(--accent); color:#fff; font:700 .74rem/1 var(--sans);
  padding:6px 10px; border-radius:999px;
  box-shadow:0 4px 14px rgba(229,57,53,.5);
}
.vh-upnext-img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--card-2); }
.vh-upnext-body{ display:block; padding:13px 14px 15px; }
.vh-upnext-title{ display:block; color:var(--text); font-size:1.05rem; font-weight:700; line-height:1.45; }
.vh-upnext-hook{
  margin-top:7px; color:var(--body); font-size:.9rem; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vh-upnext-cta{ display:inline-block; margin-top:11px; color:var(--vh-gold, #FFD24C); font:700 .85rem/1 var(--sans); }

/* ---------- Audio-end toast ---------- */
#vh-next-toast{
  position:fixed; left:10px; right:10px;
  bottom:calc(12px + var(--vh-anchor, 0px));
  z-index:9100; display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:15px;
  background:rgba(20,22,26,.97); border:1px solid rgba(255,210,76,.4);
  box-shadow:0 10px 40px rgba(0,0,0,.7);
  transform:translateY(140%); opacity:0;
  transition:transform .3s cubic-bezier(.32,.72,0,1), opacity .25s;
}
#vh-next-toast.is-on{ transform:translateY(0); opacity:1; }
.vh-nt-img{ width:52px; height:52px; border-radius:10px; object-fit:cover; flex:none; background:var(--card-2); }
.vh-nt-mid{ flex:1; min-width:0; }
.vh-nt-k{ display:block; color:var(--vh-gold,#FFD24C); font:700 .7rem/1 var(--sans); margin-bottom:5px; }
.vh-nt-t{
  color:var(--text); font-size:.85rem; font-weight:600; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vh-nt-x{
  flex:none; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  color:var(--meta); font-size:15px; border-radius:50%; cursor:pointer;
}
.vh-nt-x:hover{ background:var(--hover); color:#fff; }
@media (min-width:720px){
  #vh-next-toast{ left:50%; right:auto; width:min(560px, 92vw); transform:translate(-50%,140%); }
  #vh-next-toast.is-on{ transform:translate(-50%,0); }
}

/* ---------- 1-tap poll ---------- */
.vh-poll{
  margin:20px 0; padding:14px;
  background:var(--card); border:1px solid var(--border-2);
  border-radius:var(--radius); contain:layout style;
}
.vh-poll-q{ margin:0 0 12px; color:var(--text); font-weight:700; font-size:.98rem; line-height:1.5; }
.vh-poll-opts{ display:flex; gap:10px; }
.vh-poll-btn{
  flex:1; padding:12px 10px; border:1px solid var(--border-2); border-radius:12px;
  background:var(--card-2); color:var(--text); font:600 .92rem/1.3 var(--sans);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:border-color .2s, background .2s, transform .1s;
}
.vh-poll-btn:hover{ border-color:var(--accent); background:var(--hover); }
.vh-poll-btn:active{ transform:scale(.97); }
.vh-poll-res{ display:flex; flex-direction:column; gap:9px; }
.vh-poll-row{ display:flex; align-items:center; gap:9px; }
.vh-poll-lab{
  flex:none; width:34%; color:var(--body); font-size:.85rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vh-poll-bar{ flex:1; height:9px; border-radius:99px; background:var(--card-2); overflow:hidden; }
.vh-poll-bar i{
  display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--accent), var(--pink, #ff5b8d));
  transition:width .5s ease;
}
.vh-poll-pct{ flex:none; width:40px; text-align:right; font-family:var(--mono); font-size:12px; color:var(--meta); }


/* ============================================================
   v2.1 — DAILY PAGES (आज की न्यूज़ / आज का इतिहास) + ticker glue
   Vivek ka sketch: date 📅 → 10 lines → dividers. Wahi look.
   ============================================================ */
.vh-day{ margin:0 0 30px; contain:layout style; }
.vh-day-head{
  display:flex; align-items:center; gap:9px;
  font-size:1.12rem; font-weight:800; color:var(--text);
  padding:9px 13px; margin:0 0 4px;
  background:linear-gradient(90deg, rgba(0,255,136,.10), transparent);
  border-left:3px solid #00ff88; border-radius:8px;
}
.vh-day-list{ list-style:none; margin:0; padding:0; }
.vh-day-list li{
  padding:13px 2px; margin:0;
  border-bottom:1px dashed var(--border-2);   /* ---------- wali feel */
  color:var(--body); font-size:1.02rem; line-height:1.75;
}
.vh-day-list li:last-child{ border-bottom:0; }
.vh-day-list li strong{ color:var(--text); }
.vh-day + .vh-day{ opacity:.92; }             /* pichhle din halke se peeche */


/* ============================================================
   v2.2 — इतिहास बॉक्स (single post end) — .vh-day-head/.vh-day-list
   (daily pages wale hi classes reuse) + chhota CTA link.
   ============================================================ */
.vh-itihas-single{ display:block; margin:22px 0; contain:layout style; text-decoration:none; cursor:pointer; }
.vh-itihas-more{
  display:inline-block; margin-top:6px; color:var(--vh-green-soft, #a3e6b9);
  font:700 .85rem/1 var(--sans);
}
/* v3.1 — admin-only "box gayab hai" diagnostic (visitors ko kabhi nahi dikhta) */
.vh-itihas-missing{
  margin:22px 0; padding:12px 14px; border-radius:10px;
  background:rgba(255,210,76,.08); border:1px dashed var(--vh-gold, #FFD24C);
  color:#ffe4b8; font-size:.82rem; line-height:1.6;
}
.vh-itihas-missing code{ background:rgba(0,0,0,.35); padding:1px 5px; border-radius:4px; }


/* ============================================================
   v2.3 — W5 CATEGORY STRIP (ultra-patli, tez auto-scroll)
   ------------------------------------------------------------
   Kyun: pill "swipe karo" ka intezaar karti thi — user karta nahi.
   Ab strip khud chalti hai (70s/loop ≈ ticker se aadhi speed), aur
   `opacity:.66` se DIM rehti hai taaki chalta ticker usse na ladhe
   (do chalti cheezein: ek fusfusaye, dusri bole).
   Touch/hover = turant ruko + poori chamak (JS: .vh-hold class).
   ============================================================ */
#category-nav{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
}
.cat-nav-inner{
  width:max-content;
  padding:3px 0;
  gap:6px;                     /* v3.2 — pills ke beech thoda gap taaki alag box lagein */
  overflow:visible;           /* auto-scroll transform se, scrollLeft se nahi */
  animation:vh-cat-run 24s linear infinite;   /* v3.2 — 34s se aur tez (Vivek) */
}
#category-nav.vh-hold .cat-nav-inner{ animation-play-state:paused; }
@keyframes vh-cat-run{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.cat-nav-item{
  flex:none;
  padding:4px 12px !important;   /* v3.2 — thoda zyada taaki box jaisa dikhe */
  background:rgba(255,255,255,.05) !important;   /* v3.2 — halka box tint (Vivek: "color box jaisa") */
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:8px !important;   /* v3.2 — box corners */
  font-size:.8rem !important;   /* v2.4 — .68rem se badhaya, padhne mein aasan (Vivek) */
  font-weight:600;
  line-height:1.4;
  opacity:.85;
  transition:opacity .2s, color .2s, background .2s;
  white-space:nowrap;
}
/* v3.2 — har pill ka apna halka rang, cycle se (category count badle to bhi kaam karega) */
.cat-nav-item:nth-child(6n+1){ background:rgba(0,255,136,.08)  !important; border-color:rgba(0,255,136,.16)  !important; }
.cat-nav-item:nth-child(6n+2){ background:rgba(255,210,76,.08) !important; border-color:rgba(255,210,76,.16) !important; }
.cat-nav-item:nth-child(6n+3){ background:rgba(0,212,255,.08)  !important; border-color:rgba(0,212,255,.16)  !important; }
.cat-nav-item:nth-child(6n+4){ background:rgba(255,45,111,.08) !important; border-color:rgba(255,45,111,.16) !important; }
.cat-nav-item:nth-child(6n+5){ background:rgba(229,57,53,.08)  !important; border-color:rgba(229,57,53,.16)  !important; }
.cat-nav-item:nth-child(6n+6){ background:rgba(255,255,255,.07) !important; border-color:rgba(255,255,255,.14) !important; }
#category-nav.vh-hold .cat-nav-item{ opacity:1; }
.cat-nav-item.is-active{ opacity:1; color:#0D0F11 !important; background:var(--vh-gold) !important; border-color:var(--vh-gold) !important; font-weight:800; }   /* 🟡 tu yahan hai */
.cat-nav-item.is-tools{ opacity:1; color:#ff8a87 !important; background:rgba(255,138,135,.1) !important; border-color:rgba(255,138,135,.22) !important; }        /* 🔴 urgent */
.cat-nav-item .tools-caret{ width:9px; height:9px; }
/* purane indicator/fade ki zaroorat nahi — strip chalti hai */
.cat-nav-ind, .cat-nav-fade{ display:none !important; }
@media (prefers-reduced-motion:reduce){
  .cat-nav-inner{ animation:none; overflow-x:auto; width:auto; }
  .cat-nav-item{ opacity:1; }
}

/* ============================================================
   v2.2 — TICKER: G2 (kaala-hara, GREEN date label)
   ============================================================ */
.ticker-bar{
  height:32px !important;   /* v3.2 — 28px se badhaya, bade font ke liye jagah */
  /* v4.4 — position:sticky yahan se HATAYA. terminal.css (theme ka aakhri
     design layer, sabse baad load hota hai) .ticker-bar ko position nahi
     deta — matlab wahi is theme ka "asli" ticker style hai, aur yahan
     sticky lagana bekaar tha (terminal.css isse chupa/override nahi karta,
     par sticky ka poora point tab tha jab isey akela sticky rakhna tha).
     Ab sticky container .vh-sticky-top hai (header.php), jo header ke
     BAAD boxes+ticker dono ko ek saath top pe chipkata hai — is single
     rule ki zaroorat hi nahi rahi. */
  background:linear-gradient(90deg,#050505,#0a1f12) !important;
  border-top:0 !important;
  border-bottom:1px solid #14331e !important;
  margin-bottom:0 !important;
}
.ticker-label{
  background:none !important;
  color:var(--vh-green) !important;          /* 🟢 aaj/taaza */
  border-right:1px solid #1c4429;
  font-size:.86rem !important;   /* v3.2 — .8rem se aur badhaya */
  font-weight:700 !important;
  padding:0 8px !important;
  height:100%;
  display:flex; align-items:center; gap:3px;
}
.ticker-item{ font-size:.92rem !important; color:#e8f5ee !important; padding:0 10px !important; }   /* v3.2 — .85rem→.92rem, gap 14px→10px (aur pass-pass) */
.ticker-item::after{ margin-left:10px !important; }   /* v3.2 — dot ka gap bhi item spacing se match */
.ticker-item:hover{ color:#fff !important; }

/* ============================================================
   v2.2 — CARD: full-bleed (phone pe har px keemti)
   ============================================================ */
@media (max-width:619px){
  .posts-grid{
    margin-left:-16px; margin-right:-16px;   /* wrapper padding ko todo */
    gap:14px;
  }
  .posts-grid > .vh-card{
    border-left:0; border-right:0;
    border-radius:0;
  }
}
/* v2.3 — border-top wali line ab source pe hi hataayi (vh-card.css
   ka .vh-player/.vh-cta base rule) — ye override yahan zaroorat nahi
   raha, aur galat class (.vh-card-player, kabhi exist hi nahi kiya)
   target kar raha tha, isliye .vh-player pe kaam nahi kar raha tha. */

/* 🟢 "ताज़ा अपडेट" / NEW-jaisa kicker green (aaj = taaza) */
.vh-kicker, .vh-fresh{ color:var(--vh-green) !important; }

/* ============================================================
   v2.2 — इतिहास बॉक्स: H3 gold (G2 — purana/itihaas)
   ============================================================ */
.vh-itihas-single{
  background:linear-gradient(180deg,#1c1408,#151515);
  border:1px solid #3d2409;
  border-radius:12px;
  overflow:hidden;
  padding:0;
  transition:border-color .2s, background .2s;
}
.vh-itihas-single:hover, .vh-itihas-single:focus-visible{
  border-color:var(--vh-green-soft, #a3e6b9);
}
.vh-itihas-single .vh-day-head{
  margin:0; padding:9px 12px;
  background:linear-gradient(90deg,#241605,transparent);
  border-left:0; border-bottom:1px solid #3d2409; border-radius:0;
  color:#ffe4b8; font-size:.84rem; font-weight:800;
}
.vh-itihas-single .vh-day-list{ padding:4px 12px 12px; }
.vh-itihas-single .vh-day-list li{
  border-bottom:1px dashed #2c2216;
  font-size:.79rem; line-height:1.6; padding:9px 0;
}
.vh-itihas-single .vh-day-list li:last-child{ border-bottom:0; }
.vh-itihas-single .vh-day-list li strong{ color:var(--vh-gold); font-family:var(--mono); font-size:.74rem; }
.vh-itihas-more{
  display:block; margin:0; padding:9px 12px;
  background:rgba(0,0,0,.3); border-top:1px solid #3d2409;
  color:var(--vh-green-soft, #a3e6b9) !important;
}

/* v3.9 — #vh-bottom-nav / #vh-live-panel / #vh-live-backdrop ka poora
   CSS HATAYA. Wo markup vh-bottom-nav.php banata tha, jo ab delete ho
   chuki hai. Asli navbar core/theme.css se style hota hai. */