/* Hide header on login page to prevent flicker */
html.login-page .spa-header {
    display: flex; /* Keep header visible but hide menu button */
}

/* Hide just the menu button on login page */
html.login-page #menu-toggle {
    display: none;
}

/* Hide menu overlay and drawer completely on login page */
html.login-page #menu-overlay,
html.login-page #menu-drawer {
    display: none !important;
}

/* Additional fallback: hide menu button when no hash or on login hash for non-authenticated users */
html:not([class*="-page"]) #menu-toggle,
html.-page #menu-toggle {
    display: none;
}

/* Force unified dark blue background for all main containers */
html, body, #app, .app-container {
    background-color: #0B1426 !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
    overflow: hidden;
}
/* App-wide font variables populated by theme-loader (theme.json). */
:root {
    --app-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --app-base-font-size: 16px;
    /* Session timer color used by player UI; can be overridden by themes */
    --session-timer-color: #D4AF37;
    /* SPA layout variables populated by layout-controller.js (with sensible defaults) */
    --spa-viewport-height: 100dvh; /* Use dynamic viewport height for mobile */
    --spa-header-height: 60px;
    --spa-subheader-height: 0px;
    --spa-footer-height: 70px;
    --spa-content-max-height: calc(100dvh - 140px); /* Header + footer + margins */
}
.spa-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* top align by default for long pages like Sounds */
    width: 100%;
    height: 100%;
    padding: 0;
    /* Reserve space at bottom for the fixed footer so content isn't hidden behind it */
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    box-sizing: border-box;
}

/* Ensure app container creates a positioned stacking context for in-container overlays */
#app-container {
    position: relative;
    z-index: 50; /* base level inside spa container */
}

/* Route-specific centering for login/welcome screens */
.spa-content.centered-page {
    justify-content: center;
}

/* SaaDhaGaa SPA header for logo/title */
/* Center the player perfectly in the viewport */
/* Center the player perfectly in the viewport and use full width/height */
.spa-canvas-wrapper {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: var(--spa-viewport-height);
	max-height: var(--spa-viewport-height);
	display: flex;
	align-items: flex-start; /* top-align to keep header fully visible */
    justify-content: center;
    background: inherit;
    /* Use safe-area insets for consistent spacing near browser UI/notch */
    padding-top: calc(12px + env(safe-area-inset-top)); /* was 8px */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    box-sizing: border-box;
}


.menu-drawer {
        position: absolute;
        top: 64px;
        right: 16px;
        left: auto;
        margin: 0;
        width: min(360px, calc(100% - 32px));
        max-width: 100%;
        max-height: calc(100% - 80px);
        background: #152034;
        border-radius: 16px 0 0 16px;
        box-shadow: 0 8px 32px 0 rgba(11,20,38,0.6);
        color: #FFFFFF;
        z-index: 1500;
        overflow-y: auto;
        transition: transform 0.32s cubic-bezier(.7,.2,.2,1), box-shadow 0.2s;
        transform: translateX(100%);
        will-change: transform;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
}
.menu-drawer.open {
        transform: translateX(0);
        box-shadow: 0 8px 32px 0 rgba(11,20,38,0.8);
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 1500;
        display: flex !important;
}

/* Header container */
.spa-header {
	position: relative;
	width: 100%;
	margin: 0;
	/* Extra bottom padding so bottom border sits comfortably below hamburger */
	padding: 0.9rem 1.5rem 2.75rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* No background - completely transparent */
	background: none;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	/* Decorative divider handled via ::after pseudo-element */
	border: 0;
	z-index: 1200;
}

/* Artistic header separator: soft gradient line instead of a hard border */
.spa-header::after {
	content: '';
	position: absolute;
	left: 4%;
	right: 4%;
	bottom: 0;
	height: 1px;
	background: linear-gradient(to right,
		rgba(15,23,42,0),
		rgba(148,163,184,0.7),
		rgba(15,23,42,0)
	);
	opacity: 0.85;
	pointer-events: none;
}

/* Global functional sub-header (per-page title under SaaDhaGaa logo) */
.spa-subheader {
	width: 100%;
	margin: 0.2rem auto 1rem;
	padding: 0.2rem 1.5rem 0.45rem;
	font-family: 'Poppins', var(--app-font-family);
	font-size: 0.78rem;
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: #e5e7eb;
	opacity: 0.96;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-shadow: 0 1px 3px rgba(0,0,0,0.75);
	pointer-events: none;
	position: relative;
	background-image: linear-gradient(to right,
		rgba(15,23,42,0),
		rgba(148,163,184,0.85),
		rgba(15,23,42,0)
	);
	background-repeat: no-repeat;
	background-position: center 100%;
	background-size: 88% 1px;
}

.spa-subheader::before,
.spa-subheader::after {
	content: '';
	flex: 0 0 40px;
	height: 1px;
	border-radius: 999px;
	background: linear-gradient(to right,
		rgba(15,23,42,0),
		rgba(148,163,184,0.85),
		rgba(234,179,8,0.95)
	);
	opacity: 0.9;
}

