:root{
  --v3-header-h: 74px;
  --v3-sidebar-w: 292px;
  --v3-radius: 18px;
  --v3-stroke: rgba(120,160,255,.16);
  --v3-stroke-2: rgba(120,160,255,.10);
  --v3-bg0: #050914;
  --v3-bg1: #070e1f;
  --v3-panel: rgba(10,18,34,.72);
  --v3-panel-2: rgba(8,14,28,.62);
  --v3-text: rgba(235,242,255,.92);
  --v3-muted: rgba(235,242,255,.65);
  --v3-accent: #4ea3ff;
  --v3-accent-2: #7a5cff;
}

/* Activate new look only when body has .v3 */
body.v3{
  background: radial-gradient(1200px 800px at 20% -10%, rgba(78,163,255,.22), transparent 60%),
              radial-gradient(900px 700px at 95% 10%, rgba(122,92,255,.18), transparent 55%),
              linear-gradient(180deg, var(--v3-bg0), var(--v3-bg1));
  color: var(--v3-text);
}

/* Header */
body.v3 .topbar{
  position: sticky;
  top: 0;
  z-index: 1100;
  background: rgba(6,10,18,.68);
  border-bottom: 1px solid var(--v3-stroke);
  backdrop-filter: blur(12px);
}

body.v3 .topbar-inner{
  min-height: var(--v3-header-h);
}

/* Keep header content full width (container is ok) */
body.v3 .topbar .brand .name{ letter-spacing: .2px; }

/* Sidebar: repurpose existing .nav */
body.v3 .topbar .nav{
  position: fixed;
  left: 0;
  top: var(--v3-header-h);
  bottom: 0;
  width: var(--v3-sidebar-w);
  background: rgba(6,10,18,.74);
  border-right: 1px solid var(--v3-stroke);
  backdrop-filter: blur(12px);
  overflow: auto;
}

body.v3 .topbar .nav .container{
  max-width: none;
  padding: 0;
}

body.v3 .nav-inner{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 14px 12px 18px;
}

body.v3 .nav-inner a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
}

body.v3 .nav-inner a:hover{
  background: rgba(78,163,255,.08);
  border-color: rgba(78,163,255,.18);
}

body.v3 .nav-inner a.active{
  background: rgba(78,163,255,.14);
  border-color: rgba(78,163,255,.26);
}

body.v3 .nav-group-title{
  margin: 14px 8px 6px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(235,242,255,.55);
}

/* Search */
body.v3 .nav-search{
  position: sticky;
  top: 0;
  padding: 10px 10px 8px;
  background: rgba(6,10,18,.92);
  border-bottom: 1px solid var(--v3-stroke);
  z-index: 2;
}
body.v3 .nav-search input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--v3-stroke);
  background: rgba(10,18,34,.55);
  color: var(--v3-text);
  outline: none;
}
body.v3 .nav-search input::placeholder{ color: rgba(235,242,255,.45); }

/* Main and footer offset */
body.v3 main.container{
  max-width: none;
  margin-left: calc(var(--v3-sidebar-w) + 22px);
  margin-right: 22px;
  padding-top: 18px;
}

body.v3 footer.site-footer{
  margin-left: var(--v3-sidebar-w);
}

/* Cards: slightly more airy */
body.v3 .card{
  border-radius: var(--v3-radius);
  border: 1px solid var(--v3-stroke);
  background: linear-gradient(180deg, rgba(12,20,38,.74), rgba(10,18,34,.60));
}

body.v3 .section-title{ letter-spacing: .2px; }

body.v3 .tabs-pills{
  flex-wrap: wrap;
  gap: 8px;
}

body.v3 .pill{
  border-radius: 999px;
  border: 1px solid var(--v3-stroke);
  background: rgba(10,18,34,.55);
}
body.v3 .pill:hover{ border-color: rgba(78,163,255,.28); }

body.v3 .pill-accent{
  border-color: rgba(78,163,255,.30);
  background: linear-gradient(180deg, rgba(78,163,255,.18), rgba(78,163,255,.10));
}

/* Plugin figure wrapper */
body.v3 .plugin-figure-wrap{
  margin: 14px 0 8px;
}

/* Mobile: hide sidebar and use drawer */
@media (max-width: 980px){
  body.v3 .topbar .nav{ display: none; }
  body.v3 main.container{ margin-left: 0; margin-right: 0; }
  body.v3 footer.site-footer{ margin-left: 0; }
}

/* Reduce motion preferences */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
}

/* Drawer section labels */
body.v3 .drawer-section{
  margin: 14px 12px 6px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(235,242,255,.55);
}