/* Drumix user dialogs — compact concert-stage visual language.
   This layer is presentation-only: existing dialog behavior and audio flows stay intact. */
:root {
	--pb-stage-dialog-card: #fbfaf7;
	--pb-stage-dialog-text: #171b22;
	--pb-stage-dialog-muted: #666a72;
	--pb-stage-dialog-panel: #f1f0ec;
	--pb-stage-dialog-field: #ffffff;
	--pb-stage-dialog-line: rgba(69, 72, 79, .16);
	--pb-stage-dialog-blue: #0a66c2;
	--pb-stage-dialog-action: #f25a24;
	--pb-stage-dialog-action-hover: #da4513;
	--pb-stage-dialog-amber: #d59338;
	--pb-stage-dialog-green: #247951;
	--pb-stage-dialog-shadow: 0 36px 110px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 204, 122, .06);
	--pb-stage-dialog-overlay:
		radial-gradient(circle at 18% -8%, rgba(225, 158, 65, .31), transparent 34%),
		radial-gradient(circle at 82% -5%, rgba(52, 125, 222, .28), transparent 35%),
		rgba(7, 9, 14, .87);
}

html.pb-public-dark,
body.pb-student-dark {
	--pb-stage-dialog-card: #1b1e24;
	--pb-stage-dialog-text: #f7f5ef;
	--pb-stage-dialog-muted: #b8bac1;
	--pb-stage-dialog-panel: #24282f;
	--pb-stage-dialog-field: #292d34;
	--pb-stage-dialog-line: rgba(255, 255, 255, .13);
	--pb-stage-dialog-blue: #68adf2;
	--pb-stage-dialog-action: #ff7a32;
	--pb-stage-dialog-action-hover: #ff995f;
	--pb-stage-dialog-amber: #edb55f;
	--pb-stage-dialog-green: #78d6a7;
}

/* The same quiet stage behind every user-facing modal. */
:is(
	.cat-auth-overlay,
	.cat-songreq-overlay,
	.cat-suggest-overlay,
	.auth,
	#pbFragmentPracticeHint,
	.pbStudentAuthOverlay,
	.pbAssistancePanel,
	.pbRhSummary
) {
	background: var(--pb-stage-dialog-overlay) !important;
	-webkit-backdrop-filter: blur(18px) saturate(.9) !important;
	backdrop-filter: blur(18px) saturate(.9) !important;
}

.drumix-guest-gate-backdrop,
.pbPcChooserBackdrop {
	background: var(--pb-stage-dialog-overlay) !important;
	-webkit-backdrop-filter: blur(18px) saturate(.9) !important;
	backdrop-filter: blur(18px) saturate(.9) !important;
}

.drumix-premium-gate {
	background: var(--pb-stage-dialog-overlay) !important;
	-webkit-backdrop-filter: blur(18px) saturate(.9) !important;
	backdrop-filter: blur(18px) saturate(.9) !important;
}

/* Compact cards borrow the spotlights and warm/cool balance from concert mode. */
:is(
	.drumix-guest-gate-card,
	.drumix-premium-gate-card,
	.cat-auth-box,
	.cat-songreq-box,
	.cat-suggest-box,
	.auth-box,
	.pbStudentAuthBox,
	.pbAssistanceSheet,
	.pbPcChooserPanel,
	.pbRhDrawer,
	.pbRhSettings
) {
	position: relative;
	isolation: isolate;
	border: 1px solid var(--pb-stage-dialog-line) !important;
	border-radius: 28px !important;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .62), transparent 35%),
		var(--pb-stage-dialog-card) !important;
	color: var(--pb-stage-dialog-text) !important;
	box-shadow: var(--pb-stage-dialog-shadow) !important;
}

html.pb-public-dark :is(
	.drumix-guest-gate-card,
	.drumix-premium-gate-card,
	.cat-auth-box,
	.cat-songreq-box,
	.cat-suggest-box,
	.auth-box
),
body.pb-student-dark :is(
	.drumix-guest-gate-card,
	.drumix-premium-gate-card,
	.pbStudentAuthBox,
	.pbAssistanceSheet,
	.pbPcChooserPanel,
	.pbRhDrawer,
	.pbRhSettings
) {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 35%),
		var(--pb-stage-dialog-card) !important;
}