.spa-subheader::after {
	background: linear-gradient(to left,
		rgba(15,23,42,0),
		rgba(148,163,184,0.85),
		rgba(234,179,8,0.95)
	);
}

.spa-subheader--hidden {
	display: none;
}

/* Title positioning */
.spa-header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

/* Title styling */
.spa-header-title {
    font-family: 'Poppins', var(--app-font-family);
    font-size: 1.8rem;
    font-weight: 700;
    background: linear-gradient(135deg, #E5B80B, #FFD700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    line-height: 1.2;
    user-select: none;
    pointer-events: none;
    display: inline-block;
    position: relative;
    padding: 0.5rem 0;
    margin: 0;
    transition: all 0.3s ease;
}

/* Menu icon button */
.menu-icon-btn {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none !important;
    border: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    padding: 10px;
    margin: 0;
    margin-left: auto;
    outline: none;
    z-index: 1001;
}

.menu-icon-btn:hover {
    background: rgba(0, 0, 0, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.25);
}

.menu-icon-btn:active {
    transform: translateY(0);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.menu-icon-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(229, 184, 11, 0.4);
}

.menu-icon-btn .line {
    width: 24px;
    height: 2px;
    background: #FFD700;
    margin: 3px 0;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
    display: block;
    position: relative;
}

.menu-icon-btn .line:nth-child(1) {
    width: 24px;
}

.menu-icon-btn .line:nth-child(2) {
    width: 20px;
    margin-left: auto;
}

.menu-icon-btn .line:nth-child(3) {
    width: 16px;
    margin-left: auto;
}

/* Hover effects */
.menu-icon-btn:hover .line {
    background: #FFE484;
}

.menu-icon-btn:hover .line:nth-child(1) {
    width: 24px;
}

.menu-icon-btn:hover .line:nth-child(2) {
    width: 20px;
}

.menu-icon-btn:hover .line:nth-child(3) {
    width: 16px;
}

.menu-icon-btn.open .line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
    width: 22px;
}

.menu-icon-btn.open .line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.menu-icon-btn.open .line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
    width: 22px;
}

/* Functionality Page Styles */
body {
    margin: 0;
    min-height: 100vh;
    background: #0B1426;
    background: #0B1426;
    color: #e6eef9;
}

/* Global footer / status bar container
   This wraps the session timer status bar and acts as the SPA footer.
   FIXED positioning ensures it's always visible at the bottom of the
   viewport, regardless of content height or scroll position. */
footer#status-bar-root {
	position: fixed;
	bottom: 0;
	/* Center the footer like .spa-container instead of spanning full viewport */
	left: 50%;
	transform: translateX(-50%);
	/* Match .spa-container width exactly */
	width: 100vw;
	max-width: 100vw;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 1rem;
	border-top: 0;
	box-sizing: border-box;
	z-index: 1200;
    /* Match the page background on any screen; keep opaque to block scrolling content */
    background: inherit;
    background-color: inherit;
    background-image: inherit;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	/* Remove any inherited borders or shadows */
	border: none;
	box-shadow: none;
	/* Rely on ::before gradient separator instead of a hard border */
}

/* Trial Ended Overlay - Visually disables pages when trial expires */
.trial-ended-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(18, 23, 30, 0.95);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: fadeIn 0.3s ease-in-out;
}

.trial-ended-overlay-content {
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
	border: 2px solid #ef4444;
	border-radius: 16px;
	padding: 3rem 2rem;
	max-width: 500px;
	text-align: center;
	box-shadow: 0 8px 32px rgba(239, 68, 68, 0.4);
	position: relative;
}

.trial-ended-close-btn {
	position: absolute;
	top: 12px;
	right: 16px;
	background: none;
	border: none;
	color: #94a3b8;
	font-size: 24px;
	cursor: pointer;
	padding: 4px;
	line-height: 1;
	transition: color 0.2s ease;
}

.trial-ended-close-btn:hover {
	color: #fff;
}

.trial-ended-overlay-content h2 {
	color: #ef4444;
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 1rem;
}

.trial-ended-overlay-content p {
	color: #e5e7eb;
	font-size: 1.1rem;
	line-height: 1.6;
	margin-bottom: 2rem;
}

.trial-ended-upgrade-btn {
	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
	color: #fff;
	border: none;
	padding: 1rem 2.5rem;
	border-radius: 12px;
	font-size: 1.1rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.trial-ended-upgrade-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
}

.trial-ended-upgrade-btn:active {
	transform: translateY(0);
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Responsive sizing for footer to match .spa-container on larger devices */
@media (min-width: 768px) {
	footer#status-bar-root {
		width: min(420px, 100vw);
		max-width: 420px;
	}
}

/* Artistic footer separator: soft gradient line above the status bar */
footer#status-bar-root::before {
	content: '';
	position: absolute;
	left: 4%;
	right: 4%;
	top: 0;
	height: 1px;
	background: linear-gradient(to right,
		rgba(15,23,42,0),
		rgba(148,163,184,0.7),
		rgba(15,23,42,0)
	);
	opacity: 0.85;
	pointer-events: none;
}

