/* jaspayaja v27 — glossy glass navigation (top bar + mobile drawer) */
:root{--nv-glass:rgba(255,255,255,.72);--nv-line:rgba(124,58,237,.16);--nv-ink:#1e1238;--nv-mute:#5b4f78;--nv-hover:rgba(124,58,237,.08);--nv-shadow:0 18px 40px -22px rgba(76,29,149,.35)}
.dark{--nv-glass:rgba(20,12,38,.55);--nv-line:rgba(255,255,255,.1);--nv-ink:#f5f0ff;--nv-mute:#b9aed3;--nv-hover:rgba(255,255,255,.07);--nv-shadow:0 22px 50px -24px rgba(0,0,0,.9)}
.jpn-grad{background:linear-gradient(135deg,#8B5CF6 0%,#C026D3 55%,#FF1493 100%)}

/* ---------- top bar: floating glass pill ---------- */
header.sticky.top-0{top:10px!important;width:calc(100% - 20px)!important;max-width:1280px;margin:10px auto 0;border:1px solid var(--nv-line)!important;border-radius:22px;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,0) 45%),var(--nv-glass)!important;
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:var(--nv-shadow),inset 0 1px 0 rgba(255,255,255,.18);transition:box-shadow .4s,background-color .4s}
header.sticky.top-0::after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(178,108,255,.7),rgba(255,20,147,.7),transparent);opacity:.7}
header.sticky.top-0 > div{height:60px!important}

header.sticky.top-0 nav.md\:flex{gap:4px!important;padding:4px;border-radius:999px;background:var(--nv-hover);border:1px solid var(--nv-line)}
header.sticky.top-0 nav a[data-testid^="nav-link-"]{position:relative;display:inline-flex!important;align-items:center;gap:6px;padding:7px 14px!important;border-radius:999px!important;
  font-size:13.5px!important;font-weight:600!important;color:var(--nv-mute)!important;background:transparent!important;transition:color .3s,background-color .3s,transform .3s cubic-bezier(.22,1,.36,1)}