:is(
	.drumix-guest-gate-card,
	.drumix-premium-gate-card,
	.cat-auth-box,
	.cat-songreq-box,
	.cat-suggest-box,
	.auth-box,
	.pbStudentAuthBox,
	.pbAssistanceSheet,
	.pbPcChooserPanel,
	.pbRhDrawer,
	.pbRhSettings
)::before,
:is(
	.drumix-guest-gate-card,
	.drumix-premium-gate-card,
	.cat-auth-box,
	.cat-songreq-box,
	.cat-suggest-box,
	.auth-box,
	.pbStudentAuthBox,
	.pbAssistanceSheet,
	.pbPcChooserPanel,
	.pbRhDrawer,
	.pbRhSettings
)::after {
	position: absolute;
	z-index: 0;
	top: -64px;
	width: 84px;
	height: 230px;
	content: "";
	opacity: .14;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(232, 168, 76, .88), transparent);
	clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
	transform: rotate(-13deg);
	transform-origin: top center;
}

:is(
	.drumix-guest-gate-card,
	.drumix-premium-gate-card,
	.cat-auth-box,
	.cat-songreq-box,
	.cat-suggest-box,
	.auth-box,
	.pbStudentAuthBox,
	.pbAssistanceSheet,
	.pbPcChooserPanel,
	.pbRhDrawer,
	.pbRhSettings
)::before {
	left: 12px;
}

:is(
	.drumix-guest-gate-card,
	.drumix-premium-gate-card,
	.cat-auth-box,
	.cat-songreq-box,
	.cat-suggest-box,
	.auth-box,
	.pbStudentAuthBox,
	.pbAssistanceSheet,
	.pbPcChooserPanel,
	.pbRhDrawer,
	.pbRhSettings
)::after {
	right: 12px;
	background: linear-gradient(to bottom, rgba(75, 145, 235, .84), transparent);
	transform: rotate(13deg);
}

:is(
	.drumix-guest-gate-card,
	.drumix-premium-gate-card,
	.cat-auth-box,
	.cat-songreq-box,
	.cat-suggest-box,
	.auth-box,
	.pbStudentAuthBox,
	.pbAssistanceSheet,
	.pbPcChooserPanel,
	.pbRhDrawer,
	.pbRhSettings
) > * {
	position: relative;
	z-index: 1;
}

/* Titles and calm explanatory copy. */
:is(
	.drumix-guest-gate-card,
	.drumix-premium-gate-card,
	.cat-auth-box,
	.cat-songreq-box,
	.cat-suggest-box,
	.auth-box,
	.pbStudentAuthBox,
	.pbAssistanceSheet,
	.pbPcChooserPanel,
	.pbRhDrawer,
	.pbRhSettings
) :is(h1, h2, h3, b) {
	color: var(--pb-stage-dialog-text);
}

:is(
	.drumix-guest-gate-card,
	.drumix-premium-gate-card,
	.cat-auth-box,
	.cat-songreq-box,
	.cat-suggest-box,
	.auth-box,
	.pbStudentAuthBox,
	.pbAssistanceSheet,
	.pbPcChooserPanel,
	.pbRhDrawer,
	.pbRhSettings
) :is(p, small) {
	color: var(--pb-stage-dialog-muted);
}

:is(
	.drumix-guest-gate-kicker,
	.drumix-premium-gate-kicker,
	.pbAssistanceSheet > header small,
	.pbPcChooserPanel > header span,
	.pbRhDrawerHead small
) {
	color: var(--pb-stage-dialog-amber) !important;
	font-weight: 850;
	letter-spacing: .09em;
	text-transform: uppercase;
}