.functionality-page {
    min-height: 100vh;
    background: transparent;
    color: #e6eef9;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

/* Functionality Page Header */
.functionality-header {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 90;
    box-sizing: border-box;
}

.functionality-title {
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #F9E27B;
    margin: 0 auto;
    padding: 0.35rem 0;
    position: relative;
    display: block;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.45px;
    text-shadow: 0 4px 16px rgba(255, 196, 0, 0.45), 0 0 6px rgba(255, 247, 209, 0.35);
}

#app-container h1.functionality-title {
    display: block;
}

.functionality-subtitle {
    font-size: 1.1rem;
    color: #A8B3C0;
    margin: 0.75rem auto 0;
    font-weight: 400;
    opacity: 0.9;
    max-width: 600px;
    line-height: 1.6;
    padding: 0 1rem;
}

/* Content container for functionality pages */
.functionality-content {
    width: calc(100% + 2rem);
    margin-left: -1rem;
    margin-right: -1rem;
    max-width: none;
    padding: 1rem 0 2rem;
    /* Extra bottom padding to ensure content isn't hidden behind fixed footer */
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    position: relative;
    z-index: 80;
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Use layout-controller computed height as a scroll container between
       the global header/subheader and the footer/status bar.
       Fallback to calc-based height if CSS variable not yet set. */
    max-height: var(--spa-content-max-height, calc(100vh - 140px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    /* Hide scrollbar visually but keep scroll behavior */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.functionality-content::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge */
}

.functionality-inner {
    width: 100%;
    max-width: var(--card-max-width, 420px);
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    box-sizing: border-box;
}

/* Ensure all functionality pages use the same background and layout */
.my-sruthi-page,
.my-saadhagaa-page,
.my-profile-page,
.subscription-page,
.payment-page {
    min-height: 100vh;
    background: transparent;
    color: #e6eef9;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

/* Mobile: larger touch target and higher contrast for the filled icon */
@media (max-width: 768px) {
    .spa-header {
        /* Extra height on mobile so the border sits well below the hamburger */
        padding: 0.8rem 1rem 2.65rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
        			/* No background on mobile */
			background: none;
    }
    
    .spa-header-title {
        font-size: 1.5rem;
    }
    
    .menu-icon-btn {
        width: 44px;
        height: 44px;
    }
    
    .functionality-header {
        padding: 1rem 1rem 0.5rem;
    }
    
    .functionality-title {
        font-size: 1.3rem;
    }
    
    .functionality-content {
        padding: 0.5rem 1rem 1.5rem;
    }
}

/* Session timer styles (moved from timer module) */
.session-panel { position: absolute; left: 18px; bottom: 18px; width: min(360px, calc(100% - 36px)); height: auto; border-radius: 12px; color: #fff; overflow: visible; z-index: 9999; transition: box-shadow 260ms ease; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; padding:12px; gap:8px; will-change: box-shadow; }
.session-panel.collapsed { height:50px; padding:6px; }
.session-panel.expanded {
    /* expand to fill the SPA container while keeping side gutters */
    left: 18px;
    right: 18px;
    width: calc(100% - 36px);
    padding: 12px;
    margin: 0;
}
.session-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 8px;
    background: transparent;
    border: none;
    min-width: 44px; /* stable hit area so dot doesn't shift when content appears */
    width: 44px; /* fixed compact width to prevent layout reflow */
    position: relative; /* so absolute children (panel content) position against this */
}
.session-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: none;
    margin-right: 8px;
    transition: transform 160ms ease, box-shadow 220ms ease, background-color 220ms ease, opacity 200ms ease;
}
.session-dot.active {
    background: #E5B80B; /* SaaDhaGaa accent */
    box-shadow: 0 6px 18px rgba(229,184,11,0.18);
    transform: scale(1.05);
}

/* Sliding content that appears when the session dot is clicked */
.session-panel-content {
    /* position the panel above the dot to avoid colliding with bottom nav gestures
       and to prevent layout shifts when it opens. It's absolutely positioned
       relative to .session-toggle (which is positioned relative).
    */
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: max-height 260ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease, transform 220ms ease;
    width: min(320px, calc(100vw - 48px));
    box-sizing: border-box;
    padding: 0;
    z-index: 12000; /* above most in-container UI */
}
.session-panel.expanded .session-panel-content {
    max-height: 160px;
    opacity: 1;
    transform: translateY(0);
    padding: 10px 12px;
    background: rgba(7,11,17,0.95);
    border-radius: 8px;
}

/* Respect safe-area insets on mobile so the panel/dot avoid system gesture areas */
.session-panel {
    bottom: calc(18px + env(safe-area-inset-bottom));
    left: calc(18px + env(safe-area-inset-left));
}

/* Make the touch target slightly larger than visual dot for easier tapping */
.session-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: none;
    margin-right: 8px;
    transition: transform 160ms ease, box-shadow 220ms ease, background-color 220ms ease, opacity 200ms ease;
}
.session-dot::before {
    /* invisible larger hit area */
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: transparent;
}

/* Ensure save-status is visible when expanded */
.session-panel.expanded .session-toggle #sessionSaveStatus {
    display: inline-flex;
}
.session-toggle:focus { outline: 2px solid rgba(255,215,102,0.14); outline-offset: 2px; }
.session-toggle .chevron { width:18px; height:18px; display:block; color: var(--session-timer-color); transition: transform 220ms ease; }
.session-panel.expanded .session-toggle .chevron { transform: rotate(180deg); }
.timer-btn-time { font-weight:700; font-size:0.86rem; color:var(--session-timer-color); white-space:nowrap; margin-left:8px; padding:2px 6px; background: transparent; border-radius:6px; display:inline-block; line-height:1; }
.session-toggle .session-drawer {
    position: absolute;
    /* anchor drawer to the inside edges of the panel (respecting panel padding) */
    left: 12px;
    right: 12px;
    top: calc(100% + 8px);
    width: auto;
    box-sizing: border-box;
    padding: 8px 12px;
    background: rgba(7,11,17,0.9);
    border-radius: 8px;
    font-size: 0.95rem;
    color: #cbd5e1;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    z-index: 10000;
    transition: max-height 320ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease, transform 260ms cubic-bezier(.2,.9,.2,1);
    box-shadow: 0 6px 18px rgba(2,6,23,0.18);
}
.session-toggle .session-drawer.drawer-below { top: calc(100% + 8px); bottom: auto; transform: translateY(8px); }
.session-toggle .session-drawer.drawer-above { bottom: calc(100% + 8px); top: auto; transform: translateY(-8px); }
.session-panel.expanded .session-toggle .session-drawer { max-height: 240px; opacity:1; transform: translateY(0); overflow-y: auto; /* Allow scrolling if content exceeds max-height */ }
.session-drawer-row { margin:6px 0; display:flex; justify-content:space-between; gap:12px; }
.session-header { font-weight:700; color:#fff; margin-bottom:6px; }
.session-save-status { font-size:0.82rem; color:#9fb3d6; font-weight:600; margin-left:12px; min-width:86px; text-align:right; }

/* Save indicator (small dot) */
.save-indicator {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: rgba(255,255,255,0.06);
        box-shadow: none;
        vertical-align: middle;
        margin-left: 6px;
        transition: transform 220ms ease, background-color 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
}
.save-indicator.idle { background: rgba(255,255,255,0.14); opacity:1; border: 1px solid rgba(255,255,255,0.06); }
.save-indicator.unsaved { background: rgba(255,99,71,0.95); box-shadow: 0 0 6px rgba(255,99,71,0.28); }
.save-indicator.saving { background: rgba(255,215,102,0.95); box-shadow: 0 0 8px rgba(255,215,102,0.28); transform: scale(1.15); }
.save-indicator.saved { background: rgba(34,197,94,0.95); box-shadow: 0 0 18px rgba(34,197,94,0.28); transform: scale(1.35); animation: save-pulse 600ms ease-out; }
.save-indicator.failed { background: rgba(239,68,68,0.95); box-shadow: 0 0 10px rgba(239,68,68,0.28); transform: scale(1.15); }

@keyframes save-pulse {
    0% { transform: scale(0.4); opacity: 0.0; }
    40% { transform: scale(1.45); opacity: 1; }
    100% { transform: scale(1.0); opacity: 1; }
}

.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
@media (max-width: 420px) { .session-panel { width: calc(100% - 28px); } .timer-btn-time { font-size:0.72rem; } }

/* Collapsed panel: arrange timer and indicator inline and push indicator to the right */
.session-panel.collapsed .session-toggle {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.session-panel.collapsed .session-toggle #sessionSaveStatus {
    margin-left: auto; /* push to right */
    display: inline-flex;
    align-items: center;
}

/* When collapsed, hide the save-status dot so only the session-dot remains visible */
.session-panel.collapsed .session-toggle #sessionSaveStatus {
    display: none;
}
.session-panel.collapsed .session-toggle .session-drawer { left: auto; right: 12px; }

/* Mode Status Indicator */
.mode-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
    cursor: pointer;
}

