:root {
	--drumix-nav-width: 112px;
	--drumix-nav-mobile-height: 62px;
	--drumix-nav-accent: var(--drumix-color-primary, #0066cc);
	--drumix-nav-ink: var(--drumix-color-muted, #626269);
	--drumix-nav-line: var(--drumix-color-border, rgba(29,29,31,.12));
	--drumix-nav-panel: color-mix(in srgb, var(--drumix-color-surface, #fff) 96%, transparent);
	--drumix-nav-active: var(--drumix-color-primary-soft, rgba(0,102,204,.10));
}

.drumix-nav-rail,
.drumix-nav-mobile { display: none; }

#pbShareSongTop { display: none; }

.drumix-nav-item,
.drumix-nav-logo {
	color: inherit;
	text-decoration: none;
}

button.drumix-nav-item {
	margin: 0;
	border: 0;
	background: transparent;
	font: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.drumix-nav-icon {
	display: block;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
}

:where(.drumix-nav-item,.drumix-nav-logo,.drumix-song-back):focus-visible {
	outline: 3px solid rgba(10,132,255,.42);
	outline-offset: 2px;
}

@media (min-width:900px) {
	body.drumix-has-navigation:not(.pb-song-mode) {
		padding-left: var(--drumix-nav-width) !important;
	}

	body.drumix-has-navigation .today-actions,
	body.drumix-has-navigation .rep-actions,
	body.drumix-has-navigation[data-drumix-section="help"] .top .nav,
	body.drumix-has-navigation[data-drumix-section="profile"] .top .top-link,
	body.drumix-has-navigation[data-drumix-section="favorites"] .top .actions > a,
	body.drumix-has-navigation .cat-actions > .cat-back {
		display: none !important;
	}

	.drumix-nav-rail {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 1000;
		width: var(--drumix-nav-width);
		padding: max(8px,env(safe-area-inset-top,0px)) 6px max(8px,env(safe-area-inset-bottom,0px));
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		overflow-x: hidden;
		overflow-y: auto;
		scrollbar-width: none;
		border-right: 1px solid var(--drumix-nav-line);
		background: var(--drumix-nav-panel);
		-webkit-backdrop-filter: blur(18px);
		backdrop-filter: blur(18px);
	}

	.drumix-nav-rail::-webkit-scrollbar { display: none; }

	.drumix-nav-logo {
		width: 100px;
		height: 52px;
		flex: 0 0 52px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		overflow: hidden;
	}

	.drumix-nav-logo img {
		display: block;
		width: 100px;
		height: 32px;
		object-fit: contain;
	}

	.drumix-nav-rail .drumix-nav-item {
		position: relative;
		width: 100px;
		min-height: 57px;
		padding: 5px 2px;
		box-sizing: border-box;
		border-radius: 9px;
		color: var(--drumix-nav-ink);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		text-align: center;
		flex: 0 0 57px;
	}

	.drumix-nav-rail .drumix-nav-item span {
		max-width: 96px;
		font: 650 10px/1.15 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
	}

	.drumix-nav-rail .drumix-nav-item:hover { background: rgba(128,128,136,.10); }

	.drumix-nav-rail .drumix-nav-item.is-active {
		background: var(--drumix-nav-active);
		color: var(--drumix-nav-accent);
	}

	.drumix-nav-rail .drumix-nav-item.is-active::before {
		content: "";
		position: absolute;
		left: -6px;
		top: 8px;
		bottom: 8px;
		width: 3px;
		border-radius: 0 3px 3px 0;
		background: currentColor;
	}

	body.pb-song-mode.pb-skin-light:not(.pb-admin) #drumixSongBack {
		width: 100px;
		min-height: 38px;
		padding: 0 8px;
		border: 1px solid rgba(0,0,0,.09);
		border-radius: 9px;
		background: #fff;
		color: #3a3a3c;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		gap: 4px;
		font: 650 10px/1.1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
		cursor: pointer;
	}

	body.pb-song-mode.pb-skin-light:not(.pb-admin) #drumixSongBack:hover { background: #f1f1f3; }
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #drumixSongBack .drumix-song-back-icon { width: 16px; height: 16px; }
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbStudentRailCurrent { order: 1 !important; }
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbWholeSongPracticeTop { order: 2 !important; display: inline-flex !important; }
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbConcertModeTop { order: 3 !important; display: inline-flex !important; }
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbShareSongTop { order: 4 !important; display: inline-flex !important; }
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #todayTopButton { order: 5 !important; display: inline-flex !important; }
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #repertoireTopButton { order: 6 !important; display: inline-flex !important; }
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #catalogTopButton { order: 7 !important; display: inline-flex !important; }
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #profileTopButton { order: 8 !important; display: inline-flex !important; }
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #collectionTopButton,
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #helpTopButton,
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #favoriteTopButton,
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbFragmentPracticeTop,
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pageLayoutToggleButton,
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #legendToggleButton,
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #drumVizToggleTop,
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbUndoTopButton { display: none !important; }

	body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #drumixSongBack {
		border-color: rgba(255,255,255,.12);
		background: #2c2c2e;
		color: #f5f5f7;
	}

	body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #drumixSongBack:hover { background: #3a3a3c; }
}

@media (max-width:899px) {
	body.drumix-has-navigation:not(.pb-song-mode) {
		padding-bottom: calc(var(--drumix-nav-mobile-height) + env(safe-area-inset-bottom,0px)) !important;
	}

	.drumix-nav-mobile,
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav.drumix-song-mobile-nav {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 4680;
		height: calc(var(--drumix-nav-mobile-height) + env(safe-area-inset-bottom,0px));
		padding: 5px max(7px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(7px,env(safe-area-inset-left,0px));
		box-sizing: border-box;
		display: grid !important;
		grid-template-columns: repeat(4,minmax(0,1fr)) !important;
		gap: 2px;
		border-top: 1px solid var(--drumix-nav-line);
		background: rgba(255,255,255,.95);
		-webkit-backdrop-filter: blur(18px);
		backdrop-filter: blur(18px);
	}

	.drumix-nav-mobile .drumix-nav-item,
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav.drumix-song-mobile-nav > .drumix-nav-item {
		min-width: 0;
		padding: 3px 2px;
		border-radius: 10px;
		color: #74747a;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		font: 650 clamp(9px,2.6vw,10px)/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
		text-align: center;
		white-space: nowrap;
	}

	.drumix-nav-mobile .drumix-nav-item.is-active {
		background: var(--drumix-nav-active);
		color: var(--drumix-nav-accent);
	}

	.drumix-nav-mobile .drumix-nav-icon,
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav.drumix-song-mobile-nav .drumix-nav-icon {
		width: 21px;
		height: 21px;
		flex-basis: 21px;
	}

	body.pb-song-mode.pb-skin-light:not(.pb-admin) #drumixSongBack {
		grid-column: 1;
		grid-row: 1;
		width: 100%;
		height: 44px;
		padding: 0 4px;
		border: 0;
		border-radius: 10px;
		background: transparent;
		color: #0a84ff;
		display: inline-flex !important;
		align-items: center;
		justify-content: flex-start;
		gap: 2px;
		font: 700 11px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
		cursor: pointer;
	}

	body.pb-song-mode.pb-skin-light:not(.pb-admin) #drumixSongBack .drumix-song-back-icon { width: 22px; height: 22px; }
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbLightBrand { display: none !important; }
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbLightTitle { grid-column: 2 !important; }

	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav .drumix-song-audio-actions {
		position: absolute;
		right: max(8px,env(safe-area-inset-right,0px));
		bottom: calc(100% + 8px);
		min-width: 98px;
		height: 48px;
		padding: 2px 4px;
		box-sizing: border-box;
		border: 1px solid rgba(0,0,0,.10);
		border-radius: 15px;
		background: rgba(255,255,255,.96);
		box-shadow: 0 10px 28px rgba(0,0,0,.14);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 3px;
	}

	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav .drumix-song-audio-actions .pbAppMinusAction {
		position: static !important;
		width: 44px;
		height: 44px;
		min-width: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav .drumix-song-audio-actions .pbAppMinusPlay {
		position: static !important;
		left: auto !important;
		top: auto !important;
		width: 40px;
		height: 40px;
		transform: none !important;
		border-width: 2px;
	}

	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav .drumix-song-audio-actions .pbAppMinusSettings {
		width: 44px;
		height: 44px;
		padding: 0;
		flex: 0 0 44px;
		font-size: 0;
	}

	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav .drumix-song-audio-actions .pbAppSettingsLabel { display: none; }
	body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav .drumix-song-audio-actions .pbAppNavIcon { font-size: 20px; }
	body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed:not(.pb-admin).pb-student-minus-visible #RightHandContent { padding-bottom: calc(128px + env(safe-area-inset-bottom,0px)); }
	body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracBody { padding-bottom: calc(132px + env(safe-area-inset-bottom,0px)); }

	html.pb-public-dark {
		--drumix-nav-ink: #b0b0b6;
		--drumix-nav-line: rgba(255,255,255,.10);
		--drumix-nav-panel: rgba(21,21,23,.98);
		--drumix-nav-active: rgba(10,132,255,.17);
	}

	html.pb-public-dark .drumix-nav-mobile,
	body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbMobileAppNav.drumix-song-mobile-nav {
		border-color: rgba(255,255,255,.10);
		background: rgba(21,21,23,.95);
	}

	html.pb-public-dark .drumix-nav-mobile .drumix-nav-item,
	body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbMobileAppNav.drumix-song-mobile-nav > .drumix-nav-item { color: #b0b0b6; }

	html.pb-public-dark .drumix-nav-mobile .drumix-nav-item.is-active { color: #64a9ff; }
	body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #drumixSongBack { color: #64a9ff; }
	body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbMobileAppNav .drumix-song-audio-actions {
		border-color: rgba(255,255,255,.12);
		background: rgba(28,28,30,.97);
	}
}

html.pb-public-dark .drumix-nav-rail {
	--drumix-nav-ink: #b0b0b6;
	--drumix-nav-line: rgba(255,255,255,.10);
	--drumix-nav-panel: rgba(21,21,23,.98);
	--drumix-nav-active: rgba(10,132,255,.17);
}

@media (prefers-reduced-motion:reduce) {
	.drumix-nav-item,
	.drumix-song-back { transition: none !important; }
}