:is(
	.cat-auth-head,
	.cat-songreq-head,
	.cat-suggest-head,
	.auth-head,
	.pbStudentAuthHead
) {
	position: relative;
	z-index: 1;
	min-height: 44px;
	margin-bottom: 14px;
}

:is(
	.cat-auth-head,
	.cat-songreq-head,
	.cat-suggest-head,
	.auth-head,
	.pbStudentAuthHead
) > b {
	font-size: 23px !important;
	line-height: 1.15;
	letter-spacing: -.02em;
}

/* Close controls stay easy to find without competing with the main action. */
:is(
	.drumix-guest-gate-close,
	.drumix-premium-gate-close,
	.cat-auth-close,
	.cat-songreq-close,
	.cat-suggest-close,
	.auth-close,
	.pbStudentAuthClose,
	.pbFragmentPracticeHintClose,
	.pbAssistanceSheet > header > button,
	.pbPcChooserClose,
	.pbRhDrawerHead button,
	.pbRhSettingsHead button
) {
	width: 44px !important;
	height: 44px !important;
	min-width: 44px;
	min-height: 44px;
	border: 1px solid var(--pb-stage-dialog-line) !important;
	border-radius: 50% !important;
	background: color-mix(in srgb, var(--pb-stage-dialog-panel) 88%, transparent) !important;
	color: var(--pb-stage-dialog-text) !important;
}

/* Forms use a bright, high-contrast working surface inside the festive shell. */
:is(
	.drumix-premium-gate-card,
	.cat-auth-box,
	.cat-songreq-box,
	.cat-suggest-box,
	.auth-box,
	.pbStudentAuthBox
) :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
	min-height: 48px;
	border: 1px solid var(--pb-stage-dialog-line) !important;
	border-radius: 12px !important;
	background: var(--pb-stage-dialog-field) !important;
	color: var(--pb-stage-dialog-text) !important;
}

:is(
	.cat-auth-box,
	.cat-songreq-box,
	.cat-suggest-box,
	.auth-box,
	.pbStudentAuthBox
) label {
	color: var(--pb-stage-dialog-muted) !important;
}

:is(
	.cat-auth-tabs,
	.auth-tabs,
	.pbStudentAuthTabs,
	.drumix-premium-gate-song,
	.pbAssistanceCustom,
	.pbAssistanceOption,
	.pbPcChooserPanel > header,
	.pbRhShortcutHelp
) {
	border-color: var(--pb-stage-dialog-line) !important;
	background: var(--pb-stage-dialog-panel) !important;
	color: var(--pb-stage-dialog-text) !important;
}

:is(.cat-auth-tabs, .auth-tabs, .pbStudentAuthTabs) button {
	min-height: 42px;
	border-radius: 10px !important;
	color: var(--pb-stage-dialog-muted) !important;
}

:is(.cat-auth-tabs, .auth-tabs, .pbStudentAuthTabs) button:is(.on, .pb-on, [aria-selected="true"]) {
	background: var(--pb-stage-dialog-field) !important;
	color: var(--pb-stage-dialog-text) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .11) !important;
}

/* One unmistakable primary action; secondary actions stay quieter. */
:is(
	.drumix-guest-gate-primary,
	.drumix-premium-primary,
	.cat-auth-submit,
	.cat-songreq-submit,
	.cat-suggest-submit,
	.auth-submit,
	.pbStudentAuthSubmit,
	.pbFragmentPracticeHintStart,
	.pbAssistanceApply,
	.pbPcWholeStart,
	.pbRhPickRange:not(.pbRhPickWhole),
	.pbRhSaveDifficult
) {
	min-height: 48px !important;
	border-color: var(--pb-stage-dialog-action) !important;
	border-radius: 13px !important;
	background: var(--pb-stage-dialog-action) !important;
	color: #fff !important;
	box-shadow: 0 12px 25px rgba(242, 90, 36, .24) !important;
}

