/* ==========================================================================
   Vortex Pip — theme (light content, dark navbar/hero/footer accents)
   ========================================================================== */
:root{
  --vp-bg: #f6f8fa;
  --vp-bg-darker: #060d16;
  --vp-surface: #ffffff;
  --vp-surface-2: #eef1f6;
  --vp-border: rgba(15,23,42,.1);
  --vp-border-dark: rgba(255,255,255,.1);
  --vp-green: #1fd67a;
  --vp-green-dark: #14a862;
  --vp-red: #ff5a6a;
  --vp-blue: #3aa0ff;
  --vp-gold: #f5b942;
  --vp-text: #16212e;
  --vp-muted: #66727e;
  --vp-radius: .9rem;
}

*{scroll-behavior:smooth;}

body{
  background-color: var(--vp-bg);
  color: var(--vp-text);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a{ text-decoration:none; }
a.vp-link{ color: var(--vp-green); font-weight:600; font-size:.9rem; }
a.vp-link:hover{ color: var(--vp-green-dark); }

.section-pad{ padding: 3.25rem 0; }
.section-pad-sm{ padding: 2rem 0; }

.section-title{
  font-weight: 800;
  letter-spacing:.03em;
  font-size: 1.05rem;
  color: var(--vp-text);
  display:flex;
  align-items:center;
  gap:.55rem;
}
.section-title i{ color: var(--vp-green); }
.section-sub{ color: var(--vp-muted); font-size:.85rem; }

.vp-section-icon{
  width:34px; height:34px; border-radius:8px; flex-shrink:0;
  background: var(--vp-bg-darker); color: var(--vp-green);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1rem; margin-right:.65rem;
}

.vp-divider{ border-color: var(--vp-border); opacity:1; }

/* ---------- Navbar (dark) ---------- */
.vp-navbar{
  background: rgba(6,13,22,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--vp-border-dark);
}
.vp-navbar .navbar-brand{ line-height:1.1; }
.vp-brand-mark{
  width:38px; height:38px; border-radius:10px;
  background: linear-gradient(135deg, var(--vp-green), #0c7a46);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:#04150c;
}
.vp-brand-text{ font-weight:800; letter-spacing:.02em; color:#fff; font-size:1.05rem; }
.vp-brand-text span{ color: var(--vp-green); }
.vp-brand-tag{ font-size:.62rem; color: rgba(255,255,255,.5); letter-spacing:.12em; text-transform:uppercase; }

.vp-logo-img{ height:46px; width:auto; display:block; }
.vp-logo-img-lg{ height:66px; }

.vp-navbar .nav-link{
  color: #c7d2dd;
  font-size:.92rem;
  font-weight:500;
  padding: .5rem .85rem !important;
}
.vp-navbar .nav-link:hover,
.vp-navbar .nav-link.active{ color: var(--vp-green); }

.btn-vp-outline{
  border:1px solid rgba(15,23,42,.22);
  color: var(--vp-text); font-size:.88rem; font-weight:600;
  border-radius:.5rem; background:transparent;
}
.btn-vp-outline:hover{ border-color: var(--vp-green); color: var(--vp-green); }
.vp-navbar .btn-vp-outline{ border-color: rgba(255,255,255,.25); color:#fff; }

.btn-vp{
  background: var(--vp-green);
  color:#04150c;
  font-weight:700;
  border-radius:.5rem;
  border:none;
  font-size:.9rem;
}
.btn-vp:hover{ background:#26f090; color:#04150c; }

/* ---------- Hero (dark) ---------- */
.vp-hero{
  position:relative;
  min-height: 420px;
  background:
    linear-gradient(180deg, rgba(6,13,22,.55), rgba(6,13,22,.92)),
    url('https://picsum.photos/seed/vortexcity/1600/700') center/cover no-repeat;
  display:flex; align-items:center;
  border-bottom: 1px solid var(--vp-border-dark);
}
.vp-hero-eyebrow{ color: var(--vp-green); font-weight:700; letter-spacing:.04em; }
.vp-hero h1{
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 800;
  line-height:1.12;
  color:#fff;
}
.vp-hero h1 span{ color: var(--vp-green); }
.vp-hero p{ color: rgba(255,255,255,.72); max-width: 520px; }

/* dark accent card — used for broker ads and premium dark panels on light sections */
.vp-ad-card{
  background: var(--vp-bg-darker);
  border:1px solid var(--vp-border-dark);
  border-radius: var(--vp-radius);
  padding: 1.25rem 1.25rem 1.4rem;
  color: rgba(255,255,255,.85);
}
.vp-ad-card .vp-ad-icons i{
  font-size:1.1rem; color: var(--vp-green);
  background: rgba(31,214,122,.14);
  width:42px; height:42px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}
.vp-ad-card small{ color: rgba(255,255,255,.55); }

/* ---------- Cards / surfaces (light) ---------- */
.vp-card{
  background: var(--vp-surface);
  border:1px solid var(--vp-border);
  border-radius: var(--vp-radius);
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.vp-card-pad{ padding: 1.1rem 1.2rem; }

.vp-ticker-badge{
  font-size:.72rem; padding:.15rem .55rem; border-radius:20px;
  background: rgba(31,214,122,.12); color: var(--vp-green-dark); font-weight:600;
}
.vp-price-up{ color: var(--vp-green-dark); font-weight:600; }
.vp-price-down{ color: var(--vp-red); font-weight:600; }

/* Live markets tabs */
.vp-tabs .nav-link{
  color: var(--vp-muted); font-weight:600; font-size:.88rem;
  border:none; padding:.4rem .1rem; margin-right:1.4rem; border-bottom:2px solid transparent;
  background:transparent;
}
.vp-tabs .nav-link.active{
  color: var(--vp-green-dark); background:transparent; border-bottom-color: var(--vp-green);
}

/* live markets flagship mini cards */
.vp-mini-card{ padding:.6rem .6rem .8rem; text-align:center; }
.vp-mini-link{
  display:block; text-align:center; font-size:.76rem; font-weight:600;
  color: var(--vp-green-dark); margin-top:.3rem;
}
.vp-mini-link:hover{ color: var(--vp-green); }
.vp-mini-grid{ min-height:186px; }

/* economic calendar compact list */
.vp-econ-list{ display:flex; flex-direction:column; }
.vp-econ-row{
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem 0; border-bottom:1px solid var(--vp-border); font-size:.85rem;
}
.vp-econ-row:last-child{ border-bottom:none; }
.vp-econ-flag{ font-size:.95rem; line-height:1; }
.vp-econ-code{ color: var(--vp-muted); font-weight:700; font-size:.72rem; width:30px; flex-shrink:0; }
.vp-econ-event{ flex:1; color: var(--vp-text); }
.vp-econ-time{ color: var(--vp-muted); font-weight:600; font-size:.78rem; flex-shrink:0; }

/* top gainers / losers compact ticker row */
.vp-mover-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.vp-mover{
  flex:1 1 0; min-width:78px; text-align:center;
  background: var(--vp-surface-2); border-radius:.6rem; padding:.6rem .4rem;
  text-decoration:none;
}
.vp-mover:hover{ background: var(--vp-border); }
.vp-mover-ticker{ display:block; color: var(--vp-text); font-weight:700; font-size:.85rem; }
.vp-mover-change{ display:block; font-size:.78rem; font-weight:600; margin-top:.15rem; }

/* compact market overview quote list (sidebar) */
.vp-quote-list{ display:flex; flex-direction:column; }
.vp-quote-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.08);
  text-decoration:none; color:inherit;
}
.vp-quote-row:last-child{ border-bottom:none; }
.vp-quote-row:hover{ opacity:.85; }
.vp-quote-left{ display:flex; align-items:center; gap:.6rem; }
.vp-quote-icon{
  width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.08);
  display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0;
}
.vp-quote-name{ color:#fff; font-size:.85rem; font-weight:600; }
.vp-quote-right{ text-align:right; }
.vp-quote-value{ display:block; color:#fff; font-weight:700; font-size:.85rem; line-height:1.3; }
.vp-quote-change{ display:block; font-size:.74rem; font-weight:600; line-height:1.3; }

/* Market overview + fear/greed dark sidebar panel */
.vp-gauge-wrap{ text-align:center; }
.vp-gauge{
  width:150px; height:80px; margin:0 auto; position:relative;
  overflow:hidden;
}
.vp-gauge::before{
  content:"";
  position:absolute; inset:0;
  border-radius:150px 150px 0 0;
  background: conic-gradient(from 180deg,
    var(--vp-red) 0deg, var(--vp-gold) 90deg, var(--vp-green) 180deg);
  clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%);
}
.vp-gauge-mask{
  position:absolute; left:15px; right:15px; bottom:0; top:15px;
  background: var(--vp-bg-darker);
  border-radius:120px 120px 0 0;
}
.vp-gauge-needle{
  position:absolute; bottom:0; left:50%; width:2px; height:64px;
  background:#fff; transform-origin:bottom center;
  transform: translateX(-50%) rotate(var(--vp-needle, 40deg));
}
.vp-gauge-dot{
  position:absolute; bottom:-4px; left:50%; width:10px; height:10px;
  background:#fff; border-radius:50%; transform:translateX(-50%);
}

/* Trader's desk carousel */
.vp-carousel-img{
  height:100%; min-height:280px; object-fit:cover; width:100%; filter:brightness(.75);
}
.vp-carousel-caption{
  position:absolute; left:1.2rem; bottom:1.1rem; text-align:left; right:auto;
}
.vp-carousel-caption .badge-label{
  background: var(--vp-green); color:#04150c; font-weight:700;
}

/* News list (unused markup kept theme-consistent) */
.vp-news-item{
  display:flex; gap:.85rem; padding:.7rem 0;
  border-bottom:1px solid var(--vp-border);
  text-decoration:none;
}
.vp-news-item:last-child{ border-bottom:none; }
.vp-news-thumb{
  width:56px; height:56px; border-radius:.6rem; object-fit:cover; flex-shrink:0;
}
.vp-news-item h6{ font-size:.88rem; margin-bottom:.3rem; color: var(--vp-text); font-weight:600; }
.vp-news-item:hover h6{ color: var(--vp-green-dark); }
.vp-news-item .badge{ font-size:.65rem; font-weight:600; }
.vp-news-item .vp-time{ font-size:.72rem; color: var(--vp-muted); margin-left:.4rem; }

/* P&L story cards (dark image overlay — theme independent) */
.vp-story-card{
  position:relative; border-radius: var(--vp-radius); overflow:hidden; height:230px;
  background-size:cover; background-position:center;
}
.vp-story-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,13,22,.15), rgba(6,13,22,.92));
}
.vp-story-card .vp-story-body{
  position:absolute; left:0; right:0; bottom:0; padding:.9rem 1rem; z-index:2;
}
.vp-story-card .vp-story-tag{
  position:absolute; top:.75rem; left:.75rem; z-index:2;
  font-size:.68rem; font-weight:700; padding:.25rem .6rem; border-radius:5px;
}
.vp-story-card h6{ color:#fff; font-size:.85rem; margin-bottom:.15rem; font-weight:700; }
.vp-story-card .vp-story-meta{ color: rgba(255,255,255,.65); font-size:.72rem; }
.vp-story-card .vp-story-result{ font-weight:800; font-size:1rem; }

/* Astrology */
.vp-zodiac-wheel{
  width:100%; aspect-ratio:1/1; border-radius:50%;
  background: radial-gradient(circle at center, #182a42 0%, #0d1826 70%, #0a1420 100%);
  border:1px solid rgba(255,255,255,.08);
  position:relative;
  display:grid; place-items:center;
  max-width:190px; margin:0 auto;
}
.vp-zodiac-wheel span{
  position:absolute; color: var(--vp-gold); font-size:1rem;
}
.vp-zodiac-wheel i.bi-stars{ color: var(--vp-green); font-size:1.6rem; }

.vp-zodiac-rect{
  width:100%; height:150px; border-radius:.8rem; position:relative; overflow:hidden;
  background: radial-gradient(ellipse at 30% 35%, #24395c 0%, #0d1826 60%, #0a1420 100%);
  border:1px solid rgba(255,255,255,.08);
}
.vp-zodiac-ring{
  position:absolute; top:50%; left:50%; width:88px; height:88px;
  border:1px solid rgba(31,214,122,.35); border-radius:50%;
  transform:translate(-50%,-50%);
}
.vp-zodiac-ring::before{
  content:""; position:absolute; inset:14px;
  border:1px solid rgba(255,255,255,.15); border-radius:50%;
}
.vp-zodiac-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color: var(--vp-green); font-size:1.7rem;
}
.vp-star-dot{
  position:absolute; width:3px; height:3px; background:rgba(255,255,255,.75); border-radius:50%;
  box-shadow: 0 0 4px rgba(255,255,255,.5);
}
.vp-pill{
  background: var(--vp-surface-2); border:1px solid var(--vp-border);
  color: var(--vp-text); font-size:.76rem; padding:.35rem .75rem; border-radius:20px;
  display:inline-block; margin:.2rem .25rem .2rem 0;
}
.vp-pill:hover{ border-color: var(--vp-green); color: var(--vp-green-dark); }

/* Memes (dark image overlay — theme independent) */
.vp-meme-card{
  border-radius:.7rem; overflow:hidden; position:relative; height:135px;
  background-size:cover; background-position:center;
}
.vp-meme-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,13,22,0), rgba(6,13,22,.9));
}
.vp-meme-card span{
  position:absolute; left:.6rem; bottom:.5rem; right:.6rem; z-index:2;
  color:#fff; font-size:.72rem; font-weight:700; line-height:1.2;
}