.mode-indicator:hover {
    transform: scale(1.05);
}

.mode-indicator.local-mode {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.mode-indicator.online-mode {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

.mode-indicator.offline-mode {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.mode-icon {
    font-size: 0.875rem;
    line-height: 1;
}

.mode-text {
    font-size: 0.75rem;
    font-weight: 700;
}

/* Minimalistic hamburger menu button */
#menu-toggle {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    outline: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px; /* controlled spacing between lines */
    padding: 0;
    position: absolute;
    top: 16px;
    right: 32px;
    z-index: 101;
}
#menu-toggle .line {
    /* narrow centered bars for the hamburger */
    width: 18px;
    height: 2px;
    background-color: #E5B80B;
    border-radius: 2px;
    transform-origin: center;
    will-change: transform, opacity, box-shadow;
    transition: transform 360ms cubic-bezier(0.22, 1.2, 0.2, 1),
                opacity 200ms linear,
                box-shadow 220ms ease;
    box-shadow: none;
    display: block;
}
#menu-toggle:focus-visible { outline: 2px solid #00ffbf; outline-offset: 4px; }

/* When closed, distribute lines slightly for a nicer baseline */
#menu-toggle .line:nth-child(1) { transform: translateY(-5px); }
#menu-toggle .line:nth-child(2) { transform: translateY(0); }
#menu-toggle .line:nth-child(3) { transform: translateY(5px); }

/* Enhanced open state: rotate top/bottom to form an X, fade middle */
#menu-toggle.open .line:nth-child(1) {
    transform: translateY(0) rotate(45deg) scaleX(1);
    box-shadow: 0 6px 14px rgba(229,184,11,0.14);
}
#menu-toggle.open .line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.2);
}
#menu-toggle.open .line:nth-child(3) {
    transform: translateY(0) rotate(-45deg) scaleX(1);
    box-shadow: 0 6px 14px rgba(229,184,11,0.14);
}

