/* Vista Hub theme CSS, combined 2026-10-17T08:57:20+00:00 */

/* ---- vistamess1-parent ---- */
/*
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-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;
}

/* =============================================================
   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); }

/* =============================================================
   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; }


/* 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) */

/* 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);
}

/* =============================================================
   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:900px){
  .post-title-main{ font-size:2.15rem; }
  .hero{ margin-top:10px; }
  .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-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-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;
}

/* ---------- NEW Badge ---------- */

/* ---------- 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) ---------- */

/* ---------- 4 small cards ---------- */

/* 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) */

/* v3.6 — white text readable on light images (subtle black outline) */

/* 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.
   ============================================================ */

/* For You peek — right below the button, shows a bit of the first card */


/* ============================================================
   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-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 */

/* 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; }
}


/* ============================================================
   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[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). */
/* v3.2 — MOBILE-FIRST LOCK: 6-column desktop restructure hataya.
   2-column shape ab har width pe same, --maxw se bada dikhega. */

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

/* ============================================================
   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; }

/* ============================================================
   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,
.vh-masonry > ins.adsbygoogle,
.vh-masonry > .google-auto-placed,
.vh-masonry > .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.
     v1.3 (Aug 2026) — .vh-masonry (naya Pinterest grid, column-count based)
     add kiya. Ye wahi fix hai jo .posts-grid/.vh-tile-grid ke liye already
     tha — ad ko poori width span karake naye row mein todna, taaki
     column-count ka natural uneven-column-height column-balance gap na
     bane. Column-count masonry me column-span:all EXTRA zaroori hai
     (grid-column wahan no-op hai) — yahi asli fix hai is grid ke liye. */
  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) ---------- */
@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); }
}

/* ---------- 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); }

/* ---------- 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; }
@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 */
/* purane indicator/fade ki zaroorat nahi — strip chalti hai */
@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) */

/* ============================================================
   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. */


/* ---- vistahub-style ---- */
/*
Theme Name: Vista Hub Mess Recovery
Template: vistamess1
Version: 1.0.0
Description: Vista Tools template and card-title recovery override.
*/

/* Home cards: one full-width card per row (YouTube / OneHisaab).
   Scoped to home, blog, the single-post feed, and (Oct 2026) category
   archives — Zone 1 + Zone 2 masonries. Wallpaper/festival categories
   (slug contains "wallpaper") are excluded and keep parent masonry.
   Do not change header, ticker, tool hub, logo, colors, or bottom nav.
   Parent masonry sets inline top/left and column-count: 2 — these rules win.
   Every card image is 16:9. Row cards are stacked, not a side thumb. */

body.home .vh-masonry,
body.blog .vh-masonry,
body.single .vh-single-feed,
body.category:not([class*="wallpaper"]) .vh-masonry {
  display: grid !important;
  grid-template-columns: 1fr !important;
  column-count: 1 !important;
  gap: 14px 10px;
  height: auto !important;
  position: static !important;
}

body.home .vh-mcard,
body.blog .vh-mcard,
body.single .vh-single-feed .vh-mcard,
body.category:not([class*="wallpaper"]) .vh-mcard {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  grid-column: 1 / -1 !important;
  min-width: 0;
}

body.home .vh-mcard--lead,
body.home .vh-mcard--pair,
body.blog .vh-mcard--lead,
body.blog .vh-mcard--pair,
body.single .vh-single-feed .vh-mcard--lead,
body.single .vh-single-feed .vh-mcard--pair,
body.category:not([class*="wallpaper"]) .vh-mcard--lead,
body.category:not([class*="wallpaper"]) .vh-mcard--pair {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-direction: column !important;
}

body.home .vh-mcard-media,
body.blog .vh-mcard-media,
body.single .vh-single-feed .vh-mcard-media,
body.category:not([class*="wallpaper"]) .vh-mcard-media {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover;
  height: auto !important;
  padding-top: 0 !important;
  border-radius: 12px;
  display: block;
}

body.home span.vh-mcard-media,
body.blog span.vh-mcard-media,
body.single .vh-single-feed span.vh-mcard-media,
body.category:not([class*="wallpaper"]) span.vh-mcard-media {
  position: relative;
  overflow: hidden;
}

body.home span.vh-mcard-media img,
body.home span.vh-mcard-media video,
body.home span.vh-mcard-media iframe,
body.blog span.vh-mcard-media img,
body.blog span.vh-mcard-media video,
body.blog span.vh-mcard-media iframe,
body.single .vh-single-feed span.vh-mcard-media img,
body.single .vh-single-feed span.vh-mcard-media video,
body.single .vh-single-feed span.vh-mcard-media iframe,
body.category:not([class*="wallpaper"]) span.vh-mcard-media img,
body.category:not([class*="wallpaper"]) span.vh-mcard-media video,
body.category:not([class*="wallpaper"]) span.vh-mcard-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

body.home .vh-mcard-title,
body.blog .vh-mcard-title,
body.single .vh-single-feed .vh-mcard-title,
body.category:not([class*="wallpaper"]) .vh-mcard-title {
  position: static !important;
  display: block;
  background: none;
  padding: 8px 2px 0;
  flex: none;
  width: 100%;
}

body.home .vh-mcard--lead .vh-mcard-title,
body.blog .vh-mcard--lead .vh-mcard-title,
body.single .vh-single-feed .vh-mcard--lead .vh-mcard-title,
body.category:not([class*="wallpaper"]) .vh-mcard--lead .vh-mcard-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

body.home .vh-mcard--pair .vh-mcard-title,
body.blog .vh-mcard--pair .vh-mcard-title,
body.single .vh-single-feed .vh-mcard--pair .vh-mcard-title,
body.category:not([class*="wallpaper"]) .vh-mcard--pair .vh-mcard-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

body.home .vh-mcard-date,
body.blog .vh-mcard-date,
body.single .vh-single-feed .vh-mcard-date,
body.category:not([class*="wallpaper"]) .vh-mcard-date {
  display: block;
  width: 100%;
}

/* Wallpaper / festival archives keep parent masonry. Do not add those body classes here. */