:is(
	.drumix-guest-gate-primary,
	.drumix-premium-primary,
	.cat-auth-submit,
	.cat-songreq-submit,
	.cat-suggest-submit,
	.auth-submit,
	.pbStudentAuthSubmit,
	.pbFragmentPracticeHintStart,
	.pbAssistanceApply,
	.pbPcWholeStart,
	.pbRhPickRange:not(.pbRhPickWhole),
	.pbRhSaveDifficult
):hover {
	border-color: var(--pb-stage-dialog-action-hover) !important;
	background: var(--pb-stage-dialog-action-hover) !important;
}

:is(
	.drumix-guest-gate-secondary,
	.drumix-premium-secondary,
	.drumix-guest-gate-later
) {
	border-color: var(--pb-stage-dialog-line) !important;
	background: color-mix(in srgb, var(--pb-stage-dialog-panel) 78%, transparent) !important;
	color: var(--pb-stage-dialog-text) !important;
}

:is(.cat-auth-forgot, .auth-forgot, .pbStudentAuthForgot) {
	width: 100%;
	min-height: 44px;
	margin-top: 8px;
	border: 0 !important;
	background: transparent !important;
	color: var(--pb-stage-dialog-muted) !important;
}

.drumix-guest-gate-card li::before {
	color: var(--pb-stage-dialog-green) !important;
}

/* Registration email result must be impossible to miss. The API message starts
   with the Spam-folder reminder; all five registration surfaces share this box. */
:is(
	.msg.ok,
	.today-form-message.success,
	.cat-auth-msg[style*="--drumix-color-success"],
	.auth-msg[style*="--drumix-color-success"],
	.pbStudentAuthMsg[style*="#1e8e4e"]
) {
	min-height: 0 !important;
	margin-top: 14px !important;
	padding: 14px 16px !important;
	border: 2px solid rgba(30, 142, 78, .52) !important;
	border-radius: 13px !important;
	background: rgba(30, 142, 78, .11) !important;
	color: var(--pb-stage-dialog-text) !important;
	box-shadow: 0 10px 24px rgba(30, 142, 78, .13) !important;
	font-size: 16px !important;
	font-weight: 750 !important;
	line-height: 1.45 !important;
	text-align: left !important;
}

/* Page-level user windows: the same stage language without turning the page
   itself into a modal. Their existing width, padding and layout stay untouched. */
:is(
	#profileRoot.card,
	.today-auth,
	.rep-auth,
	.onboarding-copy,
	.premium-plan
) {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-color: var(--pb-stage-dialog-line) !important;
	background:
		radial-gradient(circle at 7% -12%, rgba(242, 90, 36, .18), transparent 31%),
		radial-gradient(circle at 93% -10%, rgba(50, 126, 222, .16), transparent 32%),
		linear-gradient(180deg, rgba(255, 255, 255, .62), transparent 35%),
		var(--pb-stage-dialog-card) !important;
	color: var(--pb-stage-dialog-text) !important;
	box-shadow: var(--pb-stage-dialog-shadow) !important;
}

html.pb-public-dark :is(
	#profileRoot.card,
	.today-auth,
	.rep-auth,
	.onboarding-copy,
	.premium-plan
) {
	background:
		radial-gradient(circle at 7% -12%, rgba(255, 122, 50, .2), transparent 31%),
		radial-gradient(circle at 93% -10%, rgba(75, 145, 235, .18), transparent 32%),
		linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 35%),
		var(--pb-stage-dialog-card) !important;
}

:is(
	#profileRoot.card,
	.today-auth,
	.rep-auth,
	.onboarding-copy,
	.premium-plan
)::before,
:is(
	#profileRoot.card,
	.today-auth,
	.rep-auth,
	.onboarding-copy,
	.premium-plan
)::after {
	position: absolute;
	z-index: 0;
	top: -72px;
	width: 92px;
	height: 250px;
	content: "";
	opacity: .15;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(232, 168, 76, .92), transparent);
	clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
	transform: rotate(-13deg);
	transform-origin: top center;
}

:is(
	#profileRoot.card,
	.today-auth,
	.rep-auth,
	.onboarding-copy,
	.premium-plan
)::before {
	left: 14px;
}