/* subtle hover/focus micro-animation */
#menu-toggle:hover .line { transform: translateY(0) scaleX(1.02); }
#menu-toggle:active .line { transform: scaleX(0.98); }

/* Waveform bars */
#menu-toggle .bar {
    width: 3px;
    background-color: #E5B80B;
    border-radius: 1px;
    transition: all 0.2s ease-in-out;
    align-self: center;
    flex-shrink: 0;
}
#menu-toggle .bar:nth-child(1) { height: 6px; }
#menu-toggle .bar:nth-child(2) { height: 10px; }
#menu-toggle .bar:nth-child(3) { height: 14px; }
#menu-toggle .bar:nth-child(4) { height: 10px; }

/* Overlay behind the drawer: use fixed positioning so it doesn't affect layout */
.menu-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0); /* default transparent; toggled when active */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 1400; /* higher than in-container elements */
    pointer-events: none; /* don't intercept clicks when inactive */
    transition: background 180ms ease;
}

/* Active overlay variant used when menu is open (when inside container this dims app content) */
.menu-overlay.active {
    background: rgba(0,0,0,0.28);
    pointer-events: auto; /* intercept clicks when active */
}

/* Slide-out drawer (now inside spa-container) */
.menu-drawer {
	/* Drawer stays anchored within the spa-container */
	top: 80px; /* Position below the header (adjust if header size changes) */
	right: 16px;
	left: auto;
	width: min(340px, calc(100% - 32px));
	max-width: 100%;
	height: auto; /* Auto height based on content */
	max-height: calc(100% - 96px); /* prevent overflow beyond container */
	background: rgba(15, 23, 42, 0.98);
	border-radius: 18px;
	border: 1px solid rgba(148, 163, 184, 0.22);
	box-shadow: 0 18px 45px rgba(2, 6, 23, 0.75);
	z-index: 1410; /* above overlay */
	/* Use transform for composited animation (no layout reflow) */
	transform: translateX(110%); /* hidden off-canvas to right */
	transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease-out;
	transform-origin: right center;
	will-change: transform, opacity;
	display: flex;
	flex-direction: column;
	padding: 16px 18px 18px;
	overflow-y: auto;
}
.menu-drawer.open {
	transform: translateX(0); /* slide into place */
	box-shadow: 0 22px 55px rgba(15, 23, 42, 0.9);
}

/* Close button (top-right inside drawer) */
.menu-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}
.menu-close-btn:hover {
    background: #E5B80B;
    color: #1f2937;
}
.menu-close-btn:focus-visible { outline: 2px solid #E5B80B; outline-offset: 2px; }
.menu-close-btn svg { width: 20px; height: 20px; }

/* Drawer content */
.menu-content {
	margin-top: 52px; /* space below close button */
}
.menu-content ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px; /* tighter for minimalist stack */
}
.menu-content .menu-sep {
	padding: 4px 0;
	display: flex;
	align-items: center;
}
.menu-content .menu-sep .sep-line {
	display: block;
	height: 1px;
	background: rgba(148, 163, 184, 0.22);
	border-radius: 999px;
	width: 100%;
}
.menu-content li { margin: 0; }
.menu-content a {
	display: block;
	position: relative;
	color: #e5e7eb;
	text-decoration: none;
	font-weight: 500;
	font-size: 0.92rem;
	line-height: 1.25;
	padding: 9px 14px;
	padding-left: 22px;
	border-radius: 10px;
	letter-spacing: 0.02em;
	opacity: 0.86;
	transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.menu-content a:hover,
.menu-content a:focus-visible {
	background-color: rgba(148, 163, 184, 0.16);
	color: #f9fafb;
	outline: none;
	opacity: 1;
}

/* Active/Current page highlight - subtle left accent + calm background */
.menu-content a.active,
.menu-content a[aria-current="page"] {
	background: rgba(15, 23, 42, 0.95);
	color: #f9fafb;
	font-weight: 600;
	opacity: 1;
}
.menu-content a.active::before,
.menu-content a[aria-current="page"]::before {
	content: '';
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 2px;
	height: 60%;
	border-radius: 999px;
	background: linear-gradient(180deg, #fde68a, #facc15);
}
.menu-content a.active:hover,
.menu-content a[aria-current="page"]:hover {
	background-color: rgba(30, 64, 175, 0.35);
	color: #f9fafb;
}

/* Optional: left-side variant (easy to switch later) */
.menu-drawer.left { left: -260px; right: auto; border-left: none; border-right: 1px solid rgba(255,255,255,0.08); box-shadow: 8px 0 24px rgba(0,0,0,0.35); }
.menu-drawer.left.open { left: 0; }

/* Ensure .spa-container is a column flexbox with header at top and login box centered below */
/* Center content inside the container as well */
/* Remove margin and ensure centering */
/* Make the container background fully transparent */
/* Default: dark background for all screens */
.spa-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* keep header at the top to avoid clipping */
    height: min(800px, var(--spa-viewport-height)); /* responsive height to fit small screens */
    width: min(380px, 100vw);  /* expanded from 360px to fit base tuning buttons comfortably */
    max-width: 380px;
    max-height: var(--spa-viewport-height); /* don't exceed viewport height */
    position: relative;
    background: transparent !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    overflow: visible; /* allow absolute children (drawer) to be visible */
}

/* When .player-mode is present on a parent, make container transparent */
.player-mode .spa-container {
    background: transparent;
}

/* Responsive sizing for larger devices (tablets and up) */
@media (min-width: 768px) {
    .spa-container {
        width: min(420px, 100vw);
        max-width: 420px;
    }
}

/* Removed conflicting .app-container.login-container styles - now using .spa-content */
/* spa/style.css */
html {
    overflow: hidden;
    height: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: var(--app-font-family);
    font-size: var(--app-base-font-size);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    max-height: 100vh;
    min-width: 100vw;
    max-width: 100vw;
    background: #111827;
    overflow: hidden;
    /* Fix B: prefer CSS-based gesture handling to reduce accidental zoom while preserving scroll */
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: fixed;
    top: 0;
    left: 0;
}


/* Restore dark background for app container */
#app, .app-container {
    min-height: 100vh;
    max-height: 100vh;
    min-width: 100vw;
    max-width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    border-radius: 0;
    border: none;
    padding: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
}