header.sticky.top-0 nav a[data-testid^="nav-link-"]:hover{color:var(--nv-ink)!important;background:var(--nv-hover)!important;transform:translateY(-1px)}
header.sticky.top-0 nav a[data-testid^="nav-link-"][aria-current="page"]{color:#fff!important;
  background:linear-gradient(135deg,#8B5CF6,#C026D3 60%,#FF1493)!important;box-shadow:0 8px 20px -8px rgba(232,28,191,.7),inset 0 1px 0 rgba(255,255,255,.4)}
header.sticky.top-0 nav a[data-testid^="nav-link-"] svg{width:15px!important;height:15px!important}

header.sticky.top-0 [data-testid="mobile-menu-button"],header.sticky.top-0 [data-testid="theme-toggle"],header.sticky.top-0 [data-testid="bulletin-bell-button"]{
  width:38px;height:38px;border-radius:13px!important;border:1px solid var(--nv-line)!important;background:var(--nv-hover)!important;transition:transform .3s cubic-bezier(.22,1,.36,1),background-color .3s}
header.sticky.top-0 [data-testid="mobile-menu-button"]:hover,header.sticky.top-0 [data-testid="theme-toggle"]:hover,header.sticky.top-0 [data-testid="bulletin-bell-button"]:hover{transform:translateY(-2px)}
header.sticky.top-0 [data-testid="mobile-menu-button"]{background:linear-gradient(135deg,rgba(139,92,246,.9),rgba(255,20,147,.9))!important;color:#fff!important;border-color:rgba(255,255,255,.25)!important;box-shadow:0 10px 22px -10px rgba(232,28,191,.8),inset 0 1px 0 rgba(255,255,255,.4)}

header.sticky.top-0 [data-testid="nav-register"]{position:relative;overflow:hidden;padding:8px 16px!important;border-radius:999px!important;font-weight:700!important;color:#fff!important;
  background-image:linear-gradient(135deg,#8B5CF6,#C026D3 60%,#FF1493)!important;background-size:100% 100%!important;animation:none!important;
  box-shadow:0 10px 22px -10px rgba(232,28,191,.85),inset 0 1px 0 rgba(255,255,255,.4)!important;transition:transform .3s cubic-bezier(.22,1,.36,1)}
header.sticky.top-0 [data-testid="nav-register"]:hover{transform:translateY(-2px)}
header.sticky.top-0 [data-testid="nav-login"]{padding:8px 14px!important;border-radius:999px!important;font-weight:600!important;transition:background-color .3s}
header.sticky.top-0 [data-testid="nav-login"]:hover{background:var(--nv-hover)!important}

/* ---------- mobile drawer ---------- */
[data-slot="sheet-overlay"]{background:rgba(8,3,20,.55)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.jpn-drawer{width:min(86vw,360px)!important;max-width:none!important;padding:22px 18px 18px!important;gap:0!important;overflow-y:auto;
  border-left:1px solid var(--nv-line)!important;border-radius:28px 0 0 28px;color:var(--nv-ink)!important;
  background:radial-gradient(120% 60% at 100% 0%,rgba(232,28,191,.22),transparent 60%),radial-gradient(90% 50% at 0% 100%,rgba(124,58,237,.28),transparent 60%),var(--nv-glass)!important;
  -webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);
  box-shadow:-30px 0 80px -30px rgba(0,0,0,.7),inset 1px 0 0 rgba(255,255,255,.12)!important}
.jpn-drawer::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(165deg,rgba(255,255,255,.14),transparent 30%)}
.jpn-drawer > h2{position:relative;font-size:19px!important;font-weight:800!important;letter-spacing:-.02em;gap:10px!important;padding:4px 6px 18px;border-bottom:1px solid var(--nv-line)}
.jpn-drawer > h2 .jp-mark{width:34px!important;height:34px!important;filter:drop-shadow(0 6px 14px rgba(232,28,191,.45))}
.jpn-drawer > h2::after{content:"Menu";margin-left:auto;margin-right:40px;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--nv-mute);
  padding:5px 10px;border-radius:999px;border:1px solid var(--nv-line)}
.jpn-drawer [data-slot="sheet-close"]{top:20px!important;right:16px!important;width:36px!important;height:36px!important;border-radius:12px!important;
  background:var(--nv-hover)!important;border:1px solid var(--nv-line)!important;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.jpn-drawer [data-slot="sheet-close"]:hover{transform:rotate(90deg)}
.jpn-drawer nav{position:relative;margin-top:16px!important;gap:6px!important}
.jpn-drawer nav a[data-testid^="mobile-link-"]:not([data-testid="mobile-link-login"]){position:relative;gap:14px!important;padding:10px 12px!important;border-radius:18px!important;
  font-size:15px!important;font-weight:600;color:var(--nv-ink);border:1px solid transparent;
  transition:background-color .3s,border-color .3s,transform .35s cubic-bezier(.22,1,.36,1);animation:jpnIn .55s cubic-bezier(.22,1,.36,1) backwards}
.jpn-drawer nav a[data-testid^="mobile-link-"]:not([data-testid="mobile-link-login"])::after{content:"";margin-left:auto;width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg);opacity:.35;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s}
.jpn-drawer nav a[data-testid^="mobile-link-"]:hover{background:var(--nv-hover)!important;border-color:var(--nv-line);transform:translateX(-3px)}
.jpn-drawer nav a[data-testid^="mobile-link-"]:hover::after{opacity:.8;transform:translateX(3px) rotate(45deg)}
.jpn-drawer nav a[data-testid^="mobile-link-"] > svg:first-child{box-sizing:content-box;width:18px!important;height:18px!important;padding:10px;border-radius:13px;flex:none;
  color:#E9D5FF;background:linear-gradient(145deg,rgba(139,92,246,.55),rgba(232,28,191,.35));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 16px -8px rgba(232,28,191,.6)}
html:not(.dark) .jpn-drawer nav a[data-testid^="mobile-link-"] > svg:first-child{color:#fff}
.jpn-drawer nav a[aria-current="page"]{background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(255,20,147,.14))!important;border-color:rgba(232,28,191,.35)!important}
.jpn-drawer nav a[aria-current="page"]::after{opacity:.9!important}
.jpn-drawer nav a[data-testid="mobile-link-login"]{margin-top:14px!important;height:52px;border-radius:18px!important;font-size:15px!important;font-weight:800;color:#fff!important;position:relative;overflow:hidden;
  background-image:linear-gradient(135deg,#8B5CF6 0%,#C026D3 55%,#FF1493 100%)!important;background-size:100% 100%!important;box-shadow:0 16px 34px -14px rgba(232,28,191,.85),inset 0 1px 0 rgba(255,255,255,.45)!important;
  animation:jpnIn .55s cubic-bezier(.22,1,.36,1) backwards;animation-delay:.42s}
.jpn-drawer nav a[data-testid="mobile-link-login"]::before{content:"";position:absolute;inset:0 0 50% 0;background:linear-gradient(rgba(255,255,255,.28),transparent)}
.jpn-drawer nav a[data-testid="mobile-link-login"]::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:jpnShine 3.2s 1s infinite}
.jpn-drawer nav a:nth-child(1){animation-delay:.04s}.jpn-drawer nav a:nth-child(2){animation-delay:.09s}.jpn-drawer nav a:nth-child(3){animation-delay:.14s}
.jpn-drawer nav a:nth-child(4){animation-delay:.19s}.jpn-drawer nav a:nth-child(5){animation-delay:.24s}.jpn-drawer nav a:nth-child(6){animation-delay:.29s}
.jpn-drawer nav a:nth-child(7){animation-delay:.34s}.jpn-drawer nav a:nth-child(8){animation-delay:.39s}.jpn-drawer nav a:nth-child(9){animation-delay:.44s}
@keyframes jpnIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes jpnShine{0%{left:-60%}35%,100%{left:130%}}
.jpn-foot{position:relative;margin-top:auto;padding:16px 8px 4px;font-size:12px;color:var(--nv-mute);display:flex;align-items:center;gap:8px;border-top:1px solid var(--nv-line)}
.jpn-foot i{width:8px;height:8px;border-radius:50%;background:#34D399;box-shadow:0 0 0 4px rgba(52,211,153,.18)}
@media (prefers-reduced-motion:reduce){.jpn-drawer nav a{animation:none!important}}