:is(
	#profileRoot.card,
	.today-auth,
	.rep-auth,
	.onboarding-copy,
	.premium-plan
)::after {
	right: 14px;
	background: linear-gradient(to bottom, rgba(75, 145, 235, .88), transparent);
	transform: rotate(13deg);
}

:is(
	#profileRoot.card,
	.today-auth,
	.rep-auth,
	.onboarding-copy,
	.premium-plan
) > * {
	position: relative;
	z-index: 1;
}

:is(
	#profileRoot.card,
	.today-auth,
	.rep-auth,
	.onboarding-copy,
	.premium-plan
) :is(h1, h2, h3, b, strong) {
	color: var(--pb-stage-dialog-text);
}

:is(
	#profileRoot.card,
	.today-auth,
	.rep-auth,
	.onboarding-copy,
	.premium-plan
) :is(p, small, label, .field span) {
	color: var(--pb-stage-dialog-muted);
}

:is(
	#profileRoot.card,
	.today-auth,
	.rep-auth,
	.onboarding-copy,
	.premium-plan
) :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
	border-color: var(--pb-stage-dialog-line) !important;
	background: var(--pb-stage-dialog-field) !important;
	color: var(--pb-stage-dialog-text) !important;
}

:is(#profileRoot.card .auth-tabs, .today-auth-tabs) {
	border-color: var(--pb-stage-dialog-line) !important;
	background: var(--pb-stage-dialog-panel) !important;
}

:is(#profileRoot.card .auth-tabs, .today-auth-tabs) button[aria-selected="true"],
#profileRoot.card .auth-tabs button.on {
	background: var(--pb-stage-dialog-field) !important;
	color: var(--pb-stage-dialog-text) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .11) !important;
}

:is(
	#profileRoot.card .primary,
	.today-auth-submit,
	.rep-primary,
	.onboarding-next,
	.premium-plan .drumix-premium-primary
) {
	min-height: 48px !important;
	border-color: var(--pb-stage-dialog-action) !important;
	border-radius: 13px !important;
	background: var(--pb-stage-dialog-action) !important;
	color: #fff !important;
	box-shadow: 0 12px 25px rgba(242, 90, 36, .24) !important;
}

:is(
	#profileRoot.card .primary,
	.today-auth-submit,
	.rep-primary,
	.onboarding-next,
	.premium-plan .drumix-premium-primary
):hover {
	border-color: var(--pb-stage-dialog-action-hover) !important;
	background: var(--pb-stage-dialog-action-hover) !important;
}

:is(
	#profileRoot.card .forgot,
	.today-auth-forgot,
	.rep-auth .rep-secondary,
	.onboarding-skip
) {
	color: var(--pb-stage-dialog-muted) !important;
}

:is(
	#profileRoot.card,
	.today-auth,
	.rep-auth,
	.onboarding-copy,
	.premium-plan
) :is(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid color-mix(in srgb, var(--pb-stage-dialog-blue) 58%, transparent) !important;
	outline-offset: 3px;
}

/* The fragment tutorial already has its own musical illustration. */
#pbFragmentPracticeHint .pbFragmentPracticeHintCard {
	position: relative;
	isolation: isolate;
	border-color: var(--pb-stage-dialog-line) !important;
	border-radius: 28px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .62), transparent 35%),
		var(--pb-stage-dialog-card) !important;
	color: var(--pb-stage-dialog-text) !important;
	box-shadow: var(--pb-stage-dialog-shadow) !important;
}

body.pb-student-dark #pbFragmentPracticeHint .pbFragmentPracticeHintCard {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 35%),
		var(--pb-stage-dialog-card) !important;
}

#pbFragmentPracticeHint .pbFragmentPracticeHintIcon {
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	background:
		radial-gradient(circle at 34% 25%, rgba(255, 255, 255, .24), transparent 25%),
		linear-gradient(145deg, #2979d3, #684ca6 62%, #a8506a);
	box-shadow: 0 13px 30px rgba(30, 68, 132, .25), 0 0 0 7px rgba(10, 102, 194, .07);
	color: #fff;
}