h1 {
    color: #2563eb;
}



/* Alternative: mod-container for future modular consistency */
.mod-container {
    padding: 2rem 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow-y: auto;
    height: 100%;
}

.mod-container h1 {
    margin: 0 0 1.5rem 0;
    padding: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #f8fafc !important;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Remove previous container overrides to restore dark glassy look */
/* .app-container, #app-container, .page-container, #page-container {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
} */

/* Simplified container structure - using single .spa-content container */
#app-container {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 2.5rem 1rem 1.25rem 1rem; /* moved from .spa-page-container */
    overflow-y: auto; /* pages scroll inside app container */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}
#app-container::-webkit-scrollbar { display: none; }
#app-container h1 {
    margin: 0 0 1.5rem 0;
    padding: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #f8fafc !important;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* NOTE: legacy .page-header and .page-wrapper rules were moved to the centralized
   stylesheet `public/spa/src/styles/common-pages.css`. Keeping h1 and layout
   rules above; per-page specific styling should live in the centralized CSS
   or feature-specific CSS files. */

/* Make flexible columns shrink safely to avoid overflow */
.content-grid, .info-row, .controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.left-col, .right-col, .instr-meta { min-width: 0; }

/* Ensure right column behaves on narrow viewports */
.right-col { flex: 0 0 320px; }
.left-col { flex: 1 1 auto; }

/* Prevent long filenames from breaking layout */
.recent-list div, #queue-list div, .instr-card { word-break: break-word; overflow-wrap: break-word; }

/* Small screens: stack info cards neatly */
@media (max-width:760px) {
    .info-row { gap: 10px; }
    .info-card { flex: 1 1 100%; }
    .controls-row { gap: 8px; }
    .search-input { width: 100%; }
}

/* Per-page header overrides have been migrated to `common-pages.css`. */

/* Override existing h1 styles for consistency */
h1 {
    font-family: var(--app-font-family) !important;
    color: #f8fafc !important;
}

/* Status Bar Indicators Wrapper - groups network and session indicators together
   Center the whole group so the network icon and timer sit side by side in
   the middle of the footer. On auth pages, only the version display is shown
   and is also centered by this rule. */
.status-bar-indicators {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	width: 100%;
	position: relative; /* provide a centering anchor for the globe icon */
	padding: 0 1rem;
}

/* Trial mode pill shown for soft-gated trial users */
#trial-indicator {
	display: none;
	align-items: center;
	justify-content: center;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: #facc15; /* amber-400 */
	border: none;
}

#trial-indicator.trial-active {
	display: inline-flex;
}

/* Version Display - shown on login/register pages */
.version-display {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #64748b;
  font-family: var(--app-font-family, 'Inter', system-ui, sans-serif);
  letter-spacing: 0.02em;
  padding: 4px 12px;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 12px;
  border: 1px solid rgba(100, 116, 139, 0.2);
}

#version-timestamp {
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.version-display:hover #version-timestamp {
  opacity: 1;
}

/* Network Status Indicator */
#network-status-indicator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.network-status-icon {
	width: 20px;
	height: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.network-status-icon:hover {
  transform: scale(1.1);
}

.network-status-icon:focus {
  outline: 2px solid rgba(229, 184, 11, 0.5);
  outline-offset: 2px;
  border-radius: 50%;
}

