/* ============================================================================
   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:#646B78;

  --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:50px;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:9px;height:9px;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:15.5px;font-weight:700;
  letter-spacing:-.3px;color:var(--t-ink);line-height:1.2;
}
.logo-text b{color:var(--t-s);font-weight:700;}
.logo-sub{
  font-family:var(--t-mono);font-size:10px;letter-spacing:.1px;
  color:var(--t-dim);font-weight:400;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.search-btn,.menu-toggle{
  width:32px;height:32px;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-fade{display:none;}
.cat-nav-ind{display:none;}
.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%);
}
.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;
}
.hero-img{transition:none;}
.hero:hover .hero-img{transform:none;}
.hero-overlay{padding:18px 16px;
  background:linear-gradient(to top,#0C0D11 10%,rgba(12,13,17,.72) 48%,transparent 82%);}
.hero-cat{
  font-family:var(--t-mono);font-size:10.5px;font-weight:600;letter-spacing:1.4px;
  padding:4px 9px;border-radius:var(--t-r);
  background:var(--t-s);color:#fff;box-shadow:none;
}
.hero-title{font-size:21px;font-weight:700;line-height:1.4;text-shadow:none;}
.hero-meta{font-family:var(--t-mono);font-size:11px;color:var(--t-dim);}

/* ============================================================
   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,
.vh-qbox{
  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).
   ============================================================ */
.vh-sticky-top{
  position:sticky; top:0; z-index:950;
  background:var(--t-k0);
}
.vh-qbox-row{
  max-width:620px; margin:0 auto;
  display:flex; gap:6px;
  padding:8px 12px 6px;
}
.vh-qbox{
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; gap:6px;
  padding:8px 9px;
  border-radius:var(--t-r);
  background:var(--t-glass);
  border:1px solid var(--vh-qbox-c, var(--t-line));
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease;
}
.vh-qbox:hover{ background:var(--t-glass-2); }
.vh-qbox:active{ background:var(--t-glass-2); }
.vh-qbox-ic{ font-size:16px; line-height:1; flex-shrink:0; }
.vh-qbox-txt{ display:flex; flex-direction:column; gap:0; min-width:0; overflow:hidden; }
.vh-qbox-title{
  font-family:var(--t-mono); font-size:12px; font-weight:600;
  letter-spacing:-.1px; color:var(--t-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vh-qbox-title b{ color:var(--vh-qbox-c, var(--t-ink)); font-weight:700; }
.vh-qbox-sub{
  font-family:var(--t-mono); font-size:9.5px; font-weight:400;
  color:var(--t-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vh-qbox--chat{ --vh-qbox-c:#f97316; }
.vh-qbox--aiv { --vh-qbox-c:#3b82f6; }
.vh-qbox--live{ --vh-qbox-c:#22c55e; }

/* .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. */
.vh-sticky-top .ticker-bar{ margin-top:0; }

@media (max-width:380px){
  .vh-qbox-row{ padding:7px 10px 5px; gap:5px; }
  .vh-qbox{ padding:7px; gap:5px; }
  .vh-qbox-ic{ font-size:14px; }
  .vh-qbox-title{ font-size:11px; }
  .vh-qbox-sub{ display:none; }
}