:root{
  --vn-bg: rgba(18,18,18,.78);
  --vn-brd: rgba(255,255,255,.08);
  --vn-txt: rgba(255,255,255,.92);
  --vn-muted: rgba(255,255,255,.62);
  --vn-pill: rgba(124,58,237,.20);
  --vn-pill-brd: rgba(124,58,237,.38);
  --vn-pill-txt: #e9ddff;
  --vn-red: rgba(220,38,38,.9);
}

body.theme-light{
  --vn-bg: rgba(255,255,255,.86);
  --vn-brd: rgba(0,0,0,.08);
  --vn-txt: rgba(0,0,0,.92);
  --vn-muted: rgba(0,0,0,.55);
  --vn-pill: rgba(124,58,237,.14);
  --vn-pill-brd: rgba(124,58,237,.28);
  --vn-pill-txt: #2c1d55;
}

.vn{position:sticky;top:0;z-index:1200;backdrop-filter: blur(14px);-webkit-backdrop-filter: blur(14px);border-bottom:1px solid var(--vn-brd);background:var(--vn-bg)}
.vn-inner{max-width:920px;margin:0 auto;padding:10px 14px;display:flex;align-items:center;gap:12px}
.vn-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--vn-txt);font-weight:900;letter-spacing:.2px}
.vn-dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,#7c3aed,#2563eb);box-shadow:0 0 0 6px rgba(124,58,237,.12)}
.vn-title{font-size:14px}

.vn-links{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.vn-link{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:14px;border:1px solid transparent;text-decoration:none;color:var(--vn-muted);background:transparent;transition:transform .12s ease, background .12s ease, border-color .12s ease,color .12s ease}
.vn-link:hover{transform:translateY(-1px);background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:var(--vn-txt)}
body.theme-light .vn-link:hover{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)}
.vn-link.is-active{color:var(--vn-txt);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10)}
body.theme-light .vn-link.is-active{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.10)}
.vn-ico{font-size:16px;line-height:1}

.vn-badge{margin-left:6px;min-width:22px;height:18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;background:var(--vn-pill);border:1px solid var(--vn-pill-brd);color:var(--vn-pill-txt);animation:vnPulse 1.8s ease-in-out infinite}
@keyframes vnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

.vn-right{display:flex;align-items:center;gap:8px}
.vn-btn{width:38px;height:38px;border-radius:14px;border:1px solid var(--vn-brd);background:rgba(255,255,255,.03);color:var(--vn-txt);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s ease, background .12s ease}
.vn-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.06)}
body.theme-light .vn-btn{background:rgba(0,0,0,.02)}
body.theme-light .vn-btn:hover{background:rgba(0,0,0,.06)}

.vn-dot-badge{position:absolute;width:10px;height:10px;border-radius:999px;right:6px;top:6px;background:rgba(220,38,38,.95);box-shadow:0 0 0 6px rgba(220,38,38,.14)}
#vnBell{position:relative}

.vn-user{position:relative}
.vn-user-btn{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:16px;border:1px solid var(--vn-brd);background:rgba(255,255,255,.03);color:var(--vn-txt);cursor:pointer;transition:transform .12s ease, background .12s ease}
.vn-user-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.06)}
body.theme-light .vn-user-btn{background:rgba(0,0,0,.02)}
body.theme-light .vn-user-btn:hover{background:rgba(0,0,0,.06)}
.vn-avatar{width:28px;height:28px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;background:linear-gradient(135deg,rgba(124,58,237,.8),rgba(37,99,235,.7));color:#fff}
.vn-user-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;font-size:13px}
.vn-chev{opacity:.7}

.vn-menu{position:absolute;right:0;top:46px;min-width:220px;border-radius:16px;border:1px solid var(--vn-brd);background:rgba(20,20,20,.96);backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px);box-shadow:0 24px 80px rgba(0,0,0,.55);padding:10px;display:none}
body.theme-light .vn-menu{background:rgba(255,255,255,.96);box-shadow:0 24px 80px rgba(0,0,0,.18)}
.vn-user.open .vn-menu{display:block;animation:vnMenuIn .16s ease}
@keyframes vnMenuIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.vn-menu-h{font-weight:900;color:var(--vn-txt);margin:2px 4px 8px}
.vn-menu-i{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
body.theme-light .vn-menu-i{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.06)}
.vn-k{color:var(--vn-muted);font-size:12px;font-weight:700}
.vn-v{color:var(--vn-txt);font-size:12px;font-weight:900}
.vn-menu-sep{height:1px;background:var(--vn-brd);margin:10px 4px}
.vn-menu-a{display:block;padding:10px 10px;border-radius:14px;color:var(--vn-txt);text-decoration:none;border:1px solid transparent}
.vn-menu-a:hover{background:rgba(220,38,38,.10);border-color:rgba(220,38,38,.18)}

/* Mobile bottom nav */
.vn-bottom{display:none}
@media(max-width:720px){
  .vn-inner{padding:10px 12px}
  .vn-links{display:none}
  .vn-user-name{display:none}
  .vn-bottom{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1200;gap:8px;padding:10px 10px;background:var(--vn-bg);border-top:1px solid var(--vn-brd);backdrop-filter: blur(14px);-webkit-backdrop-filter: blur(14px)}
  .wrap{padding-bottom:86px}
  .vn-bitem{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px 8px;border-radius:16px;text-decoration:none;color:var(--vn-muted);border:1px solid transparent;position:relative}
  .vn-bitem.is-active{color:var(--vn-txt);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10)}
  body.theme-light .vn-bitem.is-active{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.10)}
  .vn-bico{font-size:18px;line-height:1}
  .vn-btxt{font-size:11px;font-weight:800}
  .vn-bbadge{position:absolute;top:6px;right:10px;min-width:18px;height:16px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;background:var(--vn-pill);border:1px solid var(--vn-pill-brd);color:var(--vn-pill-txt)}
}

/* PJAX transition */
#appCard.is-loading{opacity:.7;transform:translateY(2px);transition:opacity .14s ease, transform .14s ease}