.network-icon {
  width: 18px;
  height: 18px;
  transition: color 0.3s ease;
}

/* Online Connected - Timer color (amber) */
.network-status-indicator.status-online-connected .network-icon {
  color: #e5b80b; /* timer amber color */
}

/* Online Unstable - Orange/Amber */
.network-status-indicator.status-online-unstable .network-icon {
  color: #f59e0b; /* amber-500 */
  animation: network-pulse 2s ease-in-out infinite;
}

/* Online Disconnected - Red */
.network-status-indicator.status-online-disconnected .network-icon {
  color: #ef4444; /* red-500 */
}

/* Offline Mode - Gray with subtle styling */
.network-status-indicator.status-offline-mode .network-icon {
  color: #6b7280; /* gray-500 */
}

/* Tooltip: disabled to avoid popups in footer */
.network-status-tooltip {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.network-status-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: rgba(7, 11, 17, 0.96);
}

#network-status-indicator.expanded .network-status-tooltip,
#network-status-indicator:hover .network-status-tooltip {
	opacity: 1;
	visibility: visible;
	bottom: calc(100% + 18px);
}

/* Color-coded tooltip border accent (matches status color but keeps uniform shape) */
.network-status-indicator.status-online-connected .network-status-tooltip {
	border-color: rgba(16, 185, 129, 0.9);
}

.network-status-indicator.status-online-unstable .network-status-tooltip {
	border-color: rgba(245, 158, 11, 0.9);
}

.network-status-indicator.status-online-disconnected .network-status-tooltip {
	border-color: rgba(239, 68, 68, 0.9);
}

.network-status-indicator.status-offline-mode .network-status-tooltip {
	border-color: rgba(107, 114, 128, 0.9);
}

/* Generic status bar icon positioning helpers (center-anchored, inside-out slots) */
.status-slot-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.status-slot-right-1,
.status-slot-right-2,
.status-slot-right-3,
.status-slot-left-1,
.status-slot-left-2,
.status-slot-left-3 {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Offsets measured from the centered globe icon */
.status-slot-right-1 { margin-left: 72px; }
.status-slot-right-2 { margin-left: 144px; }
.status-slot-right-3 { margin-left: 216px; }
.status-slot-left-1  { margin-right: 72px; }
.status-slot-left-2  { margin-right: 144px; }
.status-slot-left-3  { margin-right: 216px; }

@keyframes network-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Session Timer Toggle Button */
#status-bar-root #session-timer-toggle {
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0.3rem;
	transition: transform 0.2s ease;
	border-radius: 50%;
	background: none;
	border: none;
}

#status-bar-root #session-timer-toggle.hidden {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

#session-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--spa-text-muted);
  transition: all 0.3s ease;
  position: relative;
}

#session-timer-toggle:hover #session-dot {
  transform: scale(1.2);
}

#session-dot.active {
  background-color: var(--spa-primary);
}

#session-dot.saving {
  background-color: #f59e0b; /* amber-500 */
  animation: pulse 1s infinite;
}

#session-dot.saved {
  background-color: #10b981; /* green-500 */
  animation: pulse 0.5s 2;
}

#session-dot.failed {
  background-color: #ef4444; /* red-500 */
}

/* Session Timer Box - inline pill that replaces the toggle when visible */
#session-timer-box {
	display: none !important;
	align-items: center;
	justify-content: center;
	color: #e5b80b;
	padding: 0.5rem 1.5rem;
	border-radius: 20px;
	transition: all 0.2s ease-out;
	font-size: 1.05rem;
	font-weight: 700;
	border: none;
	cursor: pointer;
	letter-spacing: 0.05em;
	min-width: 70px;
	height: 36px;
	max-height: 36px;
	gap: 0.6rem;
}

#session-timer-box:hover {
	color: #facc15;
	transform: translateY(-1px);
}