#pbFragmentPracticeHint :is(h2, li) {
	color: var(--pb-stage-dialog-text);
}

#pbFragmentPracticeHint p {
	color: var(--pb-stage-dialog-muted) !important;
}

#pbFragmentPracticeHint .pbFragmentPracticeVisual {
	border-color: var(--pb-stage-dialog-line) !important;
	background: var(--pb-stage-dialog-panel) !important;
}

/* Assistance and rehearsal choices remain visually distinct and readable. */
.pbAssistanceOption {
	border-color: var(--pb-stage-dialog-line) !important;
	background: var(--pb-stage-dialog-field) !important;
	color: var(--pb-stage-dialog-text) !important;
}

.pbAssistanceOption[aria-pressed="true"] {
	border-color: color-mix(in srgb, var(--pb-stage-dialog-blue) 52%, transparent) !important;
	background: color-mix(in srgb, var(--pb-stage-dialog-blue) 12%, var(--pb-stage-dialog-field)) !important;
}

.pbPcChooserPanel {
	overflow: hidden;
}

.pbRhDrawer,
.pbRhSettings {
	overflow-x: hidden;
}

:is(
	.drumix-guest-gate-card,
	.drumix-premium-gate-card,
	.cat-auth-box,
	.cat-songreq-box,
	.cat-suggest-box,
	.auth-box,
	.pbStudentAuthBox,
	.pbAssistanceSheet,
	.pbPcChooserPanel,
	.pbRhDrawer,
	.pbRhSettings,
	#pbFragmentPracticeHint .pbFragmentPracticeHintCard
) :is(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid color-mix(in srgb, var(--pb-stage-dialog-blue) 58%, transparent) !important;
	outline-offset: 3px;
}

@media (max-width: 760px) {
	:is(
		.drumix-guest-gate-card,
		.pbAssistanceSheet,
		.pbPcChooserPanel,
		.pbRhDrawer,
		.pbRhSettings
	) {
		border-radius: 24px 24px 0 0 !important;
	}

	:is(
		.drumix-premium-gate-card,
		.cat-auth-box,
		.cat-songreq-box,
		.cat-suggest-box,
		.auth-box,
		.pbStudentAuthBox,
		#profileRoot.card,
		.today-auth,
		.rep-auth,
		.onboarding-copy,
		.premium-plan
	) {
		border-radius: 24px !important;
	}

	#pbFragmentPracticeHint .pbFragmentPracticeHintCard {
		border-radius: 24px 24px 14px 14px !important;
	}

	:is(
		.cat-auth-head,
		.cat-songreq-head,
		.cat-suggest-head,
		.auth-head,
		.pbStudentAuthHead
	) > b {
		font-size: 21px !important;
	}
}

@media (max-height: 520px) and (orientation: landscape) {
	:is(
		.drumix-guest-gate-card,
		.drumix-premium-gate-card,
		.cat-auth-box,
		.cat-songreq-box,
		.cat-suggest-box,
		.auth-box,
		.pbStudentAuthBox,
		.pbAssistanceSheet
	) {
		max-height: calc(100dvh - 16px) !important;
		border-radius: 20px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(
		.drumix-guest-gate,
		.drumix-premium-gate,
		.cat-auth-overlay,
		.cat-songreq-overlay,
		.cat-suggest-overlay,
		.auth,
		#pbFragmentPracticeHint,
		.pbStudentAuthOverlay,
		.pbAssistancePanel,
		.pbPracticeCenterChooser,
		.pbRhSummary
	),
	:is(
		.drumix-guest-gate,
		.drumix-premium-gate,
		.cat-auth-overlay,
		.cat-songreq-overlay,
		.cat-suggest-overlay,
		.auth,
		#pbFragmentPracticeHint,
		.pbStudentAuthOverlay,
		.pbAssistancePanel,
		.pbPracticeCenterChooser,
		.pbRhSummary
	) * {
		animation: none !important;
		transition: none !important;
	}
}