/* Slangs & Dictionary */
.vp-slang-card{
  background: var(--vp-surface);
  border:1px solid var(--vp-border);
  border-radius: .7rem;
  padding:1rem 1.1rem;
  height:100%;
  transition: border-color .15s ease, transform .15s ease;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.vp-slang-card:hover{ border-color: var(--vp-green); transform: translateY(-3px); }
.vp-slang-term{ color: var(--vp-green-dark); font-weight:800; font-size:.95rem; }
.vp-slang-def{ color: var(--vp-muted); font-size:.82rem; margin-top:.3rem; }
.vp-slang-hide{ display:none !important; }

.vp-search-input{
  background: var(--vp-surface-2); border:1px solid var(--vp-border);
  color: var(--vp-text);
}
.vp-search-input:focus{ background: var(--vp-surface-2); color: var(--vp-text); border-color: var(--vp-green); box-shadow:none; }
.vp-search-input::placeholder{ color: var(--vp-muted); }
.vp-footer .vp-search-input{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color:#fff; }
.vp-footer .vp-search-input::placeholder{ color: rgba(255,255,255,.45); }

/* Graveyard (dark image overlay — theme independent) */
.vp-grave-card{
  position:relative; border-radius: var(--vp-radius); overflow:hidden; height:280px;
  background-size:cover; background-position:center;
}
.vp-grave-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,13,22,.1), rgba(6,13,22,.95));
}
.vp-grave-body{ position:absolute; left:0; right:0; bottom:0; padding:1rem; z-index:2; }
.vp-grave-body h5{ color:#fff; font-weight:800; }
.vp-grave-body p{ color: rgba(255,255,255,.7); font-size:.82rem; margin-bottom:0; }

/* Footer (dark) */
.vp-footer{
  background: var(--vp-bg-darker);
  border-top:1px solid var(--vp-border-dark);
  padding-top: 2.5rem;
}
.vp-footer-stat{ display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem; }
.vp-footer-stat i{ color: var(--vp-green); font-size:1.3rem; }
.vp-footer-stat strong{ display:block; color:#fff; font-size:.95rem; }
.vp-footer-stat span{ color: rgba(255,255,255,.55); font-size:.75rem; }
.vp-footer h6{ color:#fff; font-weight:700; font-size:.85rem; letter-spacing:.03em; text-transform:uppercase; }
.vp-footer ul{ list-style:none; padding:0; margin:0; }
.vp-footer ul li{ margin-bottom:.5rem; }
.vp-footer ul li a{ color: rgba(255,255,255,.6); font-size:.85rem; }
.vp-footer ul li a:hover{ color: var(--vp-green); }
.vp-social{
  width:36px; height:36px; border-radius:50%;
  background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
}
.vp-social:hover{ background: var(--vp-green); color:#04150c; border-color: var(--vp-green); }
.vp-footer-bottom{
  border-top:1px solid var(--vp-border-dark);
  margin-top: 2rem; padding: 1rem 0; color: rgba(255,255,255,.5); font-size:.8rem;
}
.vp-footer-bottom a{ color: rgba(255,255,255,.55); }
.vp-footer-bottom a:hover{ color: var(--vp-green); }

/* tradingview widget containers should not overflow rounded cards */
.tradingview-widget-container{ border-radius: .6rem; overflow:hidden; }

@media (max-width: 767.98px){
  .vp-hero{ min-height:auto; padding: 2.5rem 0; }
  .vp-carousel-img{ height:220px; }
}

/* ==========================================================================
   Blog — categories / archive page
   ========================================================================== */
.vp-page-banner{
  position:relative;
  padding: 3rem 0 2.25rem;
  background:
    linear-gradient(180deg, rgba(6,13,22,.65), rgba(6,13,22,.95)),
    url('https://picsum.photos/seed/vortexblogbanner/1600/500') center/cover no-repeat;
  border-bottom: 1px solid var(--vp-border-dark);
}
.vp-breadcrumb{ font-size:.82rem; color: rgba(255,255,255,.65); }
.vp-breadcrumb a{ color: rgba(255,255,255,.65); }
.vp-breadcrumb a:hover{ color: var(--vp-green); }
.vp-breadcrumb .active{ color: var(--vp-green); }
.vp-page-banner h1{ color:#fff; font-weight:800; font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.vp-page-banner p{ color: rgba(255,255,255,.72); max-width:560px; }

/* category filter pills */
.vp-cat-filter{
  background: var(--vp-surface-2);
  border:1px solid var(--vp-border);
  color: var(--vp-text);
  font-size:.82rem; font-weight:600;
  padding:.4rem 1rem; border-radius:20px;
  cursor:pointer; transition:.15s ease;
}
.vp-cat-filter:hover{ border-color: var(--vp-green); color: var(--vp-green-dark); }
.vp-cat-filter.active{ background: var(--vp-green); color:#04150c; border-color: var(--vp-green); }

/* blog post card */
.vp-post-card{
  background: var(--vp-surface);
  border:1px solid var(--vp-border);
  border-radius: var(--vp-radius);
  overflow:hidden;
  height:100%;
  transition: transform .15s ease, border-color .15s ease;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.vp-post-card:hover{ transform: translateY(-4px); border-color: rgba(31,214,122,.35); }
.vp-post-thumb{ height:180px; object-fit:cover; width:100%; }
.vp-post-cat{
  position:absolute; top:.75rem; left:.75rem;
  font-size:.68rem; font-weight:700; padding:.28rem .65rem; border-radius:5px;
  background: var(--vp-green); color:#04150c;
}
.vp-post-card .card-body{ padding:1.1rem 1.2rem 1.3rem; }
.vp-post-card h5{ color: var(--vp-text); font-size:1rem; font-weight:700; line-height:1.35; }
.vp-post-card h5 a{ color: var(--vp-text); }
.vp-post-card h5 a:hover{ color: var(--vp-green-dark); }
.vp-post-excerpt{ color: var(--vp-muted); font-size:.84rem; }
.vp-post-meta{
  display:flex; align-items:center; gap:.6rem;
  font-size:.74rem; color: var(--vp-muted);
  border-top:1px solid var(--vp-border); margin-top:.9rem; padding-top:.75rem;
}
.vp-post-meta img{ width:26px; height:26px; border-radius:50%; object-fit:cover; }

/* featured post (dark image overlay) */
.vp-featured-post{
  position:relative; border-radius: var(--vp-radius); overflow:hidden;
  min-height:320px; background-size:cover; background-position:center;
  display:flex; align-items:flex-end;
}
.vp-featured-post::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(6,13,22,.96) 10%, rgba(6,13,22,.35));
}
.vp-featured-post .vp-featured-body{ position:relative; z-index:2; padding:1.75rem; max-width:600px; }
.vp-featured-post h2{ color:#fff; font-weight:800; font-size: clamp(1.3rem, 2.4vw, 1.9rem); }
.vp-featured-post p{ color: rgba(255,255,255,.75); }

/* sidebar widgets (light) */
.vp-widget{
  background: var(--vp-surface);
  border:1px solid var(--vp-border);
  border-radius: var(--vp-radius);
  padding: 1.2rem 1.3rem;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.vp-widget h6{ color: var(--vp-text); font-weight:700; font-size:.9rem; margin-bottom:1rem; }
.vp-cat-list{ list-style:none; padding:0; margin:0; }
.vp-cat-list li{
  display:flex; justify-content:space-between; align-items:center;
  padding:.55rem 0; border-bottom:1px solid var(--vp-border); font-size:.86rem;
}
.vp-cat-list li:last-child{ border-bottom:none; }
.vp-cat-list a{ color: var(--vp-text); }
.vp-cat-list a:hover{ color: var(--vp-green-dark); }
.vp-cat-list .badge{ background: var(--vp-surface-2); color: var(--vp-muted); font-weight:600; }

.vp-popular-post{ display:flex; gap:.75rem; padding:.65rem 0; border-bottom:1px solid var(--vp-border); }
.vp-popular-post:last-child{ border-bottom:none; }
.vp-popular-post img{ width:60px; height:60px; border-radius:.5rem; object-fit:cover; flex-shrink:0; }
.vp-popular-post h6{ font-size:.82rem; color: var(--vp-text); font-weight:600; margin-bottom:.2rem; }
.vp-popular-post small{ color: var(--vp-muted); font-size:.72rem; }

.vp-tag{
  display:inline-block; background: var(--vp-surface-2); border:1px solid var(--vp-border);
  color: var(--vp-text); font-size:.76rem; padding:.3rem .7rem; border-radius:5px; margin:0 .3rem .5rem 0;
}
.vp-tag:hover{ border-color: var(--vp-green); color: var(--vp-green-dark); }

/* pagination */
.vp-pagination .page-link{
  background: var(--vp-surface); border:1px solid var(--vp-border); color: var(--vp-text);
  margin:0 .2rem; border-radius:.5rem !important;
}
.vp-pagination .page-item.active .page-link{ background: var(--vp-green); border-color: var(--vp-green); color:#04150c; }
.vp-pagination .page-link:hover{ border-color: var(--vp-green); color: var(--vp-green-dark); }

/* ==========================================================================
   Blog — single post
   ========================================================================== */
.vp-post-hero-img{ width:100%; max-height:420px; object-fit:cover; border-radius: var(--vp-radius); }
.vp-article-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem; color: var(--vp-muted); font-size:.85rem; }
.vp-article-meta img{ width:38px; height:38px; border-radius:50%; object-fit:cover; }
.vp-article-meta strong{ color: var(--vp-text); display:block; font-size:.85rem; }

.vp-article-body{ color: var(--vp-text); font-size:1.02rem; line-height:1.85; }
.vp-article-body h2{ color: var(--vp-text); font-weight:800; font-size:1.4rem; margin-top:2rem; margin-bottom:1rem; }
.vp-article-body h3{ color: var(--vp-text); font-weight:700; font-size:1.15rem; margin-top:1.5rem; margin-bottom:.8rem; }
.vp-article-body p{ margin-bottom:1.1rem; }
.vp-article-body ul, .vp-article-body ol{ margin-bottom:1.1rem; padding-left:1.4rem; }
.vp-article-body li{ margin-bottom:.4rem; }
.vp-article-body blockquote{
  border-left:3px solid var(--vp-green);
  background: var(--vp-bg-darker);
  padding: 1rem 1.3rem; border-radius:0 .6rem .6rem 0;
  color:#fff; font-style:italic; margin: 1.5rem 0;
}
.vp-article-body img{ width:100%; border-radius:.7rem; margin: 1.25rem 0; }
.vp-article-body strong{ color: var(--vp-text); }

.vp-author-box{
  background: var(--vp-surface); border:1px solid var(--vp-border); border-radius: var(--vp-radius);
  padding:1.4rem; display:flex; gap:1.1rem; align-items:flex-start;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.vp-author-box img{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.vp-author-box h6{ color: var(--vp-text); font-weight:700; margin-bottom:.3rem; }
.vp-author-box p{ color: var(--vp-muted); font-size:.85rem; margin-bottom:.5rem; }

.vp-share-btn{
  width:38px; height:38px; border-radius:50%;
  background: var(--vp-surface-2); border:1px solid var(--vp-border);
  display:inline-flex; align-items:center; justify-content:center; color: var(--vp-text);
}
.vp-share-btn:hover{ background: var(--vp-green); color:#04150c; border-color: var(--vp-green); }

.vp-comment{ display:flex; gap:.9rem; padding:1rem 0; border-bottom:1px solid var(--vp-border); }
.vp-comment:last-child{ border-bottom:none; }
.vp-comment img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.vp-comment h6{ color: var(--vp-text); font-size:.86rem; margin-bottom:.15rem; font-weight:700; }
.vp-comment .vp-comment-time{ color: var(--vp-muted); font-size:.72rem; font-weight:400; margin-left:.5rem; }
.vp-comment p{ color: var(--vp-text); font-size:.88rem; margin-bottom:.4rem; }
.vp-comment .reply-link{ font-size:.76rem; color: var(--vp-green-dark); font-weight:600; }
.vp-comment.vp-comment-reply{ margin-left:3.2rem; }