#status-bar-root #session-timer-box.visible {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Choice Banner - Two centered rounded buttons (pill card) */
.choice-banner {
	background: linear-gradient(135deg, #f9e29f 0%, #f4c71c 100%);
	border: 1px solid rgba(255, 218, 68, 0.75);
	border-radius: 14px;
	margin: 0;
	padding: 0.7rem 1.15rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.85rem;
	font-size: 0.85rem;
	font-weight: 600;
	position: fixed;
	/* Sit just above the footer/status bar using computed footer height */
	bottom: calc(var(--spa-footer-height, 56px) + 6px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 998;
	box-shadow:
		0 14px 28px rgba(0, 0, 0, 0.3),
		0 2px 4px rgba(0, 0, 0, 0.18),
		0 0 0 1px rgba(0, 0, 0, 0.08);
	backdrop-filter: blur(6px);
}

.choice-btn {
	background: linear-gradient(135deg, #3e2723 0%, #2b1916 100%);
	border: 2px solid #26120e;
	color: #fde68a;
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	cursor: pointer;
	text-decoration: none;
	padding: 0.5rem 1.2rem;
	border-radius: 999px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	line-height: 1.1;
	box-shadow:
		0 8px 20px rgba(0, 0, 0, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.15),
		0 0 0 1px rgba(0, 0, 0, 0.08);
	touch-action: manipulation;
}

.choice-btn:focus-visible {
	outline: 2px solid rgba(62, 39, 35, 0.65);
	outline-offset: 3px;
}

.choice-btn:hover {
	background: linear-gradient(135deg, #2f1b17 0%, #1a0c0a 100%);
	transform: translateY(-1px);
}

.choice-btn:active {
	transform: translateY(0);
	background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
	color: #2b1b17;
	border-color: #f6c344;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}

.choice-btn-active {
	background: linear-gradient(135deg, #1e9c63 0%, #0f5135 100%);
	border-color: #0c3c27;
	color: #ecfdf3;
	box-shadow:
		0 10px 22px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		0 0 0 1px rgba(0, 0, 0, 0.08);
}

.choice-btn-active:hover {
	background: linear-gradient(135deg, #26b773 0%, #0f6841 100%);
	transform: translateY(-1px);
}

.choice-btn-active:active {
	background: linear-gradient(135deg, #34d399 0%, #16a34a 100%);
	color: #0b261a;
	border-color: #34d399;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
	transform: translateY(0);
}

/* Disabled state - make it look like a label, not a button */
.choice-btn:disabled,
.choice-btn[disabled] {
	cursor: default !important;
	pointer-events: none;
	opacity: 1;
}

.choice-btn-active:disabled,
.choice-btn-active[disabled] {
	cursor: default !important;
	pointer-events: none;
	opacity: 1;
	transform: none !important;
}

.choice-btn-active:disabled:hover,
.choice-btn-active[disabled]:hover {
	background: linear-gradient(135deg, #1e9c63 0%, #0f5135 100%);
	transform: none !important;
}

.choice-btn-active:disabled:active,
.choice-btn-active[disabled]:active {
	background: linear-gradient(135deg, #1e9c63 0%, #0f5135 100%);
	transform: none !important;
}

.choice-btn-text {
	font-weight: 800;
	letter-spacing: 0.01em;
}

.trial-duration-info {
	color: #5d4037;
	font-size: 0.75rem;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Choice Popup Modal */
.choice-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	animation: fadeIn 0.3s ease-out;
}

.choice-popup {
	background: #0f172a;
	border: 2px solid #facc15;
	border-radius: 16px;
	padding: 2rem;
	max-width: 400px;
	width: 90%;
	text-align: center;
	animation: scaleIn 0.3s ease-out;
}

.choice-popup-header h3 {
	color: #facc15;
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 0.5rem 0;
}

.choice-popup-header p {
	color: #e5e7eb;
	font-size: 1rem;
	margin: 0 0 2rem 0;
	line-height: 1.5;
}

.choice-popup-actions {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.choice-popup-btn {
	background: #1e293b;
	border: 2px solid #374151;
	border-radius: 12px;
	padding: 1rem;
	color: #e5e7eb;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.choice-popup-btn-primary {
	background: #facc15;
	border-color: #facc15;
	color: #3e2723;
}

.choice-popup-btn-primary:hover {
	background: #fde047;
	border-color: #fde047;
	transform: translateY(-2px);
}

.choice-popup-btn-secondary:hover {
	background: #374151;
	border-color: #6b7280;
	transform: translateY(-2px);
}

.choice-popup-btn-desc {
	font-size: 0.85rem;
	font-weight: 400;
	color: #9ca3af;
}

.choice-popup-btn-primary .choice-popup-btn-desc {
	color: #5d4037;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Trial Footer Overlay Styles */
.trial-footer-overlay {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: #facc15;
	border: none;
	border-radius: 12px;
	padding: 0.75rem 1rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 999;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #3e2723;
	animation: slideUp 0.3s ease-out;
	max-width: 200px;
}

.trial-footer-overlay.trial-ended {
	background: #ef4444;
	color: white;
}

.trial-footer-overlay-text {
	font-weight: 600;
}

.trial-footer-overlay-time {
	font-weight: 700;
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#status-bar-time-display {
	white-space: nowrap;
	color: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	display: inline-block !important;
	position: static !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}

#session-timer-reset {
	background: transparent;
	border: none;
	color: #e5b80b;
	font-size: 0.9rem;
	font-weight: 600;
	padding: 0;
	cursor: pointer;
	opacity: 0.8;
}

#session-timer-reset:hover {
	opacity: 1;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(229, 184, 11, 0.4);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 10px 10px rgba(229, 184, 11, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(229, 184, 11, 0);
  }
}

/* Glow pulse animation for active buttons */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(229, 184, 11, 0.5), 0 0 40px rgba(229, 184, 11, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(229, 184, 11, 0.7), 0 0 50px rgba(229, 184, 11, 0.3);
  }
}

/* Focus pulse animation for keyboard navigation */
@keyframes focus-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px #E5B80B, 0 0 12px rgba(229, 184, 11, 0.4);
  }
  50% {
    box-shadow: 0 0 0 1px #E5B80B, 0 0 20px rgba(229, 184, 11, 0.6);
  }
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  /* Disable all animations and transitions for users with vestibular disorders */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}