body.home .vh-mcard-kicker,
body.blog .vh-mcard-kicker,
body.single .vh-single-feed .vh-mcard-kicker,
body.category:not([class*="wallpaper"]) .vh-mcard-kicker {
  display: block;
  align-self: stretch;
  margin: 3px 8px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.2;
  color: var(--meta, #9BA4AE);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.home .vh-mcard-date,
body.blog .vh-mcard-date,
body.single .vh-single-feed .vh-mcard-date,
body.category:not([class*="wallpaper"]) .vh-mcard-date {
  display: block;
  margin-top: 2px;
  padding: 0 8px 0;
  font-size: 11px;
  line-height: 1.2;
  color: var(--meta, #9BA4AE);
}

/* Ticker directly under the header. Red dot, Vista red — not green.
   Each line slides in from above, holds 2.5s, slides down, then the next.
   8 x 3s = 24s. Delay is inside each item's animation shorthand so they
   do not all sit on the same frame. 100% stays below the clip; the jump
   back above happens between loops, not by sliding through the line.
   !important beats animations.css reduced-motion, which sets
   animation-duration:.001ms and iteration-count:1 on every element and
   left only the first line on screen. */
@keyframes vhTickDrop {
  0%       { transform: translateY(-110%); }
  1.0417%  { transform: translateY(0); }
  11.4583% { transform: translateY(0); }
  12.5%    { transform: translateY(110%); }
  100%     { transform: translateY(110%); }
}

/* Tool hub: category circles + popular cards. Home only. */
.vh-toolhub {
  margin: 8px 0 16px;
}
.vh-toolhub-cats {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 14px;
}
.vh-toolhub-cat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--body, #dde2e7);
}
.vh-toolhub-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--card, #16191c);
  border: 1px solid var(--border-2, #2c3136);
}
.vh-toolhub-cat:hover .vh-toolhub-circle {
  border-color: var(--pink, #ff2d6f);
  transform: translateY(-3px);
}
.vh-toolhub-catlabel {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--meta, #9ba4ae);
}
.vh-toolhub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 2px 10px;
}
.vh-toolhub-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text, #f4f6f8);
  display: flex;
  align-items: center;
  gap: 8px;
}
.vh-toolhub-title::before {
  content: '';
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--accent, #e53935);
}
.vh-toolhub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.vh-toolhub-card {
  display: block;
  background: var(--card, #16191c);
  border: 1px solid var(--border, #23272b);
  border-radius: 16px;
  padding: 14px;
  text-decoration: none;
}
.vh-toolhub-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.vh-toolhub-ic { font-size: 20px; line-height: 1; }
.vh-toolhub-name {
  color: var(--text, #f4f6f8);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}
.vh-toolhub-desc {
  display: block;
  color: var(--muted, #8a9099);
  font-size: 11px;
  line-height: 1.35;
}
.vh-toolhub-card--all {
  grid-column: 1 / -1;
  border-style: dashed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 78px;
}
.vh-toolhub-card--all .vh-toolhub-name { color: var(--pink, #ff2d6f); }


/* Home / blog / single-feed card lift. One column, 16:9, no heavy shadow. */
body.home .vh-mcard,
body.blog .vh-mcard,
body.single .vh-single-feed .vh-mcard,
body.category:not([class*="wallpaper"]) .vh-mcard {
  background: #141414 !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: none !important;
}

/* Home only: one-line category chips, sticky under the scrolling header. No marquee. */
body.home .vh-cat-strip {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  height: 44px;
  max-height: 44px;
  margin: 0 0 8px;
  padding: 0 2px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--bg, #0b0d10);
  scrollbar-width: none;
}
body.home .vh-cat-strip::-webkit-scrollbar { display: none; }
body.home .vh-cat-pill {
  flex: 0 0 auto;
  animation: none !important;
}

/* Home feed only: one inline row of five existing tool links, every 6 cards. */
body.home .vh-feed-tools {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  grid-column: 1 / -1 !important;
  width: 100%;
  margin: 0;
  padding: 2px 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
body.home .vh-feed-tools::-webkit-scrollbar { display: none; }
body.home .vh-feed-tools a {
  flex: 1 0 auto;
  min-width: 0;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text, #f4f6f8);
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  padding: 8px 10px;
  white-space: nowrap;
}


/* Compact card: 2-line title, plain category before the date, less padding.
   Home, blog, and single और पढ़ें (.vh-single-feed) only.
   Higher specificity plus !important wins over vh-card.css, which loads after this file. */
body.home .vh-mcard,
body.blog .vh-mcard,
body.single .vh-single-feed .vh-mcard,
body.category:not([class*="wallpaper"]) .vh-mcard {
  padding: 0 0 8px !important;
}
body.home .vh-mcard-media,
body.blog .vh-mcard-media,
body.single .vh-single-feed .vh-mcard-media,
body.category:not([class*="wallpaper"]) .vh-mcard-media {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  height: auto !important;
  border-radius: 0 !important;
}
body.home a.vh-mcard .vh-mcard-title,
body.blog a.vh-mcard .vh-mcard-title,
body.single .vh-single-feed a.vh-mcard .vh-mcard-title,
body.home a.vh-mcard.vh-mcard--lead .vh-mcard-title,
body.home a.vh-mcard.vh-mcard--pair .vh-mcard-title,
body.blog a.vh-mcard.vh-mcard--lead .vh-mcard-title,
body.blog a.vh-mcard.vh-mcard--pair .vh-mcard-title,
body.single .vh-single-feed a.vh-mcard.vh-mcard--lead .vh-mcard-title,
body.single .vh-single-feed a.vh-mcard.vh-mcard--pair .vh-mcard-title,
body.category:not([class*="wallpaper"]) a.vh-mcard .vh-mcard-title,
body.category:not([class*="wallpaper"]) a.vh-mcard.vh-mcard--lead .vh-mcard-title,
body.category:not([class*="wallpaper"]) a.vh-mcard.vh-mcard--pair .vh-mcard-title {
  position: static !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
  white-space: normal !important;
  padding: 4px 8px 0 !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  max-height: calc(1.25em * 2) !important;
  background: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
}
body.home a.vh-mcard .vh-mcard-kicker,
body.blog a.vh-mcard .vh-mcard-kicker,
body.single .vh-single-feed a.vh-mcard .vh-mcard-kicker,
body.category:not([class*="wallpaper"]) a.vh-mcard .vh-mcard-kicker {
  display: block !important;
  align-self: stretch !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 3px 8px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  color: var(--meta, #9BA4AE) !important;
  -webkit-text-fill-color: var(--meta, #9BA4AE) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.home .vh-mcard-date,
body.blog .vh-mcard-date,
body.single .vh-single-feed .vh-mcard-date,
body.category:not([class*="wallpaper"]) .vh-mcard-date {
  margin-top: 2px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}


/* One meta line under the title: category, then date. Never a second line.
   Wins over the block kicker/date rules above and over vh-card.css. */
body.home a.vh-mcard .vh-mcard-meta,
body.blog a.vh-mcard .vh-mcard-meta,
body.single .vh-single-feed a.vh-mcard .vh-mcard-meta,
body.category:not([class*="wallpaper"]) a.vh-mcard .vh-mcard-meta {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  position: static !important;
  order: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 3px 8px 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  background: none !important;
  border: 0 !important;
}
body.home a.vh-mcard .vh-mcard-meta .vh-mcard-kicker,
body.blog a.vh-mcard .vh-mcard-meta .vh-mcard-kicker,
body.single .vh-single-feed a.vh-mcard .vh-mcard-meta .vh-mcard-kicker,
body.category:not([class*="wallpaper"]) a.vh-mcard .vh-mcard-meta .vh-mcard-kicker {
  display: inline-block !important;
  position: static !important;
  order: 0 !important;
  flex: 0 1 auto !important;
  align-self: baseline !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  color: var(--meta, #9BA4AE) !important;
  -webkit-text-fill-color: var(--meta, #9BA4AE) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.home a.vh-mcard .vh-mcard-meta .vh-mcard-date,
body.blog a.vh-mcard .vh-mcard-meta .vh-mcard-date,
body.single .vh-single-feed a.vh-mcard .vh-mcard-meta .vh-mcard-date,
body.category:not([class*="wallpaper"]) a.vh-mcard .vh-mcard-meta .vh-mcard-date {
  display: inline-block !important;
  position: static !important;
  order: 0 !important;
  flex: 0 0 auto !important;
  align-self: baseline !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--meta, #9BA4AE) !important;
  -webkit-text-fill-color: var(--meta, #9BA4AE) !important;
  white-space: nowrap !important;
}


/* =====================================================================
   Hub top v1 (Oct 2026, Vivek mockup) — template-parts/vh-hub-top.php
   Home (after cat strip) + single (after author box). Dark, 16px cards,
   CSS-only visuals (no extra images except category thumbs).
   ===================================================================== */
.vh-hub {
  --hub-pink: var(--pink, #ff2d6f);
  --hub-card: var(--card, #16191c);
  --hub-line: var(--border, #23272b);
  --hub-text: var(--text, #f4f6f8);
  --hub-mute: var(--meta, #9ba4ae);
  margin: 6px 0 18px;
  color: var(--hub-text);
}
.vh-hub *, .vh-hub *::before, .vh-hub *::after { box-sizing: border-box; }
.vh-hub a { text-decoration: none; color: inherit; }
.vh-hub .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* Hero */
.vh-hub-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 22px 16px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 45, 111, .22);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 45, 111, .20), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(124, 77, 255, .16), transparent 60%),
    linear-gradient(160deg, #15121a, #0d0f13);
}
.vh-hub-orb {
  position: absolute; z-index: -1; border-radius: 50%;
  filter: blur(28px); opacity: .55; pointer-events: none;
}
.vh-hub-orb--a { width: 160px; height: 160px; right: -40px; top: -50px; background: #ff2d6f; }
.vh-hub-orb--b { width: 120px; height: 120px; right: 70px; top: 70px; background: #7c4dff; opacity: .35; }
.vh-hub-float { position: absolute; right: 10px; top: 14px; width: 118px; height: 104px; pointer-events: none; z-index: -1; }
.vh-hub-fi {
  position: absolute; font-style: normal; font-size: 22px; line-height: 1;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  animation: vhHubFloat 6s ease-in-out infinite;
}
.vh-hub-fi--1 { left: 0; top: 18px; transform: rotate(-10deg); background: linear-gradient(135deg, #2f7bff, #1b3fa8); }
.vh-hub-fi--2 { left: 54px; top: 0; transform: rotate(8deg); background: linear-gradient(135deg, #ff4d6d, #b3123a); animation-delay: -1.5s; }
.vh-hub-fi--3 { left: 74px; top: 56px; width: 38px; height: 38px; font-size: 18px; background: linear-gradient(135deg, #5a5cff, #2a2c99); animation-delay: -3s; }
.vh-hub-fi--4 { left: 26px; top: 64px; width: 36px; height: 36px; font-size: 17px; background: linear-gradient(135deg, #9b4dff, #5a1fb0); animation-delay: -4.5s; }
@keyframes vhHubFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .vh-hub-fi { animation: none !important; } }

.vh-hub .vh-hub-h1 {
  margin: 0 120px 8px 0;
  font-size: clamp(26px, 7.4vw, 34px);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
}
.vh-hub-h1 em {
  font-style: normal;
  color: var(--hub-pink);
  background: linear-gradient(90deg, #ff2d6f, #ff6a8e);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vh-hub-sub {
  margin: 0 110px 16px 0;
  font-size: 14px; line-height: 1.45;
  color: rgba(244, 246, 248, .78);
}

/* Search */
.vh-hub-search {
  position: relative;
  display: flex; align-items: center;
  height: 54px; margin: 0 0 16px; padding: 0 6px 0 46px;
  border-radius: 999px;
  background: #0b0d10;
  border: 1.5px solid rgba(255, 45, 111, .55);
  box-shadow: 0 0 0 4px rgba(255, 45, 111, .07);
}
.vh-hub-search:focus-within { border-color: var(--hub-pink); box-shadow: 0 0 0 4px rgba(255, 45, 111, .18); }
.vh-hub-search-ic {
  position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
  fill: none; stroke: #cfd5db; stroke-width: 2.2; stroke-linecap: round;
}
.vh-hub-search input[type="search"] {
  flex: 1; min-width: 0; height: 100%;
  margin: 0; padding: 0; border: 0; outline: 0;
  background: transparent; box-shadow: none;
  color: #fff; font: inherit; font-size: 15px;
  -webkit-appearance: none; appearance: none;
}
.vh-hub-search input::placeholder { color: rgba(207, 213, 219, .62); }
.vh-hub-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.vh-hub-search button {
  flex: 0 0 42px; width: 42px; height: 42px;
  margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: linear-gradient(135deg, #ff2d6f, #ff5c86);
  color: #fff; font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 16px rgba(255, 45, 111, .35);
}

/* Quick circles */
.vh-hub-quick { display: flex; justify-content: space-between; gap: 6px; }
.vh-hub-qc { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.vh-hub-qc-ic {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
  background: var(--tone-bg, #1b1f24);
  border: 1px solid var(--tone-line, rgba(255, 255, 255, .12));
  transition: transform .15s ease;
}
.vh-hub-qc:hover .vh-hub-qc-ic, .vh-hub-qc:focus-visible .vh-hub-qc-ic { transform: translateY(-3px); }
.vh-hub-qc-lb { font-size: 12px; font-weight: 700; color: #e6e9ec; white-space: nowrap; }

.vh-tone--blue   { --tone-bg: rgba(47, 123, 255, .16);  --tone-line: rgba(47, 123, 255, .45); }
.vh-tone--red    { --tone-bg: rgba(255, 77, 77, .16);   --tone-line: rgba(255, 77, 77, .45); }
.vh-tone--pink   { --tone-bg: rgba(255, 45, 160, .16);  --tone-line: rgba(255, 45, 160, .45); }
.vh-tone--violet { --tone-bg: rgba(140, 90, 255, .18);  --tone-line: rgba(140, 90, 255, .48); }
.vh-tone--teal   { --tone-bg: rgba(20, 200, 170, .15);  --tone-line: rgba(20, 200, 170, .45); }
.vh-tone--amber  { --tone-bg: rgba(255, 180, 0, .15);   --tone-line: rgba(255, 180, 0, .45); }

/* Featured banner */
.vh-hub-feature {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 18px; padding: 16px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 45, 111, .28);
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(255, 45, 111, .16), transparent 60%),
    linear-gradient(120deg, #1a1218, #0f1a24);
  overflow: hidden;
}
.vh-hub-feature-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vh-hub-feature-kick {
  align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  color: #ffb3c7; background: rgba(255, 45, 111, .16); border-radius: 999px; padding: 3px 9px;
}
.vh-hub-feature-title { font-size: 20px; font-weight: 800; line-height: 1.2; color: #fff; }
.vh-hub-feature-desc { font-size: 12.5px; line-height: 1.4; color: rgba(244, 246, 248, .74); }
.vh-hub-cta {
  align-self: flex-start; margin-top: 6px;
  padding: 10px 18px; border-radius: 999px;
  background: linear-gradient(135deg, #ff2d6f, #ff5c86);
  color: #fff; font-size: 14px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 8px 18px rgba(255, 45, 111, .32);
}
.vh-hub-ba { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.vh-hub-pic {
  position: relative; display: block; overflow: hidden;
  border-radius: 10px; border: 2px solid rgba(255, 255, 255, .85);
  background: linear-gradient(180deg, #7cc4ff 0%, #bfe3ff 55%, #2c8a9e 56%, #0f5a6e 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
}
.vh-hub-pic--big { width: 78px; height: 96px; }
.vh-hub-pic--small { width: 56px; height: 68px; }
.vh-hub-mtn {
  position: absolute; left: -10%; right: -10%; bottom: 44%; height: 46%;
  background: linear-gradient(180deg, #e9f1f7, #5b7488 40%, #34495a);
  clip-path: polygon(0 100%, 22% 35%, 36% 60%, 55% 5%, 74% 55%, 86% 30%, 100% 100%);
}
.vh-hub-pic b {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  padding: 2px 7px; border-radius: 999px;
  background: rgba(10, 12, 16, .82); color: #fff;
  font-size: 10px; font-weight: 800; white-space: nowrap;
}
.vh-hub-arrows { color: #4fb3ff; font-size: 18px; font-weight: 900; letter-spacing: -3px; }

/* Section heads */
.vh-hub-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px; }
.vh-hub .vh-hub-title {
  display: flex; align-items: center; gap: 8px;
  margin: 0; font-size: 18px; font-weight: 800; color: var(--hub-text);
}
.vh-hub .vh-hub-title::before {
  content: ''; width: 4px; height: 18px; border-radius: 2px; background: var(--hub-pink);
}
.vh-hub .vh-hub-title--clock::before { content: '🕘'; width: auto; height: auto; background: none; font-size: 15px; }
.vh-hub-more { color: var(--hub-pink) !important; font-size: 13px; font-weight: 700; white-space: nowrap; }

/* Hot tools */
.vh-hub-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; }
.vh-hub-tool {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 12px 10px 12px 12px;
  border-radius: 16px; background: var(--hub-card); border: 1px solid var(--hub-line);
  transition: border-color .15s ease;
}
.vh-hub-tool:hover, .vh-hub-tool:focus-visible { border-color: rgba(255, 45, 111, .5); }
.vh-hub-tool-ic {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 21px; line-height: 1;
  background: var(--tone-bg, #1b1f24); border: 1px solid var(--tone-line, rgba(255,255,255,.12));
}
.vh-hub-tool-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vh-hub-tool-name { font-size: 14px; font-weight: 800; line-height: 1.2; color: var(--hub-text); }
.vh-hub-tool-desc {
  font-size: 11.5px; line-height: 1.3; color: var(--hub-mute);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.vh-hub-tool-go { flex: 0 0 auto; color: #7d858e; font-size: 20px; line-height: 1; }

/* Recently used (JS fills; hidden when empty) */
.vh-hub-recent[hidden] { display: none !important; }
.vh-hub-recent-row {
  display: flex; gap: 10px; margin: 0 0 18px; padding: 0 0 2px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.vh-hub-recent-row::-webkit-scrollbar { display: none; }
.vh-hub-rc {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; align-items: center; gap: 8px; max-width: 190px;
  padding: 9px 12px 9px 9px; border-radius: 14px;
  background: var(--hub-card); border: 1px solid var(--hub-line);
}
.vh-hub-rc-ic {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: rgba(255, 255, 255, .06);
}
.vh-hub-rc-lb { font-size: 12.5px; font-weight: 700; color: var(--hub-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Category showcase */
.vh-hub-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 6px; }
.vh-hub-cat {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 10; border-radius: 16px;
  background: var(--hub-card); border: 1px solid var(--hub-line);
}
.vh-hub-cat-img {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  max-width: none !important; object-fit: cover; display: block; margin: 0 !important;
  transition: transform .3s ease;
}
.vh-hub-cat:hover .vh-hub-cat-img { transform: scale(1.04); }
.vh-hub-cat::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.82) 100%);
}
.vh-hub-cat-name {
  position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 1;
  font-size: 14px; font-weight: 800; line-height: 1.2; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 360px) {
  .vh-hub .vh-hub-h1 { margin-right: 84px; }
  .vh-hub-sub { margin-right: 70px; }
  .vh-hub-float { transform: scale(.78); transform-origin: top right; }
  .vh-hub-qc-ic { width: 50px; height: 50px; font-size: 21px; }
  .vh-hub-pic--big { width: 64px; height: 80px; }
  .vh-hub-pic--small { width: 46px; height: 58px; }
  .vh-hub-tools { grid-template-columns: 1fr; }
  .vh-hub-cats { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .vh-hub-cat { flex: 0 0 72%; scroll-snap-align: start; }
}
@media (min-width: 720px) {
  .vh-hub-tools { grid-template-columns: repeat(3, 1fr); }
  .vh-hub-cats { grid-template-columns: repeat(3, 1fr); }
}

/* Single: hub sits after the author box; give it air. Feed chips on single
   were unstyled (home-only rule above) — same look here. */
body.single .vh-hub { margin-top: 18px; }
body.single .vh-single-feed .vh-feed-tools {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
  grid-column: 1 / -1 !important; width: 100%; margin: 0; padding: 2px 0 4px;
  overflow-x: auto; scrollbar-width: none;
}
body.single .vh-single-feed .vh-feed-tools::-webkit-scrollbar { display: none; }
body.single .vh-single-feed .vh-feed-tools a {
  flex: 1 0 auto; text-align: center; text-decoration: none;
  font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--text, #f4f6f8);
  background: #141414; border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px; padding: 8px 10px; white-space: nowrap;
}

/* =====================================================================
   Cat hub (Oct 2026) — template-parts/vh-cat-hub.php, category pages only.
   Reuses .vh-hub* above; only the extras live here.
   ===================================================================== */
.vh-cat-hub { margin: 4px 0 18px; }
.vh-cat-hub .vh-hub-tools { margin-bottom: 16px; }
.vh-cat-hub .vh-cat-hub-all {
  grid-column: 1 / -1; justify-content: center; min-height: 48px; padding: 10px 12px;
  border-style: dashed; border-color: rgba(255, 45, 111, .45);
  background: transparent; color: var(--hub-pink); font-size: 14px; font-weight: 800;
}
.vh-cat-hub-cats {
  display: flex; gap: 10px; margin: 0 0 6px; padding: 3px 3px 4px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.vh-cat-hub-cats::-webkit-scrollbar { display: none; }
.vh-cat-hub-cats .vh-hub-cat { flex: 0 0 44%; scroll-snap-align: start; }
@media (min-width: 720px) { .vh-cat-hub-cats .vh-hub-cat { flex-basis: 220px; } }
.vh-cat-hub-cats .vh-hub-cat.is-current {
  border: 2px solid var(--hub-pink);
  box-shadow: 0 0 0 3px rgba(255, 45, 111, .22);
}
.vh-cat-hub-cats .vh-hub-cat.is-current .vh-hub-cat-name::before { content: '● '; color: var(--hub-pink); }

/* ============================================================
   WhatsApp channel promo (Oct 2026)
   .vh-wa-bar  — sticky bottom bar REMOVED 2026-10-16 (Vivek); see
                 /workspace/news-idea-backup/2026-10-16-wa-bar.
   .vh-wa-cta  — soft card after the author box on single posts only.
   ============================================================ */
.vh-wa-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 11px 14px;
  background: #080c0a;
  border: 1px solid rgba(37, 211, 102, .22);
  border-left: 3px solid #25d366;
  border-radius: var(--radius-sm, 10px);
  color: var(--text, #f4f6f8) !important;
  text-decoration: none !important;
}
.vh-wa-cta-ic {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(37, 211, 102, .14);
  color: #25d366;
}
.vh-wa-cta-ic svg { width: 20px; height: 20px; }
.vh-wa-cta-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vh-wa-cta-txt b { font-size: .95rem; line-height: 1.3; color: var(--text, #f4f6f8); }
.vh-wa-cta-txt small { font-size: .8rem; line-height: 1.35; color: var(--meta, #9ba4ae); }
.vh-wa-cta-btn {
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: #25d366;
  color: #03160c;
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}
.vh-wa-cta:hover .vh-wa-cta-btn,
.vh-wa-cta:focus-visible .vh-wa-cta-btn { background: #2fe476; }
@media (max-width: 380px) {
  .vh-wa-cta-txt small { display: none; }
}

/* 2026-10-14 numbered pagination (home + categories, hi + en) — dark theme */
.vh-pagination{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center; margin:28px auto 12px; padding:0 8px; max-width:100%; clear:both; }
.vh-pagination .page-numbers{ min-width:40px; height:40px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; border-radius:10px; background:var(--card,#16191C); border:1px solid var(--border,#23272B); color:var(--text,#F4F6F8); text-decoration:none; }
.vh-pagination a.page-numbers:hover, .vh-pagination a.page-numbers:focus-visible{ border-color:var(--accent,#e53935); color:#fff; }
.vh-pagination .page-numbers.current{ background:var(--accent,#e53935); border-color:var(--accent,#e53935); color:#fff; }
.vh-pagination .page-numbers.dots{ background:none; border:none; min-width:20px; padding:0 2px; color:var(--meta,#9ba4ae); }
.vh-pagination .prev, .vh-pagination .next{ padding:0 14px; }
@media (max-width:600px){
  .vh-pagination{ gap:4px; margin:20px auto 8px; }
  .vh-pagination .page-numbers{ min-width:34px; height:36px; padding:0 8px; font-size:13px; border-radius:8px; }
  .vh-pagination .prev, .vh-pagination .next{ flex-basis:auto; padding:0 10px; }
}


/* r4 #6 2026-10-17: tap targets >= 24px tall (breadcrumb links, slide-menu logo,
   "सभी देखें →"/"View all →"). Padding is cancelled by an equal negative margin,
   so the visible layout does not move. Rollback: delete this block. */
.vho-breadcrumb a { padding: 4px 3px; margin: -4px -3px; }
.mobile-menu-header .site-logo { padding-top: 4px; padding-bottom: 4px; margin-top: -4px; margin-bottom: -4px; }
.vh-hub-head .vh-hub-more { padding-top: 2px; padding-bottom: 2px; margin-top: -2px; margin-bottom: -2px; }

/* engage #2 2026-10-17: inline 'यह भी पढ़ें' / 'Also read' box (child functions.php).
   Plain editorial look (left accent, no ad-style label/background). Fixed 64x64
   thumbs + fixed row height -> no layout shift. */
#post-body .vh-alsoread{margin:22px 0;padding:4px 0 4px 12px;border-left:3px solid var(--pink,#ff2d6f);background:none}
#post-body .vh-alsoread-h{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--pink,#ff2d6f);margin:0 0 8px;line-height:1.3}
#post-body .vh-alsoread-item{display:flex;align-items:center;gap:10px;min-height:64px;margin:0 0 8px;text-decoration:none!important;color:var(--text,#f4f6f8)!important}
#post-body .vh-alsoread-item:last-child{margin-bottom:0}
#post-body .vh-alsoread-item img{width:64px!important;height:64px!important;flex:0 0 64px;object-fit:cover;border-radius:8px;margin:0!important;background:#1d2126}
#post-body .vh-alsoread-item span{font-size:15px;line-height:1.4;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}


/* ---- vh-card ---- */
/* ============================================================================
 * vh-card.css — Vista Hub v2.3
 * mockup cards (natural-height image + mask-fade) · uniform grid · sticky mini player
 * ============================================================================
 *
 * COLOUR SYSTEM — jaanboojh ke chuna gaya
 *   Player accent  : #FFD24C (warm amber)
 *   Kyun amber?
 *     - Brand red (--accent) CTA + NEW badge pe already hai. Player uspe
 *       banao to card "sab kuch important hai" chillane lagta hai.
 *     - Pink (--pink) mana hai.
 *     - Neon green (--neon) 2015 wale music-app cliché hai, aur dark image
 *       ke upar chubhta hai.
 *     - Amber gold hai. Vista Hub ki zyadatar images — diya, mandir, dhoop,
 *       manuscript — sab warm-toned hain. Amber unme ghul jaata hai par
 *       chamakta bhi hai. Play button pe akela amber, baaki sab white/grey.
 *   Baaki sab       : #fff (controls), #9a9a9a (secondary text)
 *
 * `css/vh-card.css` pe rakho. style.css ke BAAD load hota hai, isliye purane
 * (v2.0: `.ovl-*` CSS style.css se DELETED — koi template use nahi karta tha.) `search.php`
 * jaisi kuch jagah uspe depend kar sakti hai.
 * ========================================================================= */


/* Player palette — ek jagah, poore file mein use */
:root {
  --vh-gold:      #FFD24C;
  --vh-gold-dim:  rgba(255, 210, 76, .18);
  --vh-track:     rgba(255, 255, 255, .22);
}


/* ---------------------------------------------------------------------------
 * GRID — v2.0 SINGLE SOURCE OF TRUTH (mobile-first LOCK)
 *
 * Poori site EK phone-column hai (:root --maxw:620px) — desktop pe wahi
 * column bada dikhta hai. Isliye: koi breakpoint nahi, koi masonry nahi,
 * koi !important war nahi (style.css ka purana masonry + 2/3/4-col base
 * block DELETED). Ek layout = ek testing = CLS har device pe same.
 * ------------------------------------------------------------------------- */
.posts-grid,
.vh-tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;                          /* v2.4 — 18px→14px, mobile pe kasa (Vivek) */
  margin-top: 6px;
}

/* ---------------------------------------------------------------------------
 * v2.0 — CONTENT-VISIBILITY WAPAS (scroll engine ka sabse bada win)
 *
 * Pehle yahan se hataya gaya tha kyunki fluid feed-ads ko push() ke waqt
 * real width chahiye thi ("availableWidth=0" error). v2.0+: in-feed grid ka
 * SIBLING hai (card ke andar nahi) aur lazy-push viewport ke paas hota hai —
 * width real milti hai, rukawat nahi.
 *
 * Ab har feed-card `content-visibility:auto`: off-screen card ka LAYOUT +
 * PAINT dono skip. Single post pe ~40 card, home pe ~60 — bina is rule ke
 * browser SAB rasterize karta tha; ab sirf viewport ke aas-paas wale. 4GB
 * phone pe scroll ka sabse bada bojh yahi tha. Aur jab Auto Ads #post-body
 * mein ad insert karta hai, relayout in contained cards ke andar nahi
 * ghusta — insert sasta ho jaata hai (ads ON = jank wali bimari ka doosra
 * ilaaj).
 *
 * `contain-intrinsic-size: auto Npx` — pehli render se pehle placeholder
 * height. `auto` keyword pehli render ke baad ASLI height yaad rakhta
 * hai, isliye scrollbar/anchor kabhi nahi kudte. Hero is rule mein NAHI
 * hai (wo grid ka child nahi hota, aur LCP element ko chhedna nahi).
 *
 * v2.4 — 500px guess bahut chhota tha (Vivek: scroll pe cards "khisakti"
 * dikhti thi — real card 550-650px ki hoti hai, off-screen se andar aate
 * hi height 500→real badalti thi = visible jump). Audio-wale card ke
 * paas ek extra player-row hai, isliye do alag estimate: non-audio
 * ~560px, audio ~610px. `auto` phir bhi asli height le lega — ye sirf
 * PEHLI guess ko sach ke zyada kareeb laata hai taaki jump chhota/gayab ho.
 *
 * IntersectionObserver ([data-reveal]) c-v ke saath normal kaam karta hai —
 * reveal animation waise hi chalti hai.
 * ------------------------------------------------------------------------- */
.posts-grid > .vh-card,
.vh-tile-grid > .vh-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 560px;
}
.posts-grid > .vh-card.vh-card--audio,
.vh-tile-grid > .vh-card.vh-card--audio {
  contain-intrinsic-size: auto 610px;
}


/* ---------------------------------------------------------------------------
 * CARD SHELL
 * ------------------------------------------------------------------------- */
.vh-card { position: relative; margin: 0; }

.vh-box {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #000;                 /* mask-fade jahan khatam hoti hai wahi rang */
  border: 1px solid var(--border);
  /* v1.0 polish — soft ambient elevation: card bg se halka utha hua
     lagta hai (premium app feel). Ek static shadow = zero paint cost
     scroll pe (hover-animate nahi kar rahe, 4GB phones ka khayal). */
  box-shadow: 0 2px 12px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05);  /* v2.0 — dono ek declaration me (pehla overwrite ho raha tha) */
  isolation: isolate;               /* z-index sirf is card ke andar */
}

/* v2.3 — 4:5 aspect-ratio lock GAYA (mockup: image apni natural height
   leti hai, letterbox nahi). Hero ab mobile/desktop dono pe same rule —
   do sizing-system maintain karna bekaar tha. */
.vh-card--hero { grid-column: 1 / -1; margin-bottom: 4px; }


/* ---------------------------------------------------------------------------
 * v2.3 — IMAGE (mockup: top full-bleed, natural height, bottom mask-fade)
 *
 * Purana system (`.vh-blur` GPU blur backdrop + `.vh-img` absolute+clamp
 * box-relative height) yahan se GAYA — mockup mein letterbox banta hi
 * nahi, image apni asli height mein poori chaudhai leti hai, normal
 * document-flow mein. Per-card `filter:blur(34px)` backdrop khatam = 4GB
 * phone ka sabse bada GPU-cost gaya.
 *
 * "Blur effect" ab mask-image fade hai (Vivek: "ब्लर इफेक्ट के साथ बॉक्स
 * में खत्म") — image ka aakhri ~26% dheere transparent hota hai, peeche
 * `.vh-box` ka kaala background jhaankta hai. `mask-image` GPU pe sasta hai
 * (ek alpha multiply), asli `filter:blur()` jaisa mahenga nahi.
 * ------------------------------------------------------------------------- */
.vh-img {
  display: block;
  width: 100%;
  height: auto;          /* featured image apne width/height attrs se CLS-safe hai */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
}

/* Content se khींchi gayi image — size pehle se pata nahi, isliye CLS
   suraksha ke liye ek reserved ratio + cover-fit. */
.vh-img--noar {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.vh-img--none {
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  font-size: 2.6rem;
  color: var(--border-2);
  background: var(--card-2);
}

/* ---------------------------------------------------------------------------
 * FULL-CARD CLICK OVERLAY
 *
 * `.vh-card-link` — `.vh-box` ka direct child, poore card ko dhakta hai
 * (z-index 3). Image, blur, text — kahin bhi click = post open. Ye asli fix
 * hai: pehle title ka `::after` sirf `.vh-text` (positioned parent) ko cover
 * karta tha, isliye image pe click kaam nahi karta tha.
 *
 * Buttons (play/like/share) z-index 4 pe hain — unka click pehle unhi ko
 * milta hai, overlay tak nahi jaata.
 * ------------------------------------------------------------------------- */
.vh-card-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  text-decoration: none;
}
.vh-card-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -3px;
  border-radius: 16px;
}

/* Title link ab sirf text ka rang; click overlay sambhaalti hai.
   (Title pe alag <a> rakha taaki text hi bhi clickable rahe — accessibility.) */
.vh-link { color: inherit; text-decoration: none; position: relative; z-index: 4; }


/* ---------------------------------------------------------------------------
 * BODY — kicker · title · desc
 * Image ab UPAR normal-flow mein hai (overlay nahi), isliye text seedha
 * card-bg (kaala) pe baithta hai — text-shadow ab zaroori nahi (wo image
 * ke upar legibility ke liye tha).
 * `pointer-events:none` + link `auto` — wahi purana stretched-link trick:
 * plain text pe click bhi neeche `.vh-card-link` tak pahunche.
 * ------------------------------------------------------------------------- */
.vh-body {
  position: relative;
  z-index: 4;
  padding: 13px 16px 4px;
  pointer-events: none;
}
.vh-body a { pointer-events: auto; }

/* Kicker row — "• ताज़ा अपडेट ..................... NEW" (sirf नई पोस्ट
   sections mein; badge (🔥 ट्रेंडिंग) hone par uski jagah). Green = site ke
   G2 palette mein "aaj/taaza" ka matlab (`.vh-more` bhi isi rang mein). */
.vh-kick {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.vh-kick-l {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--vh-green);
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vh-kick-dot {
  width: 6px; height: 6px; flex: none;
  border-radius: 50%;
  background: var(--vh-green);
}

.vh-title {
  margin: 0 0 6px;
  color: #fff;
  font-weight: 700;
  line-height: 1.28;
  font-size: clamp(.95rem, 4vw, 1.08rem);
}
.vh-title .vh-link {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vh-card--hero .vh-title { font-size: clamp(1.1rem, 5vw, 1.5rem); }

/* Tile grid (category zone 1) — bade tiles, mota title */
.vh-tile-grid .vh-title { font-size: clamp(1rem, 4.3vw, 1.15rem); }

.vh-new {
  display: inline-block; vertical-align: middle;
  background: var(--accent); color: #fff;
  font-size: .58rem; font-weight: 700; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 5px; margin-left: 6px;
}

/* TRENDING BADGE — 🔥 ट्रेंडिंग/सीजन section ke cards pe.
   "NEW" badge se alag rang (red hai wo), ye amber — player ke color se
   match, "abhi relevant hai" wala feel. Panel se aaya label (jaise "राखी"). */

.vh-desc {
  margin: 0 0 2px;
  color: #cbcbcb;
  font-weight: 400;
  line-height: 1.5;
  font-size: clamp(.78rem, 3.1vw, .86rem);
}
.vh-desc-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vh-card--hero .vh-desc-text { -webkit-line-clamp: 3; }

.vh-more {
  margin: 0; color: var(--vh-green-soft, #a3e6b9); font-weight: 600;
  font-size: clamp(.78rem, 3.1vw, .86rem);
}   /* v3.1 — apni alag line, ab kabhi clamp se cut nahi hoga (Vivek) */


/* ---------------------------------------------------------------------------
 * PLAYER — EK SLIM ROW (Vivek ka mockup)
 * play · now-time · seek bar · end-time · share-chip — sab ek row mein.
 * Purane multi-row system (seek/ctrl/foot, like-in-card, ⏪⏩, equalizer,
 * hint) mockup mein nahi hai — like ab sirf single-post like-bar pe,
 * skip/scrub mini-bar + drag pe. `flex-wrap` bahut chhoti screen ke liye
 * safety-net; kuch tootega nahi, bas dusri line le lega.
 * ------------------------------------------------------------------------- */
.vh-player {
  position: relative;
  z-index: 4;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  padding: 11px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.97), rgba(0,0,0,.82));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* v2.3 — border-top HATAYI (Vivek: "player ke upar patli line"). Purana
     style.css override kabhi kaam nahi kiya (galat class target karta
     tha), isliye seedha source pe hi hataya — ab kahin bhi nahi dikhegi. */
}

.vh-player .vh-btn--play { margin: 0; flex-shrink: 0; min-width: 46px; min-height: 46px; }
.vh-player .vh-range { flex: 1 1 70px; min-width: 50px; }

.vh-t {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  color: #c5c5c5;
  min-width: 30px;
  font-variant-numeric: tabular-nums;
}
.vh-t--now { color: var(--vh-gold); }
.vh-t--end { text-align: right; }

/* Native <input type=range> apne look ke saath.
   Custom div-slider mein keyboard + screen-reader support haath se likhna
   padta. Range free mein deta hai. `--p` (0–100) JS set karta hai. */
.vh-range {
  flex: 1;
  -webkit-appearance: none; appearance: none;
  height: 24px;                     /* tap target 24px, dikhta 5px */
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.vh-range::-webkit-slider-runnable-track {
  height: 5px; border-radius: 4px;
  background: linear-gradient(
    to right,
    var(--vh-gold) 0%, var(--vh-gold) calc(var(--p, 0) * 1%),
    var(--vh-track) calc(var(--p, 0) * 1%), var(--vh-track) 100%
  );
  box-shadow: 0 0 8px rgba(255,210,76,.3);
}
.vh-range::-moz-range-track    { height: 5px; border-radius: 4px; background: var(--vh-track); }
.vh-range::-moz-range-progress { height: 5px; border-radius: 4px; background: var(--vh-gold); box-shadow: 0 0 8px rgba(255,210,76,.3); }
.vh-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 2px solid var(--vh-gold);
  margin-top: -5px;                 /* track ke center pe */
  box-shadow: 0 1px 6px rgba(0,0,0,.5), 0 0 6px rgba(255,210,76,.45);
}
.vh-range::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 2px solid var(--vh-gold);
  box-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.vh-range:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }


.vh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px;   /* WCAG 2.2 AA target size — 24px min, 44 diya */
  padding: 0 8px;
  background: none; border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 11px;
  transition: background .15s, transform .1s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.vh-btn:hover  { background: rgba(255,255,255,.09); }
.vh-btn:active { transform: scale(.9); }
.vh-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.vh-ico { width: 24px; height: 24px; fill: currentColor; display: block; }

/* Play button — ek hi cheez jo gold hai. Aankh yahin jaati hai. */
.vh-btn--play {
  background: var(--vh-gold);
  color: #0D0F11;
  min-width: 50px; min-height: 50px;
  border-radius: 50%;
  padding: 0;
  box-shadow: 0 3px 14px rgba(255,210,76,.32);
}
.vh-btn--play:hover  { background: #ffdd6e; }
.vh-btn--play:active { transform: scale(.93); }
.vh-btn--play .vh-ico { width: 24px; height: 24px; }

/* Play / pause toggle — `is-playing` JS lagata hai */
.vh-ico--pause { display: none; }
.vh-card.is-playing .vh-ico--play  { display: none; }
.vh-card.is-playing .vh-ico--pause { display: block; }
.vh-card.is-playing .vh-btn--play  { box-shadow: 0 0 0 5px var(--vh-gold-dim); }

/* Share chip — halka gold box + "शेयर करें" text (Vivek ka ask; card aur
   single-post content player dono isi class ko reuse karte hain). */
.vh-share-chip {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;                 /* WCAG 2.2 AA tap target */
  padding: 0 14px;
  background: var(--vh-gold-dim);
  color: var(--vh-gold);
  border: none;
  border-radius: 999px;
  font: 600 .74rem/1 var(--sans);
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.vh-share-chip:hover  { background: var(--vh-gold); color: #0D0F11; }
.vh-share-chip:active { transform: scale(.94); }
.vh-share-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }


/* Count next to a like button — shared with the single-post like-bar
   (`.vh-act.vh-like`); cards no longer have their own like button. */
.vh-like-n {
  font-size: .8rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 10px; text-align: left;
  color: #b5b5b5;
}
@keyframes vh-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}


/* v2.3 — FOOTER (equalizer + hint) aur NO-AUDIO CTA dono HATAYE: mockup
   player ab ek slim row hai, koi secondary row nahi; aur non-audio posts
   ke liye ab card desc ke baad seedha khatam ho jaata hai (post-card.php
   mein `if ($audio)` — else branch hai hi nahi ab). */


/* ---------------------------------------------------------------------------
 * SINGLE POST AUDIO PLAYER — colour override
 *
 * `main.js` content ke `<audio>` ko `.vh-player` (card wala hi flat-row
 * markup) mein badalta hai — ek `.vh-audio__kicker` label upar. `.vh-audio`
 * box ko amber tint deta hai taaki "ye is post ka audio hai" alag dikhe.
 *
 * v2.3 — `.vh-audio__btn` / `.vh-audio__fill` / `.vh-audio__bars` / pulsing
 * `::before` HATAYE: purani player-iteration ke the, naya mockup markup
 * inhe banata hi nahi (ab `.vh-btn--play` / `.vh-range` / koi equalizer
 * nahi — card wale hi classes reuse hote hain, colour automatically match
 * ho jaata hai, alag override ki zaroorat nahi).
 * ------------------------------------------------------------------------- */
.vh-audio {
  margin: 18px 0;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(140% 180% at 0% 50%, rgba(255,210,76,.12) 0%, transparent 60%),
    linear-gradient(135deg, var(--card) 0%, var(--card-2) 100%);
  border: 1px solid rgba(255,210,76,.3);
  box-shadow: 0 4px 18px rgba(255,210,76,.1);
}

.vh-audio__kicker {
  padding: 13px 16px 0;
  margin-bottom: 2px;
  color: var(--vh-gold);
  font-size: .8rem; font-weight: 600;
}


/* ---------------------------------------------------------------------------
 * SINGLE POST — like bar
 *
 * Share button yahan NAHI hai. `single.php` mein `.vh-fab-share` pehle se

 * floating hai — do share button rakhna bewakoofi hai.
 * ------------------------------------------------------------------------- */
.vh-actions {
  display: flex; align-items: center; gap: 12px;
  margin: 26px 0;
  padding: 13px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.vh-act {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 18px;
  background: var(--card-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  color: var(--body);
  font: 600 .86rem/1 var(--sans);
  cursor: pointer;
  transition: background .15s, transform .1s, color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.vh-act:hover  { background: var(--hover); }
.vh-act:active { transform: scale(.96); }
.vh-act:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.vh-act .vh-ico { width: 22px; height: 22px; }
.vh-act .vh-like-n { font-size: .88rem; color: inherit; }

.vh-like[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(229,57,53,.09);
}
.vh-like[aria-pressed="true"] .vh-ico { animation: vh-pop .3s ease; }

.vh-act-hint {
  font-size: .78rem; color: var(--muted);
}


/* ---------------------------------------------------------------------------
 * STICKY MINI PLAYER
 *
 * Card se scroll karke door chale jao — control neeche mil jaata hai.
 * AdSense anchor ad bhi neeche baithta hai. `--vh-anchor` var vh-player.js
 * set karta hai (ad ki height naapke), taaki dono na ladein.
 * ------------------------------------------------------------------------- */
#vh-mini {
  position: fixed;
  left: 10px; right: 10px;
  bottom: calc(10px + var(--vh-anchor, 0px));
  z-index: 9000;

  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px;
  border-radius: 15px;
  background: rgba(20, 22, 26, .95);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 10px 40px rgba(0,0,0,.7);

  transform: translateY(150%);
  opacity: 0;
  visibility: hidden;
  transition: transform .3s cubic-bezier(.32,.72,0,1), opacity .2s, visibility .3s;
}
#vh-mini.is-on {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
@media (min-width: 720px) {
  #vh-mini { left: 50%; right: auto; transform: translate(-50%, 150%); width: min(560px, 92vw); }
  #vh-mini.is-on { transform: translate(-50%, 0); }
}

.vh-mini-art {
  width: 44px; height: 44px; flex: none;
  border-radius: 9px; object-fit: cover;
  background: var(--card-2);
}
.vh-mini-mid { flex: 1; min-width: 0; }
.vh-mini-title {
  margin: 0 0 6px;
  font-size: .78rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vh-mini-title a { color: inherit; text-decoration: none; }
.vh-mini-title a:hover { color: var(--vh-gold); }

#vh-mini .vh-range { height: 14px; }
#vh-mini .vh-range::-webkit-slider-thumb { width: 10px; height: 10px; margin-top: -3.5px; }
#vh-mini .vh-range::-moz-range-thumb     { width: 10px; height: 10px; }

.vh-mini-ctrl { display: flex; align-items: center; gap: 1px; flex: none; }

/* Mini bar apne buttons compact rakhta hai. Card wale ab 44px hain, wo yahan
   pe bar ko phula denge — isliye explicit override. */
#vh-mini .vh-btn {
  min-width: 40px; min-height: 40px;
  color: #cfcfcf; padding: 0;
}
#vh-mini .vh-btn:hover { color: #fff; }
#vh-mini .vh-ico { width: 21px; height: 21px; }
#vh-mini .vh-btn--play {
  background: var(--vh-gold); color: #0D0F11;
  min-width: 44px; min-height: 44px;
  border-radius: 50%; margin: 0 4px;
  box-shadow: 0 2px 12px rgba(255,210,76,.3);
}
#vh-mini .vh-btn--play .vh-ico { width: 22px; height: 22px; }
#vh-mini .vh-btn--play:hover { background: #ffdd6e; }
#vh-mini.is-playing .vh-ico--play  { display: none; }
#vh-mini.is-playing .vh-ico--pause { display: block; }

/* Body pe padding — mini bar aakhri card ko na dhaake */
body.vh-mini-on { padding-bottom: 82px; }


/* ---------------------------------------------------------------------------
 * TOAST — "लिंक कॉपी हो गया"
 * ------------------------------------------------------------------------- */
#vh-toast {
  position: fixed;
  left: 50%; bottom: calc(96px + var(--vh-anchor, 0px));
  transform: translate(-50%, 12px);
  z-index: 9500;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(20,22,26,.97);
  border: 1px solid var(--border-2);
  color: var(--text);
  font: 600 .8rem/1 var(--sans);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s, transform .2s, visibility .2s;
}
#vh-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }


/* ---------------------------------------------------------------------------
 * ADSENSE v0.1 — card ke ANDAR ad nahi; cards ke BEECH Google FREE
 *
 * PEHLE yahan `.posts-grid, .vh-tile-grid { contain: layout style; }` tha —
 * poora grid Auto-Ads insertion-scanner ke liye sealed. Ye ASLI LIVE
 * blocker tha (style.css wala duplicate tha; ye file baad mein load hoti
 * hai). Mobile pe cards ke beech ads isi wajah se kabhi nahi aaye.
 *
 * AB grid-level contain GAYA. Suraksha per-card hai:
 *   - upar `.posts-grid > .vh-card` pe content-visibility:auto (implicit
 *     contain) — card ke ANDAR scanner nahi ghusta
 *   - style.css "CARD KILL-ZONE" — child ins/iframe collapse (last resort)
 * Google ab grid ke andar cards ke DARMIYAN sibling insert kar sakta hai;
 * style.css ka GRID SPANNER rule use full-width row deta hai (CLS-safe).
 * ------------------------------------------------------------------------- */

/* v1.0 — Auto-Ads-hide block HATAYA. Auto Ads officially ON; CSS se chhupana
   = served-but-hidden (policy risk). Grid suraksha `contain` se hai. */

/* v2.0 — `.vh-ad-cell/.vh-ad { contain:none }` escape-hatch REMOVED —
   manual ads hi nahi rahe, ye chor-darwaza band. */

/* Mini bar + toast Auto Ads ke DOM scan se bahar */
#vh-mini, #vh-toast { contain: layout style; }


/* ---------------------------------------------------------------------------
 * MOTION / DATA / A11Y
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vh-btn, #vh-mini, #vh-toast { transition: none !important; }
  .vh-like[aria-pressed="true"] .vh-ico { animation: none !important; }
}

/* v2.3 — `.vh-blur` GPU-blur backdrop system poora GAYA (mask-fade cheap
   hai, data-saver ke liye kuch aur ghatana zaroori nahi). backdrop-filter
   abhi bhi thoda mahenga hai, isliye wo override yahan rehta hai. */
@media (prefers-reduced-data: reduce) {
  #vh-mini, .vh-player { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Screen-reader only (category.php pehle se use karta hai — safety net) */
.vh-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* ---------------------------------------------------------------------------
 * SHUFFLE COMPAT (v3.30 wala system)
 *
 * `cat-section.php` limit ka 2x cards render karta hai; extra cards CSS se
 * chhupe hote hain, main.js unhe shuffle karke `data-show` jitne dikhata hai.
 * Isse LiteSpeed ke cached page pe bhi har visitor ko alag posts milte hain.
 *
 * Purana rule (style.css:1607) reveal ke liye `display:block` lagata tha —
 * masonry ke liye theek tha. Grid mein item ko `block` karna ganda hai
 * (browser waise to sambhaal leta hai, par explicit hona behtar). `revert`
 * grid ko apna default `display` wapas de deta hai.
 * ------------------------------------------------------------------------- */
.posts-grid.vh-shuffle > *[hidden]     { display: none !important; }


/* ===========================================================================
 * ADS — Vh Vista01 v2.0: MANUAL AD CSS POORA REMOVED
 * ===========================================================================
 * `.vh-ad*` framework (label, reserved min-heights, :has collapse) yahan se
 * gaya — manual units hi nahi rahe (inc/vh-ads.php v2.0). Auto Ads ke saare
 * rules ab EK jagah hain: style.css → "AUTO ADS ZONES" (kill-zones,
 * unfilled-collapse, transparent bg). Do jagah rules = specificity war —
 * wahi bug tha jisme :has() + min-height ladte the. Ab nahi.
 * ========================================================================= */

/* ===========================================================================
 * FULL-BLEED FEED — cards edge-to-edge (Vivek: "side mein jagah")
 * ===========================================================================
 * #site-wrapper mein 16px horizontal padding hai (text content ke liye theek).
 * Par feed cards full-width chahiye — side ka gap nahi. Grid ko wrapper ke
 * padding se bahar khींchte hain (negative margin), phir andar chhota gap.
 *
 * Sirf feed grids pe — text content (single post body) pe nahi.
 * ========================================================================= */
.posts-grid,
.vh-tile-grid {
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 10px;
  padding-right: 10px;
}

/* Section headings full-bleed feed ke saath align rahein */
.section-heading {
  margin-left: 2px;
  margin-right: 2px;
}

/* Hero bhi full-bleed */
.vh-card--hero {
  margin-left: -6px;
  margin-right: -6px;
}


/* === PWA INSTALL CTA — v1.0 (hidden by default; JS unhide) === */
.vh-pwa { display:flex; align-items:center; gap:12px; margin:18px 0; padding:12px 14px;
  background:linear-gradient(135deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid rgba(255,210,76,.35); border-radius:14px; box-shadow:0 4px 16px rgba(255,210,76,.08); }
.vh-pwa[hidden] { display:none; }
.vh-pwa-ico { width:48px; height:48px; border-radius:11px; flex:none; }
.vh-pwa-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.vh-pwa-txt strong { color:var(--text); font-size:.95rem; line-height:1.3; }
.vh-pwa-txt span   { color:var(--muted); font-size:.76rem; line-height:1.4; }
.vh-pwa-btn { flex:none; padding:10px 16px; background:var(--vh-gold); color:#0D0F11;
  border:none; border-radius:999px; font:700 .82rem/1 var(--sans); cursor:pointer;
  box-shadow:0 3px 12px rgba(255,210,76,.3); -webkit-tap-highlight-color:transparent; }
.vh-pwa-btn:active { transform:scale(.95); }
.posts-grid .vh-pwa, .vh-tile-grid .vh-pwa { grid-column:1/-1; }


/* ============================================================================
 * PINTEREST-MASONRY GRID — v1.0 (Aug 2026)
 * ----------------------------------------------------------------------------
 * Deliberately separate from `.posts-grid`/`.vh-tile-grid` above (those stay
 * single-column by design — see the v2.0 comment on that block, not touching
 * it). `.vh-masonry` is opt-in: home/category/related loops switch to it,
 * hero card + single-post's own rich card keep the old system untouched.
 *
 * Column-count masonry (no JS library) — staggered look comes from natural
 * varying image aspect ratios (Vivek uploads a deliberate mix: 16:9 feature +
 * 9:16/4:5 gallery shots), not from artificial randomization.
 * ========================================================================= */
.vh-masonry {
  column-count: 2;
  column-gap: 10px;
  margin-top: 6px;
}
@media (min-width: 640px) { .vh-masonry { column-count: 3; } }
@media (min-width: 960px) { .vh-masonry { column-count: 4; } }

/* v1.4 (Aug 2026) — vh-masonry.js does its first layout pass before every
   image has finished loading (offsetHeight would be wrong/0 for images
   still loading), so cards can briefly overlap before it re-runs on each
   image's load event. Hiding the grid until JS marks it laid-out avoids
   that visible jump — falls back to plain CSS columns (already visible,
   never hidden) if JS never runs at all. */
.vh-masonry:not(.vh-masonry--js):not(.vh-masonry--nojs) {
  opacity: 0;
}
.vh-masonry--js,
.vh-masonry--nojs {
  opacity: 1;
  transition: opacity .15s ease;
}

.vh-mcard {
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 10px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  text-decoration: none;
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

/* v1.4 (Aug 2026) — once vh-masonry.js has taken over layout (adds this
   class after its first pass), content-visibility:auto must go: it makes
   off-screen cards report a fake 420px placeholder height instead of
   their real one, which threw off the shortest-column math and could
   itself cause a new imbalance. JS-driven grids get their perf story from
   the JS itself (measures once per image-load, not every scroll frame),
   so this isn't a real perf loss — it only matters as a no-JS fallback,
   which .vh-masonry--js by definition means we're not using. */
.vh-masonry--js .vh-mcard {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

.vh-mcard-media {
  display: block;
  width: 100%;
  height: auto;
}

/* v2.5 (Sep 2026) — grid-card badge (e.g. "🔥 ट्रेंडिंग"), passed from
   vh_render_grid_cards()'s optional $badge param. Grid cards are
   deliberately bare (no title-row to put an inline badge next to, per
   the v1.1 redesign's "NO category chip... deliberately bare" rule),
   so this renders as a small overlay on the image itself instead —
   top-left, since a video-play-badge (if this card is a video) sits
   top-right and the two must never collide. Colors match the existing
   .vh-badge-trend used on the old single-column card, for visual
   consistency between the two systems during the transition. */
.vh-mcard-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: var(--vh-gold);
  color: #0D0F11;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Video poster wrapper — static thumbnail + small play badge
   (category-page / related-section context; no autoplay there) */
.vh-mcard-media--poster { position: relative; }
.vh-mcard-media--poster img { display: block; width: 100%; height: auto; }
.vh-mcard-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.vh-mcard-play svg { width: 15px; height: 15px; fill: rgba(255,255,255,.92); margin-left: 2px; }

/* v2.2 (Aug 2026) — home-page-only autoplay YouTube-embed preview.
   16:9 aspect box (Shorts/9:16 videos still get letterboxed inside it —
   acceptable trade-off for a grid where every card needs a predictable
   shape; the FULL video plays correctly-cropped on the single post
   itself, this is only the muted teaser). pointer-events:none so a click
   anywhere on the card still hits the <a> wrapper and opens the post,
   never gets swallowed by the iframe's own controls.

   YouTube's own Subscribe-button/channel-badge overlay can appear inside
   the player even with controls=0 — this is a known YouTube platform
   limitation (not fixable via embed params, confirmed Aug 2026), and it
   always renders in the player's top-left corner. Scaling the iframe up
   ~18% and clipping the overflow pushes that corner outside the visible
   box — the preview reads as a slightly tighter crop, which is harmless
   for a muted teaser, and the badge is gone. */
.vh-mcard-media--videopreview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
/* v2.2 (Sep 2026) — SELF-HOSTED video preview. Deliberately its own
   class, NOT sharing .vh-mcard-media--videopreview's fixed 16:9 box —
   that box exists only because of the YouTube-iframe branding-corner
   crop trick above, which doesn't apply here (native <video>, no
   overlay to hide). Vivek: "jis size mein hai vaisa hi dikhta to aur
   best tha" — self-hosted videos are usually 9:16 (phone-shot/Shorts-
   style) and should keep their natural ratio, exactly like a plain
   image card does (masonry's core principle: natural aspect-ratio
   variety, not a forced uniform box). height:auto + no object-fit
   lets the <video> element size itself the same way an <img> would. */
.vh-mcard-media--selfvideo {
  position: relative;
  display: block;
  width: 100%;
  background: #000;
  overflow: hidden;
  /* v2.6 (Sep 2026) — the box was still rendering far taller than
     neighboring image cards. Two compounding causes:
       1) padding-top:166.6% (9:15) reserves a taller box than a normal
          image card ever gets, even before anything else is wrong.
       2) object-fit:contain on the video meant any video not exactly
          9:15 added visible black letterboxing on top of that already-
          tall box, making it look even bigger.
     Fix: lower the reserved ratio to 125% (4:5 — much closer to what
     the grid's image cards typically end up at), add a max-height cap
     as a hard ceiling on very narrow (2-column mobile) layouts, and
     switch to object-fit:cover so the video fills the box edge-to-edge
     with no added black bars — cover crops slightly instead of
     letterboxing, which reads as a normal-sized card rather than a
     tall one with empty space. The padding-top hack itself is
     unchanged in mechanism (still resolves against the box's own
     width, still gives vh-masonry.js a real offsetHeight before video
     metadata loads) — only the percentage and the video's fit-mode
     changed. */
  padding-top: 125%; /* 4:5 of card width — never use vw */
}
.vh-mcard-media--selfvideo video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.vh-mcard-media--videopreview iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: 118%; height: 118%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

/* Title — thin, dim, 2-line clamp. No chip, no icons, no CTA (finalized).
   v1.6: opacity nudged .7 → .82 for reliable readability across all
   card background variations. */
.vh-mcard-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 8px 10px 10px;
  font: 500 13px/1.4 var(--sans);
  color: rgba(230, 230, 230, .82);
}

/* Category pill strip above the masonry grid (home + category pages) —
   reuses the existing #category-nav markup/JS, this only restyles it as
   small pills instead of the dropdown-box treatment used elsewhere. */
.vh-cat-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 10px 2px;
}
.vh-cat-strip::-webkit-scrollbar { display: none; }
.vh-cat-pill {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 999px;
  font: 600 13px/1 var(--sans);
  color: var(--muted);
  background: var(--card-2);
  border: 1px solid var(--border);
	
	  white-space: nowrap;
  text-decoration: none;
}

/* Scoped card/tile titles: one line, slightly smaller, ellipsis. */

/* Masonry/card components only; leave hero and single-post headlines alone. */
.vh-card:not(.vh-card--hero) .vh-title,
.vh-card:not(.vh-card--hero) .vh-title .vh-link,
.vh-tile-grid .vh-title,
.vh-tile-grid .vh-title .vh-link {
  font-size: clamp(.88rem, 3.8vw, 1rem);
  display: block;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Home masonry card titles: one line, smaller, ellipsis. */
.vh-mcard-title {
  font-size: 12px;
  line-height: 1.35;
  display: block;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vh-cat-pill.is-active {
  color: #121212;
  background: var(--accent);
  border-color: var(--accent);
}

/* v2.1 (Aug 2026) — in-article video preview (single-post body, NOT grid
   cards — see js/vh-masonry.js for the click/autoplay behaviour). Poster
   image fades out once the muted preview iframe starts, instead of
   vanishing abruptly. */
.vh-inline-video-play img {
  transition: opacity .25s ease;
}


/* ---- vistahub-animations ---- */
/* =============================================================
   VISTA HUB v3 — ANIMATIONS
   GPU-friendly (transform/opacity only). No layout thrash.
   ============================================================= */

/* ---------- Keyframes ---------- */
@keyframes vh-pulse{
  0%,100%{ transform:scale(1);   opacity:1;   }
  50%    { transform:scale(1.18); opacity:.78; }
}
@keyframes vh-fade-up{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:translateY(0);    }
}
@keyframes vh-fade-in{
  from{ opacity:0; }
  to  { opacity:1; }
}
@keyframes vh-shimmer{
  0%  { background-position:-150% 0; }
  100%{ background-position:250% 0;  }
}
@keyframes vh-bounce{
  0%,100%{ transform:translateY(0); }
  40%    { transform:translateY(-5px); }
  70%    { transform:translateY(-2px); }
}
@keyframes vh-glow-pulse{
  0%,100%{ box-shadow:0 0 0 rgba(229,57,53,0); }
  50%    { box-shadow:0 0 18px rgba(229,57,53,.45); }
}
@keyframes vh-ticker{
  0%  { transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
@keyframes vh-story-reveal{
  from{ opacity:0; transform:scale(.96) translateY(8px); }
  to  { opacity:1; transform:scale(1)   translateY(0);   }
}
@keyframes vh-btt-pop{
  from{ transform:translateY(12px) scale(.85); opacity:0; }
  to  { transform:translateY(0)    scale(1);   opacity:1; }
}
@keyframes vh-new-badge{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.12); }
}

/* ---------- Logo breathing pulse ---------- */

/* ---------- Page load fade ---------- */
body{ animation:vh-fade-in .4s ease both; }

/* ---------- Scroll / load reveal ---------- */
html.js [data-reveal]{ opacity:0; transform:translateY(18px); }
html.js [data-reveal].in-view{ animation:vh-fade-up .55s cubic-bezier(.22,.61,.36,1) both; }
.posts-grid [data-reveal].in-view{ animation-delay:calc(var(--i,0) * 55ms); }

/* ---------- Section heading shimmer (one-shot) ---------- */
.section-heading.in-view h1,
.section-heading.in-view h2{
  background:linear-gradient(100deg,#fff 30%,var(--accent) 50%,#fff 70%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:vh-shimmer 1.4s ease-out 1;
}

/* ---------- Cat tile icon bounce ---------- */
.cat-grid-item:hover .cat-grid-icon{ animation:vh-bounce .5s ease; }

/* ---------- Post card hover glow ---------- */
.post-card:hover{
  border-color:rgba(229,57,53,.5);
  animation:vh-glow-pulse 1.6s ease-in-out infinite;
}

/* ---------- Trending ticker (single seamless engine) ---------- */
.ticker-inner{
  display:flex;
  align-items:center;
  gap:0;
  width:max-content;
  animation:vh-ticker 15s linear infinite;   /* v3.2 — 20s se ek point aur tez (Vivek) */
}
.ticker-wrap:hover .ticker-inner{ animation-play-state:paused; }

/* ---------- Story cards reveal ---------- */

/* ---------- NEW badge pulse ---------- */

/* ---------- Back-to-top pop-in ---------- */
#back-to-top.show{ animation:vh-btt-pop .3s cubic-bezier(.34,1.56,.64,1) both; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .section-heading.in-view h1,
  .section-heading.in-view h2{
    -webkit-text-fill-color:#fff; background:none; animation:none;
  }
  .ticker-inner{ animation:none !important; }
}


/* ---- vista-core ---- */
/* =====================================================
   Vista Core Theme — v2.6
   Shared header + bottom navbar for AI / Live / Hub / Tools / Clip
   (Sep 2026 — Chat + Ai.V merged into a single "AI" tab; "Clip"
   tab added for self-hosted short videos.)

   ⚠️ NAMING RULE: yahan ke saare CSS variables --vista-* prefixed hain.
   Kabhi bhi generic naam (--bg, --red, --green, --line) MAT use karna.
   Wajah: har app page apna khud ka :root define karta hai aur wo core
   ke BAAD load hota hai — generic naam silently overwrite ho jaate the.
   (Yahi bug tha jisse navbar/header ke rang kabhi apply hi nahi hue.)

   Colors config.php se aate hain, loader.php inline inject karta hai.
   Yahan sirf fallback values hain — agar kabhi inline block na chale.
   ===================================================== */

:root {
  /* Fallbacks only — asli values loader.php se aati hain (config.php se).
     Glass Terminal palette. */
  --vista-ai-p:   #3b82f6;  --vista-ai-s:   #0EA5E9;
  --vista-live-p: #00E676;  --vista-live-s: #14B8A6;
  --vista-hub-p:  #FF4D6D;  --vista-hub-s:  #F97316;
  --vista-clip-p: #f5b301;  --vista-clip-s: #c98f00;
  --vista-tools-p:#9966ff;  --vista-tools-s:#7744dd;

  /* Surfaces — glass, thos rang nahi. Depth blur + hairline se banti
     hai, shadow se nahi (dark background pe shadow dikhta hi nahi). */
  --vista-surface:   #06070A;
  --vista-glass:     rgba(255,255,255,.04);
  --vista-glass-2:   rgba(255,255,255,.07);
  --vista-line:      rgba(255,255,255,.10);
  --vista-line-2:    rgba(255,255,255,.19);

  --vista-ink:       #FFFFFF;
  --vista-ink-2:     #A8AEBA;
  --vista-ink-dim:   #8A93A0;

  --vista-r:         4px;    /* ek hi radius, poore app me */
  --vista-mono:      'IBM Plex Mono', ui-monospace, 'Roboto Mono', Menlo, Consolas, monospace;
  --vista-nav-h:     50px;   /* navbar ki approx height — spacer isse padhta hai */
}

/* =====================================================
   HEADER — chaaron app pe identical
   --vista-accent header.php inline set karta hai (per-tab).
   ===================================================== */
.vista-header {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 56px;
  padding: 0 14px;
  /* Glass — thos gradient nahi. Peeche ka aurora isme se jhalakta hai. */
  background: rgba(6, 7, 10, .72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--vista-line);
}

.vista-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Dot ab chaukor (4px) hai, gol nahi — poore app ki ek hi geometry.
   Andar do-rang ka gradient, jaisa har section ke badge me hai. */
.vista-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--vista-r);
  flex-shrink: 0;
  background: linear-gradient(140deg, var(--vista-accent, var(--vista-ai-p)), var(--vista-accent-2, var(--vista-ai-s)));
  box-shadow: 0 0 10px var(--vista-accent, var(--vista-ai-p));
  animation: vistaPulse 1.8s ease-in-out infinite;
}

@keyframes vistaPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .42; }
}

.vista-brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.vista-title {
  font-family: var(--vista-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.3px;      /* 2px tha — mono me itna spacing text ko todta hai */
  color: #fff;
  white-space: nowrap;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vista-title b {
  color: var(--vista-accent, var(--vista-ai-p));
  font-weight: 700;
}

.vista-title-ic {
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1;
}

.vista-sub {
  font-family: var(--vista-mono);
  font-size: 11px;
  color: var(--vista-ink-dim);
  font-weight: 400;
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vista-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.vista-hbtn {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--vista-r);
  border: 1px solid var(--vista-line-2);
  background: var(--vista-glass);
  color: var(--vista-ink-2);
  font-family: var(--vista-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;
  white-space: nowrap;
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}

.vista-hbtn:hover,
.vista-hbtn:focus-visible {
  border-color: var(--vista-accent, var(--vista-ai-p));
  color: #fff;
}

/* ══════════ INSTALL BUTTON — dhyaan kheenchne wala pulse ══════════
   #vistaInstallBtn header.php se aata hai aur tabhi dikhta hai jab
   browser install ki ijazat de (beforeinstallprompt ke baad JS ise
   display:grid karta hai). Do cheezein saath chalti hain:
   - breathe: accent rang ka halka ring bahar ki taraf phailta hai
   - shine:   ek patli roshni beech-beech me button ke aar-paar
   Rang --vista-accent se aata hai (header.php inline set karta hai),
   isliye har tab pe apne-aap uska apna rang lagta hai.
   Hover/press pe animation ruk jati hai — tap karte waqt hilta hua
   button achha nahi lagta. Sabse neeche prefers-reduced-motion wala
   rule isko poori tarah band kar deta hai. */
#vistaInstallBtn {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--vista-accent, var(--vista-ai-p)) 55%, transparent);
  color: #fff;
  animation: vistaInstallBreathe 2.6s ease-in-out infinite;
}
#vistaInstallBtn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -140%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,.28) 50%,
    transparent 100%);
  transform: skewX(-18deg);
  animation: vistaInstallShine 4.2s ease-in-out infinite;
  pointer-events: none;
}
#vistaInstallBtn:hover,
#vistaInstallBtn:active {
  animation-play-state: paused;
}
#vistaInstallBtn:hover::after,
#vistaInstallBtn:active::after {
  animation-play-state: paused;
}
@keyframes vistaInstallBreathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vista-accent, var(--vista-ai-p)) 42%, transparent); }
  50%      { box-shadow: 0 0 0 7px transparent; }
}
@keyframes vistaInstallShine {
  0%, 62%   { left: -140%; }
  92%, 100% { left: 160%; }
}

@media (prefers-reduced-motion: reduce) {
  #vistaInstallBtn,
  #vistaInstallBtn::after {
    animation: none;
  }
}

.vista-menu {
  width: 32px;
  padding: 0;
  font-size: 15px;
}

/* =====================================================
   BOTTOM NAVBAR — per-tab color match
   Bar ka background active tab ke rang se halka tint hota hai,
   active item ke around halka box, text hamesha white,
   underline-dot rangeen.
   ===================================================== */
.vista-navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  gap: 2px;
  padding: 2px 3px calc(2px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--vista-line);
  background: var(--vista-surface);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  transition: background .25s ease;
}

/* Tint class navbar.php lagata hai — .tint-ai / -live / -hub / -clip.
   20% rang + 80% dark base: dikhe, par bhaari na lage.
   v2.6 — .tint-chat aur .tint-aiv merge ho gaye .tint-ai mein (Chat +
   Ai.V ab ek hi "AI" tab hain); .tint-clip naya hai. */
.vista-navbar.tint-ai   { background: color-mix(in srgb, var(--vista-ai-p)   20%, var(--vista-surface)); }
.vista-navbar.tint-live { background: color-mix(in srgb, var(--vista-live-p) 20%, var(--vista-surface)); }
.vista-navbar.tint-clip { background: color-mix(in srgb, var(--vista-clip-p) 20%, var(--vista-surface)); }
.vista-navbar.tint-tools { background: color-mix(in srgb, var(--vista-tools-p) 20%, var(--vista-surface)); }
/* Hub ka navbar apna alag rang leta hai (#0A0303) — baaki tab ki
   tarah color-mix se nahi banta. Wajah: Hub ke primary rang se bana
   mix bar ko bhaari kar deta tha; ab bar lagbhag kaala hai aur uske
   upar VistaHub ka active box + underline saaf ubharte hain.
   Active box ka rang JAAN-BOOJH KE nahi badla — wo neeche
   .vista-nav-item.active.hub se hi aata hai. */
.vista-navbar.tint-hub  { background: #0A0303; }

.vista-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0px;
  padding: 4px 2px;
  border-radius: var(--vista-r);
  text-decoration: none;
  color: var(--c);
  position: relative;
  z-index: 1;
  transition: transform .18s ease;
}

.vista-nav-item:active { transform: scale(.94); }

.vista-nav-item:focus-visible {
  outline: 2px solid rgba(255,255,255,.7);
  outline-offset: -2px;
}

.vista-nav-ic {
  line-height: 1;
  position: relative;
}

.vista-nav-ic svg {
  width: 26px;
  height: 26px;
  display: block;
  color: var(--c);
}

.vista-nav-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15px;
  line-height: 1.1;
  color: rgba(255,255,255,.55);
  transition: color .18s ease;
}
.vista-nav-item.on .vista-nav-label { color: #fff; }

/* ══════════ Sliding pill — replaces the old per-tab active
   background + underline-dot. navbar.php positions it via the
   --vn-active-idx CSS custom property it sets on <nav>, and colors
   it via --pc (also set inline, per current page). One element,
   slides between tabs with a page navigation (no JS needed since
   each page is its own load — the transition is what a fast page
   swap still gets you: the pill "is" at the right spot per-page). */
.vn-pill {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: calc(20% - 6px);
  left: calc(var(--vn-active-idx, 0) * 20% + 3px);
  border-radius: 12px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--pc) 22%, transparent),
    color-mix(in srgb, var(--pc) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--pc) 35%, transparent);
  z-index: 0;
  pointer-events: none;
}

/* Regular halka ambient breathe — sabhi icons par, active ho ya na ho.
   Bahut subtle (opacity 1 → .8, scale 1 → 1.035) taaki "zinda" lage
   bina distract kiye. Har tab ko thoda alag delay diya taaki sab ek
   saath mechanical na dhadkein. */
.vista-nav-ic svg { animation: vnAmbientBreathe 3.6s ease-in-out infinite; }
.vista-nav-item:nth-child(3) .vista-nav-ic svg { animation-delay: .5s; }
.vista-nav-item:nth-child(4) .vista-nav-ic svg { animation-delay: 1s; }
.vista-nav-item:nth-child(5) .vista-nav-ic svg { animation-delay: 1.5s; }
.vista-nav-item:nth-child(6) .vista-nav-ic svg { animation-delay: 2s; }
@keyframes vnAmbientBreathe {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .8; transform: scale(1.035); }
}

/* Tap pe pulse-ring (radar-echo) — sirf currently-active tab par ek
   baar chalti hai page-load par (CSS animation, replay nahi hoti
   dobara tap karne se kyunki wahi tab pehle se active hai — agla tab
   choose karne par NAYE page-load ka .on isi ring ko wahan chalaayega). */
.vn-ic-wrap { position: relative; display: inline-flex; }
.vn-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--c);
  opacity: 0;
  pointer-events: none;
}
.vista-nav-item.on .vn-ring { animation: vnRingPulse .5s ease-out; }
@keyframes vnRingPulse {
  0%   { opacity: .7; transform: scale(.4); }
  100% { opacity: 0;  transform: scale(1.6); }
}

/* =====================================================
   NAVBAR SPACER
   Pehle yahan `body{padding-bottom:60px !important}` tha. Problem:
   chat.php navbar ko grid ke andar (position:relative) rakhta hai —
   wahan padding ki zarurat nahi thi, par !important ki wajah se 60px
   khali jagah force ho jaati thi. Aur Hub ka footer.php bilkul wahi
   rule dobara likhta tha (duplicate).

   Ab: padding sirf tab lagti hai jab navbar sach me fixed hai.
   Jis page pe navbar in-flow ho (chat.php), wo <html> pe
   class="vista-nav-inflow" laga de — padding apne aap hat jaayegi.
   ===================================================== */
body {
  padding-bottom: calc(var(--vista-nav-h) + env(safe-area-inset-bottom, 0px));
}

html.vista-nav-inflow body {
  padding-bottom: 0;
}

html.vista-nav-inflow .vista-navbar {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  width: 100%;
  z-index: 30;
  flex-shrink: 0;
}

/* Reduced motion — ambient breathe aur ring-pulse dono band */
@media (prefers-reduced-motion: reduce) {
  .vista-dot,
  .vista-nav-ic svg,
  .vn-ring { animation: none; }
  .vista-nav-item,
  .vista-navbar { transition: none; }
}


/* ---- vistahub-terminal ---- */
/* ============================================================================
   VISTA HUB — TERMINAL 0.1
   ============================================================================
   Ye ek DESIGN LAYER hai. Theme ka poora system waisa ka waisa chalta hai —
   PHP, JS, class names, markup, ads, player logic, koi cheez nahi chhedi.
   Ye file sabse AAKHIR me load hoti hai aur sirf roop badalti hai.

   Bhasha (Chat/Ai.V/Live wali hi):
     • 4px kone — poore app me ek hi radius
     • glass surfaces — depth blur aur hairline se, shadow se nahi
     • mono labels (IBM Plex Mono), Devanagari body 16px+/1.7
     • aurora — background me sthir roshni, koi animation nahi

   ANIMATION NIYAM: sirf ticker chalti hai. Baaki har decorative
   animation band (dot pulse, reveal, glow, hover-lift). Play/pause
   jaisi zaroori feedback rehti hai.

   ⚠️ ISME KOI NAYA CLASS NAAM NAHI. Sab wahi hain jo theme pehle se
   bana rahi hai — isliye JS ka koi querySelector nahi tootega.
   ============================================================================ */

:root{
  /* ---- Terminal palette ---- */
  --t-k0:#06070A;                       /* page floor */
  --t-glass:rgba(255,255,255,.04);
  --t-glass-2:rgba(255,255,255,.07);
  --t-line:rgba(255,255,255,.10);
  --t-line-2:rgba(255,255,255,.19);

  --t-ink:#FFFFFF;
  --t-body:#A8AEBA;
  --t-dim:#8A93A0;

  --t-s:#FF4D6D;                        /* Hub — rose */
  --t-s2:#F97316;                       /* saathi — amber */
  --t-sr:255,77,109;
  --t-green:#00E676;                    /* "पूरा पढ़ें" + क्लिक करें */
  --t-green-soft:#6EE7A8;               /* halka green */
  --t-amber:#FFD740;                    /* player */

  --t-r:4px;
  --t-mono:'IBM Plex Mono',ui-monospace,'Roboto Mono',Menlo,Consolas,monospace;

  /* ---- theme ke apne tokens ko naye palette pe map karte hain,
          taaki jo purane rules bache hain wo bhi mel khayein ---- */
  --bg:var(--t-k0);
  --bg-2:#0B0C10;
  --card:var(--t-glass);
  --card-2:var(--t-glass-2);
  --hover:var(--t-glass-2);
  --border:var(--t-line);
  --border-2:var(--t-line-2);
  --text:var(--t-ink);
  --body:var(--t-body);
  --meta:var(--t-dim);
  --muted:var(--t-dim);
  --accent:var(--t-s);
  --accent-2:var(--t-s2);
  --vh-gold:var(--t-amber);
  --vh-green:var(--t-green);
  --vh-green-soft:var(--t-green-soft);
  --radius:var(--t-r);
  --radius-sm:var(--t-r);
}

/* ============================================================
   PAGE + AURORA
   Do sthir roshni ke dhabbe. position:fixed — scroll pe hilte
   nahi, isliye repaint bhi nahi hota (purane phones pe bhi halka).
   ============================================================ */
body{
  background:var(--t-k0) !important;
  color:var(--t-ink);
  font-size:16px;
  line-height:1.7;
}
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(320px circle at 8% -4%,  rgba(255,77,109,.18), transparent 70%),
    radial-gradient(280px circle at 104% 22%, rgba(249,115,22,.12), transparent 70%);
}

/* Theme ki apni taraf se gap kam se kam. AdSense apni jagah khud leta
   hai (.vh-infeed pe uska poora margin hai) — hum uske aage nahi aate. */
#site-wrapper{max-width:620px;padding:11px 12px 32px;}

/* ============================================================
   HEADER
   ============================================================ */
#site-header{
  --vh-header-accent:var(--t-s);
  background:rgba(6,7,10,.78);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--t-line);
}
.header-inner{height:40px;padding:0 13px;gap:10px;}
/* sirf ek chhota dot — koi emoji nahi (pehle yahan ::after se 📰
   laga tha jo bada square badge bana deta tha) */
.vh-header-dot{
  width:8px;height:8px;border-radius:var(--t-r);flex-shrink:0;
  background:linear-gradient(140deg,var(--t-s),var(--t-s2));
  box-shadow:none;animation:none;
}
.logo-text{
  font-family:var(--t-mono);font-size:14px;font-weight:700;
  letter-spacing:-.3px;color:var(--t-ink);line-height:1.15;
}
.logo-text b{color:var(--t-s);font-weight:700;}
.logo-sub{
  font-family:var(--t-mono);font-size:8.5px;letter-spacing:.1px;
  color:var(--t-dim);font-weight:400;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.search-btn,.menu-toggle{
  width:30px;height:30px;border-radius:var(--t-r);
  background:var(--t-glass);border:1px solid var(--t-line-2);
  color:var(--t-body);
}
.search-btn:hover,.menu-toggle:hover{background:var(--t-glass-2);color:var(--t-ink);}

/* ============================================================
   CATEGORY STRIP → DROPDOWN
   Purani chalti-phirti chip-patti ki jagah ek button + grid.
   Markup wahi hai (#category-nav > .cat-nav-inner > .cat-nav-item),
   sirf CSS se dropdown bana diya. JS ka koi kaam nahi —
   :has() aur checkbox-free toggle theme ke apne JS se hota hai;
   agar JS na chale to strip khuli hi rehti hai (fallback safe).
   ============================================================ */
#category-nav{
  position:sticky;top:56px;z-index:900;
  background:rgba(6,7,10,.86);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--t-line);
}
/* dropdown ka sar — CSS se banaya gaya.
   Sirf tab dikhta hai jab JS ne .vh-cats-ready laga diya ho. */
#category-nav.vh-cats-ready::before{
  content:'Vista Hub जानकारी कलेक्शन के लिए यहां क्लिक करें 🔻';
  display:block;padding:12px 15px;
  font-size:15.5px;font-weight:600;color:var(--t-green-soft);
  cursor:pointer;
}

.cat-nav-inner{
  max-width:620px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
  padding:11px;overflow:visible;
}
#category-nav.vh-cats-ready .cat-nav-inner{display:none;}
#category-nav.vh-cats-ready.vh-cats-open .cat-nav-inner{display:grid;padding:0 11px 11px;}
.cat-nav-item{
  display:flex;align-items:center;gap:7px;
  font-family:inherit;font-size:13.5px;font-weight:500;letter-spacing:0;
  padding:9px 11px;border-radius:var(--t-r);
  background:var(--t-glass);border:1px solid var(--t-line);
  color:var(--t-body);
  /* ek line me — lamba naam ellipsis me katega, do line me nahi
     phailega (isse grid ki rows barabar rehti hain) */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transform:none;box-shadow:none;transition:none;
}
.cat-nav-item:hover{transform:none;box-shadow:none;
  border-color:var(--t-line-2);color:var(--t-ink);}
.cat-nav-item.is-active{
  border-color:rgba(var(--t-sr),.45);color:var(--t-ink);
  background:linear-gradient(130deg,rgba(var(--t-sr),.14),var(--t-glass));
}
/* duplicate copy (seamless loop ke liye thi) ab nahi chahiye */
.cat-nav-item[aria-hidden="true"]{display:none;}

/* ============================================================
   TICKER — ek hi animation jo poore theme me bachi hai
   ============================================================ */
.ticker-bar{
  display:flex;align-items:stretch;
  background:var(--t-glass);
  border-bottom:1px solid var(--t-line);
  border-top:none;
}
.ticker-label{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
  padding:9px 12px;white-space:nowrap;
  font-family:var(--t-mono);font-size:11.5px;font-weight:600;
  color:var(--t-s);background:rgba(var(--t-sr),.08);
  border-right:1px solid var(--t-line);
}
.ticker-wrap{
  flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.ticker-wrap::-webkit-scrollbar{display:none;}
.ticker-inner{
  display:flex;gap:22px;white-space:nowrap;padding-left:12px;
  animation:vhTick 30s linear infinite;
}
/* ungli rakho to ruk jaye — WCAG "pause" ki zaroorat */
.ticker-wrap:hover .ticker-inner,
.ticker-wrap:active .ticker-inner{animation-play-state:paused;}
.ticker-item{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  padding:9px 0;font-size:14.5px;color:var(--t-body);text-decoration:none;
}
.ticker-item:hover{color:var(--t-ink);}
@keyframes vhTick{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ============================================================
   SECTION HEADING — terminal prompt
   ============================================================ */
.section-heading{margin:12px 0 8px;}   /* v2.4 — 16px→12px top (Vivek: gap zyada tha) */
.section-heading h1,.section-heading h2{
  font-family:var(--t-mono);font-size:11.5px;font-weight:600;
  letter-spacing:1.1px;text-transform:uppercase;color:var(--t-dim);
  padding-left:0;line-height:1.4;display:flex;align-items:center;gap:8px;
}
.section-heading h1{font-size:12px;color:var(--t-body);}
.section-heading h1::before,.section-heading h2::before{
  content:'>';position:static;transform:none;
  width:auto;height:auto;border-radius:0;background:none;box-shadow:none;
  color:var(--t-s);font-weight:700;
}
.view-all{
  font-family:var(--t-mono);font-size:11px;letter-spacing:.6px;
  color:var(--t-dim);padding:6px 11px;border-radius:var(--t-r);
  border:1px solid var(--t-line);background:var(--t-glass);
}
.view-all:hover{color:var(--t-ink);border-color:var(--t-line-2);background:var(--t-glass-2);}

/* ============================================================
   CARD — dhaancha wahi (image top → fade → title → desc →
   "पूरा पढ़ें" → player), roop naya
   ============================================================ */
.vh-card{
  animation:none !important;                       /* reveal band */
  opacity:1 !important;transform:none !important;
  /* v2.4 — margin-bottom:12px HATAYA: .posts-grid ka gap:18px (vh-card.css)
     ke saath STACK ho raha tha, asli gap 30px ban raha tha (Vivek: "gap
     zyada hai"). Grid gap ab hi single source of truth hai card-to-card
     spacing ke liye. */
}
.vh-box{
  border-radius:var(--t-r);overflow:hidden;
  /* Thoda thos background — glass nahi. `backdrop-filter:blur(12px)`
     yahan se HATAYA: har card pe GPU compositing hoti thi jabki peeche
     blur karne layak kuch tha hi nahi (page ka apna background hai).
     Purani theme ne bhi yahi cheez (filter:blur(34px) backdrop) jaan-
     boojh kar hataayi thi — 4GB phones pe sabse bada kharcha wahi tha.
     Blur ab sirf header/navbar pe hai, jahan wo sach me kaam karta hai. */
  background:#0C0D11;border:1px solid var(--t-line);
  box-shadow:none;
}
.vh-card:hover .vh-box,.vh-card:active .vh-box{transform:none;box-shadow:none;}

/* ---------------------------------------------------------------------------
   IMAGE — ek hi niyam, har card pe

   Chaudai hamesha 100%. Height image ki apni — 16:9 chhoti, 4:5 lambi,
   9:16 sabse lambi. CROP KABHI NAHI (sirf 560px cap ke baad).

   Fade WRAPPER (.vh-media) pe hai, image pe nahi — aur PIXELS me hai,
   % me nahi. Do galtiyan pehle ho chuki hain, dono yahi thi:

     1. Fade % me tha: 16:9 (248px) pe 64px ka banta tha, 9:16 (780px)
        pe 200px+ — har card me alag dikhta tha.
     2. Fade image pe tha: 780px image ka fade 580–780px ke beech banta,
        par max-height:560px use wahin kaat deta — poora fade kate hue
        hisse me chala jata aur screen pe aata hi nahi tha. 9:16 seedhi
        kati hui dikhti thi.

   Ab: wrapper hi wo box hai jo asal me dikhta hai (cap ke baad wali
   height). Uske aakhri 200px pe fade lagta hai — chhoti image ho, lambi
   ho, ya cap se kati ho, teeno me fade ek jaisa aur hamesha dikhta hai.
   Poora card ek hi cheez lagta hai: image → ghulti hui → title → desc → player.
   --------------------------------------------------------------------------- */
.vh-media{
  position:relative;
  line-height:0;
  /* 9:16 wali image 440px chaudai pe ~780px ho jati hai — ek card poori
     screen kha leta. Isliye 560px pe cap + overflow:hidden. */
  max-height:560px;
  min-height:300px;          /* 16:9 chhoti hai — 200px fade ke baad bhi kuch bache */
  overflow:hidden;
  background:#0C0D11;        /* wahi rang jahan fade khatam hoti hai */

  /* ⚠️ MASK YAHAN HAI, .vh-img pe NAHI — aur yahi asli baat hai.
     Pehle mask image pe tha. Image 780px ki thi to fade 580–780px ke
     beech banta tha, PAR max-height ne use 560px pe kaat diya — matlab
     poora fade kate hue hisse me chala gaya aur screen pe aaya hi nahi.
     9:16 seedhi kati hui dikhti thi.

     Wrapper wo box hai jo asal me dikhta hai (cap ke baad wali height).
     Mask ab uski DIKHNE WALI height ke aakhri 200px pe lagta hai —
     isliye chhoti image ho, lambi ho, ya cap se kati ho, teeno me fade
     bilkul ek jaisa aur hamesha dikhta hai. */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 200px),transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 200px),transparent 100%);
}

/* v1.0 (Sep 2026) — Vista Clip video-badge. Chhota play-icon overlay
   jab post ke saath self-hosted video ho (_vh_has_video meta) — taaki
   homepage/category tile se hi pata chale is post mein video hai,
   article kholne se pehle. Gold rang Vista Clip tab ke color se match
   (VISTA_COLOR_CLIP = #f5b301, core/config.php). */
.vh-video-badge{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  width:30px;
  height:30px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  border:1.5px solid rgba(245,179,1,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.vh-video-badge svg{
  width:14px;
  height:14px;
  color:#f5b301;
}

.vh-img{
  display:block;
  width:100%;
  height:auto;               /* natural — koi crop, koi ratio force nahi */
  transform:none;transition:none;
}
.vh-card:hover .vh-img{transform:none;}

/* Content se khinchi image — WordPress ko iski height pata nahi hoti,
   isliye ek reserved ratio chahiye warna page load pe layout kood jata
   hai (CLS — Core Web Vitals me seedha nuksan). Yahi ek jagah hai jahan
   cover-fit lagta hai; featured image pe iski zaroorat nahi kyunki
   WordPress uske width/height attributes bhejta hai. */
.vh-img--noar{
  aspect-ratio:16/10;
  object-fit:cover;
  /* mask yahan nahi — .vh-media pe hai (wahi sab pe ek saath lagta hai) */
}
.vh-img--none{
  aspect-ratio:16/10;
  display:grid;place-items:center;font-size:44px;line-height:1;
  background:linear-gradient(150deg,rgba(var(--t-sr),.16),rgba(249,115,22,.07));
}

/* ---------------------------------------------------------------------------
   CARD BODY — title fade ke NEECHE, uspe chadhe bina.
   Pehle yahan margin-top:-34px tha jo har image size pe alag baithta tha:
   chhoti image pe title fade ke bahar, lambi pe fade me dabta hua.
   --------------------------------------------------------------------------- */
.vh-body{padding:10px 13px 12px;position:relative;z-index:2;}

.vh-kick{margin-bottom:6px;}
.vh-kick-l{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--t-mono);font-size:10px;font-weight:600;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--t-s);
}
.vh-kick-dot{
  width:5px;height:5px;border-radius:var(--t-r);background:var(--t-s);
  box-shadow:none;animation:none;
}
.vh-new{
  font-family:var(--t-mono);font-size:9px;font-weight:700;letter-spacing:.9px;
  padding:2px 6px;border-radius:var(--t-r);
  background:var(--t-s);color:#fff;box-shadow:none;
}

.vh-title{margin:0;}
.vh-title .vh-link{
  font-size:19px;font-weight:700;line-height:1.36;letter-spacing:-.2px;
  /* Pure white (--t-ink) bold text pe glow jaisa lagta tha —
     halka off-white, sirf card-title ke liye */
  color:#E8EAED;
}

/* CTA description ke AAKHIR ME INLINE — alag line pe nahi.
   Markup me .vh-desc aur .vh-more do alag <p> hain, isliye dono ko
   inline banate hain: ek hi pravah, jaise wakya usi me khatam ho. */
.vh-desc{margin:6px 0 0;font-size:15px;line-height:1.62;color:var(--t-body);display:inline;}
.vh-desc-text{display:inline;}
.vh-desc-text::after{content:' ';}
.vh-more{
  display:inline;margin:0;
  font-size:15px;font-weight:700;color:var(--t-green);
}
.vh-more::after{content:'…';}

/* ---------------------------------------------------------------------------
   CARD META — ek line, sabse chhota text.
   Ye Google ke liye hai (dateline + author signal), reader ke liye nahi —
   isliye 10px mono, feeka rang, ek hi line me. Jagah lagbhag zero.
   --------------------------------------------------------------------------- */
.vh-cmeta{
  display:flex;align-items:center;gap:7px;flex-wrap:nowrap;overflow:hidden;
  margin-top:7px;
  font-family:var(--t-mono);font-size:10px;letter-spacing:.2px;
  color:var(--t-dim);white-space:nowrap;
}
.vh-cmeta time,.vh-cmeta span{flex-shrink:0;}
.vh-cmeta .sep{opacity:.45;}

/* ============================================================
   PLAYER — ek patli patti, seedhi line
   Markup wahi (.vh-player > .vh-btn--play, .vh-t--now, .vh-range,
   .vh-t--end, .vh-share-chip) — vh-player.js bina badle chalta hai.

   Waveform HATAYA. Wo dikhne me achha tha par har audio card pe ek
   timer chalata tha (vh-player.js seedha range.value set karta hai,
   koi event nahi bhejta — isliye polling ke bina bars bharte hi
   nahi the). 20 cards = 20 timers, hamesha. Seedhi line me wo
   zaroorat hi nahi: browser ka apna range progress kaafi hai.
   ============================================================ */
.vh-player{
  display:flex;align-items:center;gap:9px;
  margin:8px 13px 12px;padding:0;
  /* Poori patti ka box HATAYA — ye pehle ek alag "ad card" jaisa lag
     raha tha (contrast bahut zyada tha article se). Ab sirf play button
     aur share button apna chhota box rakhte hain; beech ki seek-line
     aur time bina background/border ke floating hai. */
  background:none;border:none;box-shadow:none;
}
.vh-player .vh-btn--play{
  width:38px;height:38px;min-width:38px;min-height:38px;
  border-radius:var(--t-r);flex-shrink:0;
  background:var(--t-glass-2);border:1px solid var(--t-line-2);
  color:var(--t-amber);
  display:grid;place-items:center;box-shadow:none;animation:none;
}
.vh-ico{width:15px;height:15px;fill:currentColor;}
.vh-t{
  font-family:var(--t-mono);font-size:11.5px;color:var(--t-dim);
  flex-shrink:0;font-variant-numeric:tabular-nums;
}
.vh-t--now{color:var(--t-amber);}
.vh-t--end{color:var(--t-dim);}

/* seek — seedhi patli line, amber progress */
.vh-range{
  flex:1 1 60px;min-width:44px;height:24px;background:none;
  -webkit-appearance:none;appearance:none;margin:0;
}
.vh-range::-webkit-slider-runnable-track{
  height:3px;border-radius:2px;background:var(--t-line-2);
}
.vh-range::-moz-range-track{height:3px;border-radius:2px;background:var(--t-line-2);}
.vh-range::-moz-range-progress{height:3px;border-radius:2px;background:var(--t-amber);box-shadow:none;}
.vh-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:12px;height:12px;border-radius:50%;margin-top:-4.5px;
  background:var(--t-amber);border:none;box-shadow:none;
}
.vh-range::-moz-range-thumb{
  width:12px;height:12px;border-radius:50%;
  background:var(--t-amber);border:none;box-shadow:none;
}
.vh-share-chip{
  font-family:var(--t-mono);font-size:9.5px;font-weight:600;letter-spacing:.7px;
  padding:6px 8px;border-radius:var(--t-r);flex-shrink:0;
  background:var(--t-glass-2);border:1px solid var(--t-line-2);
  color:var(--t-body);box-shadow:none;
}

/* ============================================================
   MINI PLAYER (sticky) — wahi bhasha
   ============================================================ */
#vh-mini{
  background:rgba(6,7,10,.92) !important;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--t-line-2);
  border-radius:0;box-shadow:none;
}

/* ============================================================
   HERO (bada card) — wahi card, bas title bada
   ============================================================ */
.hero{
  border-radius:var(--t-r);border:1px solid var(--t-line);
  background:var(--t-glass);overflow:hidden;
}

/* ============================================================
   CATEGORY GRID TILES
   ============================================================ */
.cat-grid{gap:8px;}
.cat-grid-item{
  border-radius:var(--t-r);padding:14px 6px;
  background:var(--t-glass);border:1px solid var(--t-line);
  transform:none;box-shadow:none;transition:border-color .2s;
}
.cat-grid-item:hover{transform:none;box-shadow:none;
  background:var(--t-glass-2);border-color:var(--t-line-2);}
.cat-grid-icon{transition:none;}
.cat-grid-item:hover .cat-grid-icon{transform:none;}
.cat-grid-label{font-family:inherit;font-size:12px;font-weight:600;
  letter-spacing:0;color:var(--t-body);}

/* ============================================================
   SINGLE POST
   ============================================================ */
/* Title bada, uske aas-paas ka sab chhota. Meta line Google ke liye hai
   (dateline/author/updated signal), reader ke liye nahi — isliye 10px
   mono, ek line, scroll-able. Wo jagah content ko milni chahiye. */
.post-title-main{font-size:24px;font-weight:800;line-height:1.34;
  letter-spacing:-.3px;margin-bottom:9px;}
.vho-breadcrumb{font-family:var(--t-mono);font-size:10px;color:var(--t-dim);
  margin:4px 0 9px;gap:5px;}
.vho-breadcrumb a:hover{color:var(--t-s);}
.meta-item{font-family:var(--t-mono);font-size:10px;color:var(--t-dim);gap:4px;}
.meta-item a{color:var(--t-s);}
.post-meta-bar{
  border-bottom:1px solid var(--t-line);
  gap:10px;padding-bottom:9px;margin-bottom:12px;
}
.post-feature{margin-bottom:12px;}
.post-feature img{border-radius:var(--t-r);border:1px solid var(--t-line);}

.post-body-content{font-size:17.5px;line-height:1.85;color:var(--t-body);}
.post-body-content h2{font-size:21px;color:var(--t-ink);font-weight:700;line-height:1.42;}
.post-body-content h3{font-size:18px;color:var(--t-ink);font-weight:700;}
.post-body-content a{color:var(--t-s);text-decoration:none;
  border-bottom:1px solid rgba(var(--t-sr),.4);}
.post-body-content a:hover{color:var(--t-s2);}
.post-body-content img{border-radius:var(--t-r);border:1px solid var(--t-line);}
.post-body-content blockquote{
  border-left:2px solid var(--t-s);border-radius:0 var(--t-r) var(--t-r) 0;
  background:var(--t-glass);color:var(--t-ink);
}
.post-body-content code{
  font-family:var(--t-mono);background:var(--t-glass-2);
  color:var(--t-green);border-radius:var(--t-r);
}
.post-body-content pre{
  background:var(--t-glass);border:1px solid var(--t-line);border-radius:var(--t-r);
}
.post-body-content th{background:var(--t-glass-2);color:var(--t-ink);}
.post-body-content th,.post-body-content td{border-color:var(--t-line);}

/* TOC */
.toc-wrapper{
  border-radius:var(--t-r);background:var(--t-glass);border:1px solid var(--t-line);
}
.toc-header{
  border-left:2px solid var(--t-s);color:var(--t-ink);
  font-size:15.5px;font-weight:600;
}
.toc-header:hover{background:var(--t-glass-2);}
#toc-arrow{color:var(--t-s);}
.toc-list li a{font-size:15px;color:var(--t-body);}
.toc-list li a:hover{color:var(--t-s);}

/* ============================================================
   ARCHIVE / SEARCH
   ============================================================ */
.archive-head{
  border-radius:var(--t-r);background:var(--t-glass);
  border:1px solid var(--t-line);border-left:2px solid var(--t-s);
}
.archive-head h1{font-size:21px;font-weight:700;}
.archive-head .archive-count{font-family:var(--t-mono);font-size:11px;color:var(--t-s);}

/* ============================================================
   MOBILE MENU + SEARCH OVERLAY
   ============================================================ */
#mobile-menu{
  background:rgba(6,7,10,.96);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-right:1px solid var(--t-line);
}
.mobile-menu-links a{
  border-radius:var(--t-r);font-size:15.5px;color:var(--t-body);
}
.mobile-menu-links a:hover{background:var(--t-glass);color:var(--t-ink);}
#search-overlay{background:rgba(6,7,10,.94);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
.search-box input{
  border-radius:var(--t-r);background:var(--t-glass);
  border:1px solid var(--t-line-2);color:var(--t-ink);font-size:16px;
}

/* ============================================================
   READING PROGRESS
   ============================================================ */
#reading-progress{
  height:2px;background:var(--t-s);box-shadow:none;
}

/* ============================================================
   ADS — in-feed slot, wahi glass, wahi mono label
   Class names theme ke apne: .vh-infeed + .vh-infeed-tag
   ============================================================ */
.vh-auto-ad{margin:14px 0;}
.vh-infeed{
  margin:14px 0;padding:12px;border-radius:var(--t-r);
  background:var(--t-glass);border:1px solid var(--t-line);
}
.vh-infeed-tag{
  display:block;text-align:center;margin-bottom:9px;
  font-family:var(--t-mono);font-size:10.5px;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--t-dim);
}
ins.adsbygoogle{border-radius:var(--t-r);overflow:hidden;}

/* ============================================================
   v4.0 — SLOT_B (audio-box ke neeche) ka "hide until placed" —
   pehle Hub2 (.vh-fixedad) ke liye tha, ab SLOT_B .vh-infeed
   markup pe. JS ke aane tak content-top pe hi visible rehta agar
   ye rule na ho (flash-of-top-position). .js-ready milte hi turant
   hide, JS phir --placed laga ke box ke neeche reveal karta hai
   (js/main.js). JS off ho to yahin content-top pe rehta hai,
   kabhi gayab nahi — graceful fallback.
   ============================================================ */
html.js .vh-infeed[data-vh-ctx="single-audio"]:not(.vh-infeed--placed){
  visibility:hidden;height:0;margin:0;padding:0;overflow:hidden;border:0;
}
.vh-infeed[data-vh-ctx="single-audio"].vh-infeed--placed{
  visibility:visible;height:auto;margin:14px 0;padding:12px;border:1px solid var(--t-line);
}

/* ============================================================
   ANIMATION KILL-SWITCH
   Theme ki purani animations (reveal, pulse, glow, float, shine)
   yahan band. Ticker upar apni jagah zinda hai, aur play/pause
   jaisi zaroori feedback CSS transition se aati hai.
   ============================================================ */
.vh-card,
.vh-box,
.post-card,
.cat-grid-item,
.hero,
[data-reveal],
.vh-kick-dot,
.vh-header-dot,
.vh-new,
.vh-btn--play,
.section-heading h1::before,
.section-heading h2::before{
  animation:none !important;
}
[data-reveal]{opacity:1 !important;transform:none !important;}

/* reduced motion — ticker ruk jati hai PAR patti swipe-able ho jati
   hai, isliye khabar kabhi chhupti nahi */
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  .ticker-wrap{overflow-x:auto;}
  .ticker-inner{animation:none;padding-right:14px;}
}

/* ============================================================
   v4.4 — STICKY TOP: QUICK ACCESS BOXES (Chat/Ai.V/Live) + TICKER
   Header scrolls away normally (see #site-header rule above — no
   position:sticky there anymore). This wrapper is what sticks —
   boxes and ticker travel together, always attached, no gap math
   needed against header height (header isn't sticky, so nothing
   above this wrapper is ever competing for scroll-fixed space).
   Language matches the rest of Terminal: var(--t-r) radius, glass
   surface, mono labels, no decorative motion (see kill-switch above
   — .vh-qbox is included in that selector list too).
   ============================================================ */

/* .ticker-bar already styled above (TICKER section) — inside
   .vh-sticky-top it just needs its own top gap removed, since the
   qbox row directly above already carries the correct spacing. */