/* ---------- The SpinZ CZ top bar ----------
   One top bar for the whole site: Vault, Samples, Plugins, Guides, song pages, About, Contact, Terms, Privacy and
   My Account all load this file, so the menu cannot drift apart again. The markup comes from site-topbar.php on PHP
   pages and is pasted as-is on the static pages. The Tools dropdown is styled in brand.css and opened by
   site-motion.js; the phone burger is site-topbar.js. Plugin product pages keep their own product header.
   Nothing here leans on the page it lands in. */
#topbar,#topbar *,#topbar *:before,#topbar *:after{box-sizing:border-box}
#topbar{margin:0;color:#f7f4f0;font-family:'Poppins',Arial,sans-serif;font-size:16px;line-height:1.5;letter-spacing:0;text-transform:none}
#topbar a{color:inherit}
#topbar{height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 max(32px,calc((100vw - 1180px)/2));position:sticky;top:0;z-index:100;background:#0b0910bb;border-bottom:1px solid #ffffff0e;box-shadow:0 12px 35px #00000010;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
#tb-logo{display:flex;align-items:center;gap:5px;text-decoration:none;flex:none}
.tb-nav{display:flex;align-items:center;gap:8px;padding:5px;border:1px solid #ffffff13;border-radius:50px;background:linear-gradient(#ffffff07,#ffffff02)}
.tb-nav a{font-size:14px;font-weight:500;text-decoration:none;min-height:44px;display:flex;align-items:center;position:relative;padding:0 16px;border-radius:24px}
.tb-nav a:after{content:'';position:absolute;left:0;right:0;bottom:3px;height:2px;background:transparent}
.tb-nav a:hover{color:#ff98cb}
.tb-nav a.active{background:#ffd3eb13;color:#ffcae6;box-shadow:inset 0 1px #ffffff12}
.tb-nav a.active:after{left:30%;right:30%;bottom:-7px;background:#ff98cb;box-shadow:0 0 13px #ff98cb9c}
.tb-nav .account-link{padding:0 18px;border:1px solid #ffffff1b;border-radius:24px;background:#f7f4f00d}
a.account-link.is-premium{gap:7px;border-color:rgba(242,193,78,.45)!important;box-shadow:inset 0 0 0 1px rgba(242,193,78,.12)}
a.account-link.is-premium .spinz-crown{font-size:15px}
#tb-burger{display:none;width:44px;height:44px;border:0;background:transparent;padding:10px;cursor:pointer}
#tb-burger span{display:block;width:24px;height:2px;background:#f7f4f0;margin:5px 0;transition:transform .25s,opacity .2s}
@media(max-width:1100px){.tb-nav a{padding:0 12px}.tb-nav{gap:2px}}
@media(max-width:960px){
#topbar{height:72px;padding:0 20px;background:#0d0a13d9}
#tb-burger{display:block;flex-shrink:0;border:1px solid #e6bfdd2a;border-radius:50%;padding:9px;box-shadow:inset 0 1px #ffffff10;background:#ffffff03}
.tb-nav{display:none;position:absolute;left:0;right:0;top:71px;max-height:calc(100dvh - 80px);overflow:auto;border-radius:0 0 18px 18px;border-width:0 0 1px;background:#1a1222f7;padding:16px 20px 22px;gap:5px}
.menu-open .tb-nav{display:flex;flex-direction:column;align-items:stretch;gap:5px}
.tb-nav a{font-size:16px;min-height:54px;padding:7px 16px;border-radius:9px}
.tb-nav a:after{display:none}
.tb-nav a.active{background:#ffd3eb13;border:1px solid #f2b6da26}
.tb-nav .account-link{border-radius:9px;margin-top:9px;justify-content:center}
.menu-open #tb-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open #tb-burger span:nth-child(2){opacity:0}
.menu-open #tb-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media(prefers-reduced-motion:reduce){#tb-burger span{transition:none}}

.tb-nav .tb-signout{display:contents}
.tb-nav .tb-signout button{min-height:44px;padding:0 12px;border:0;border-radius:24px;background:none;color:#b9b5bf;font:500 13px/1.4 'Poppins',Arial,sans-serif;cursor:pointer}
.tb-nav .tb-signout button:hover{color:#ff98cb}
@media(max-width:960px){.tb-nav .tb-signout button{width:100%;min-height:48px;font-size:14px}}