:root {
  --vg-bg:#0b0d10; --vg-surface:#12161b; --vg-card:#161b22; --vg-text:#e6edf3;
  --vg-subtle:#9da7b3; --vg-accent:#6bb4ff; --vg-ring:rgba(107,180,255,0.35);
  --vg-cols-mobile: 2; --vg-cols-desktop: 5;
}
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--vg-bg); color:var(--vg-text);
  font-family: 'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans";
  font-size:16px; line-height:1.55;
}
a{ color:var(--vg-accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Header */
.vg-header{ position:sticky; top:0; z-index:50; background:linear-gradient(180deg,#0b0d10,#0b0d10f0); border-bottom:1px solid #1f2630; backdrop-filter: blur(6px); }
.vg-header__inner{ max-width:1200px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.vg-menu-toggle, .vg-search-toggle{ background:var(--vg-surface); color:var(--vg-text); border:0; padding:6px 10px; border-radius:8px; font-size:16px; }
.vg-brand__link{ color:#fff; font-weight:800; font-size:20px; letter-spacing:.2px; text-decoration:none; }
.vg-catnav-desktop{ display:none; border-top:1px solid #1f2630; }
.vg-catnav__list{ display:flex; gap:10px; list-style:none; margin:0; padding:8px 16px; max-width:1200px; overflow:auto; scrollbar-width:none; }
.vg-catnav__list::-webkit-scrollbar{ display:none; }
.vg-catnav__list a{ display:inline-block; padding:6px 10px; border-radius:999px; background:var(--vg-surface); color:var(--vg-subtle); white-space:nowrap; text-decoration:none; }
.vg-catnav__list a:hover{ color:var(--vg-text); }
.vg-searchbar{ max-width:1200px; margin:0 auto; padding:8px 16px; border-top:1px solid #1f2630; }

.vg-searchform{ display:flex; gap:8px; }
.vg-searchform__input{ flex:1; padding:10px 12px; border-radius:8px; border:1px solid #243040; background:#0e1318; color:var(--vg-text); }
.vg-searchform__btn{ padding:10px 12px; border-radius:8px; border:1px solid #243040; background:var(--vg-surface); color:var(--vg-text); }

/* Drawer */
.vg-drawer{ position:fixed; inset:0; display:none; }
.vg-drawer.is-open{ display:block; }
.vg-drawer__panel{ position:absolute; left:0; top:0; bottom:0; width:75%; max-width:320px; background:var(--vg-card); padding:16px; box-shadow: 4px 0 20px rgba(0,0,0,.4); overflow:auto; }
.vg-drawer__close{ background:var(--vg-surface); color:var(--vg-text); border:0; padding:6px 10px; border-radius:8px; }
.vg-drawer__nav ul{ list-style:none; padding:0; margin:12px 0 0; display:flex; flex-direction:column; gap:8px; }
.vg-drawer__nav a{ color:var(--vg-text); text-decoration:none; padding:8px 10px; border-radius:8px; background:var(--vg-surface); }
.vg-drawer__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }

/* Container */
.vg-container{ max-width:1200px; padding:24px 16px; margin:0 auto; }

/* Grid: variables from Customizer via inline style in head */
.vg-grid{ display:grid; grid-template-columns:repeat(var(--vg-cols-mobile), minmax(0,1fr)); gap:16px; }
@media (min-width: 1024px){ .vg-grid{ grid-template-columns:repeat(var(--vg-cols-desktop), minmax(0,1fr)); } }

.vg-card{ background:var(--vg-card); border-radius:12px; overflow:hidden; transition:transform .15s, box-shadow .15s; }
.vg-card:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.35); }
.vg-card__link{ display:block; color:inherit; text-decoration:none; }
.vg-card__thumb{ position:relative; aspect-ratio:16/9; background:#0f1317; }
.vg-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.vg-thumb--placeholder{ width:100%; height:100%; background:linear-gradient(135deg,#0e1318,#121820); }
.vg-duration{ position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.7); color:#fff; font-size:12px; padding:2px 6px; border-radius:6px; }
.vg-card__title{ font-size:16px; font-weight:600; padding:10px 12px 12px; margin:0; color:var(--vg-text); }

/* Pagination */
.vg-pagination{ display:flex; justify-content:center; margin:24px 0 8px; }
.page-numbers{ color:var(--vg-subtle); margin:0 6px; padding:6px 10px; border-radius:8px; background:var(--vg-surface); text-decoration:none; }
.page-numbers.current{ color:var(--vg-text); box-shadow:0 0 0 2px var(--vg-ring) inset; }

/* Single */
.vg-hero{ background:var(--vg-card); border-radius:12px; padding:12px; }
.vg-embed-wrap{ position:relative; width:100%; background:#000; border-radius:10px; overflow:hidden; aspect-ratio:16/9; }
.vg-embed{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vg-hero__title{ margin:12px 8px 0; font-size:24px; font-weight:700; color:#fff; padding:8px 12px; border-left:4px solid var(--vg-accent); background:rgba(107,180,255,.08); border-radius:8px; }
.vg-content{ color:var(--vg-text); line-height:1.7; }
.vg-content p{ margin:0 0 1em; }

.vg-tax{ display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.vg-tax__block{ display:flex; align-items:center; gap:8px; }
.vg-tax__icon{ opacity:.9; }
.vg-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.vg-chip{ display:inline-block; background:var(--vg-surface); color:var(--vg-subtle); font-size:12px; padding:4px 8px; border-radius:999px; text-decoration:none; }
.vg-chip:hover{ color:var(--vg-text); }

.vg-tags-strip{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:thin; padding-bottom:6px; }
.vg-tags-strip::-webkit-scrollbar{ height:6px; }
.vg-tags-strip::-webkit-scrollbar-thumb{ background:#2a3442; border-radius:999px; }

.vg-post-nav{ display:flex; justify-content:space-between; gap:12px; margin:24px 0; }
.vg-fallback-thumb img{ width:100%; height:auto; display:block; border-radius:12px; }

/* Footer */
.vg-footer{ border-top:1px solid #1f2630; margin-top:24px; }
.vg-footer__inner{ max-width:1200px; margin:0 auto; padding:16px; display:flex; justify-content:center; color:var(--vg-subtle); }

@media (min-width: 1024px){
  .vg-catnav-desktop{ display:block; }
  .vg-header__inner{ padding:12px 16px; }
}