/* 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;
}

/* Hide session timer and network status on login/register pages */
html.login-page #session-timer-container,
html.login-page #network-status-container,
html.login-page .session-timer-container,
html.login-page .network-status-container,
html.register-page #session-timer-container,
html.register-page #network-status-container,
html.register-page .session-timer-container,
html.register-page .network-status-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Default: hide session timer container until explicitly shown */
#session-timer-container {
    display: none !important;
}

#network-status-container {
    display: none !important;
}

/* Show ONLY on player page */
html.player-page #session-timer-container,
html.player-page #network-status-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !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;
}

/* Page background — uses theme token defined in themes.css */
html, body, #app, .app-container {
    background-color: var(--bg, #0B1426) !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
    overflow: hidden;
    height: 100%;
    width: 100%;
}
/* App-wide font + layout variables.
   Color palette tokens live in themes.css — loaded before this file. */
:root {
    --app-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --app-base-font-size: 16px;
    /* Session timer inherits brand accent from the active theme */
    --session-timer-color: var(--accent-1, #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 */
    /* Player centering: viewport-exact boundaries (updated by layout-controller via getBoundingClientRect) */
    --player-area-top: 80px;   /* bottom of header+subheader area in viewport coords */
    --player-footer-top: calc(100dvh - 56px); /* top of footer in viewport coords */

    /* Adaptive sizing variables - responsive to viewport and zoom levels */
    --spacing-xs: clamp(4px, 1vw, 8px);
    --spacing-sm: clamp(8px, 2vw, 12px);
    --spacing-md: clamp(12px, 3vw, 16px);
    --spacing-lg: clamp(16px, 4vw, 24px);
    --spacing-xl: clamp(24px, 6vw, 32px);

    --font-xs: clamp(10px, 2vw, 12px);
    --font-sm: clamp(12px, 2.5vw, 14px);
    --font-base: clamp(14px, 3vw, 16px);
    --font-md: clamp(16px, 3.5vw, 18px);
    --font-lg: clamp(18px, 4vw, 24px);
    --font-xl: clamp(24px, 5vw, 32px);
    --font-2xl: clamp(28px, 6vw, 40px);

    --radius-sm: clamp(4px, 1vw, 6px);
    --radius-md: clamp(6px, 1.5vw, 10px);
    --radius-lg: clamp(8px, 2vw, 14px);
    --radius-xl: clamp(12px, 3vw, 18px);

    --touch-target-min: clamp(44px, 10vw, 60px);

    /* ── Structural / spacing tokens (theme-independent) ──────────────────
       Color tokens (--bg, --text, --accent-*, --surface-border, etc.)
       are defined per-theme in themes.css which loads before this file. */
    --radius: 14px;
    --page-max: 1120px;
    --gap-sm: 12px;
    --gap-md: 20px;
    --gap-lg: 28px;
    --card-padding: 1.25rem 1.5rem;

    /* ===== ADAPTIVE CONTAINER WIDTHS =====
       Three canonical widths for page content. Each grows with the viewport
       and caps on tablet/desktop so layouts use the room available without
       over-stretching. Pages should reference these instead of fixed pixel
       max-widths. */
    --container-narrow: clamp(320px, 92vw, 480px);   /* login, payment, my-profile */
    --container-medium: clamp(360px, 88vw, 640px);   /* player, my-sruthi, settings, default */
    --container-wide:   clamp(420px, 86vw, 960px);   /* dashboard, subscription, choice */

    /* Default card width — references the medium token so legacy fallbacks scale */
    --card-max-width: var(--container-medium);
}
.spa-content {
    flex: 1 1 0;        /* flex-basis: 0 so the item doesn't start at content height */
    min-height: 0;      /* required for flex children to scroll — overrides default min-height:auto */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow-y: auto;   /* scrollable by default — player/my-sruthi pages override below */
    -webkit-overflow-scrolling: touch;
}

/* Player page has its own fixed layout — no outer scroll needed */
html.player-page .spa-content {
    overflow: hidden;
}

/* My Sruthi card handles its own internal scroll — prevent outer double-scroll */
html.my-sruthi-page .spa-content {
    overflow: hidden;
}

/* Legacy helper class — kept for any existing references */
.spa-content.scrollable {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 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;
}

/* Player page: remove global padding and make #app-container the absolute-position
   containing block so .spa-player-container can be centred with transform */
html.player-page #app-container {
    padding: 0;
    overflow: hidden;
    position: relative;  /* already set by #app-container, reinforced here */
}

/* Fixed centering — viewport-relative via position:fixed so no container
   geometry affects placement. --player-area-top is the exact viewport-Y
   where the header/subheader ends (measured by layout-controller via
   getBoundingClientRect, capturing canvas padding + subheader margins).
   --player-footer-top is the viewport-Y where the footer begins.
   Midpoint of those two values = perfect visual centre. */
html.player-page .spa-player-container {
    position: fixed !important;
    top: calc((var(--player-area-top, 80px) + var(--player-footer-top, calc(100dvh - 56px))) / 2) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: var(--container-medium) !important;
    max-width: var(--container-medium) !important;
    flex: none !important;
    margin: 0 !important;
    z-index: 200 !important;
}

/* 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: 100vh;
	height: 100dvh; /* Use dynamic viewport height for mobile */
	max-height: 100vh;
	max-height: 100dvh;
	display: flex;
	align-items: center; /* center vertically for all screens */
    justify-content: center;
    background: inherit;
    /* Use safe-area insets for consistent spacing near browser UI/notch */
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    box-sizing: border-box;
    overflow: hidden;
}


.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;
	/* Top padding adds env(safe-area-inset-top) so iOS notched devices and
	   any browser top chrome don't crowd the logo. Falls back to 0 on
	   non-iOS, leaving spacing-md as the baseline. */
	padding: calc(var(--spacing-md) + env(safe-area-inset-top, 0px))
	         var(--spacing-lg)
	         clamp(2rem, 5cqw, 2.8rem);
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 0 0 var(--radius-xl) var(--radius-xl);
	border-left: 1px solid rgba(212, 175, 55, 0.1);
	border-right: 1px solid rgba(212, 175, 55, 0.1);
	box-sizing: border-box;
	z-index: 100;
}

/* 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: var(--font-xl);
    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: var(--touch-target-min);
    height: var(--touch-target-min);
    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;
	/* Centre and cap to match the adaptive medium container */
	left: 50%;
	transform: translateX(-50%);
	width: var(--container-medium);
	max-width: var(--container-medium);
	height: auto;
	min-height: 52px;
	max-height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 1rem;
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	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);
}

/* fadeIn → centralized in animations.css */

/* Footer width follows the adaptive --container-medium token — no breakpoint needed */

/* 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: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
    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: var(--font-2xl);
    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: var(--font-md);
    color: #A8B3C0;
    margin: var(--spacing-sm) 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: 100%;
    max-width: 100%;
    padding: 0.5rem 0;
    padding-bottom: calc(var(--spa-footer-height, 70px) + 1.5rem);
    position: relative;
    z-index: 80;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    /* No height/overflow constraints — scrolling is handled by the parent .spa-content */
}

.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: optimize for smaller screens */
@media (max-width: 768px) {
    .spa-header {
        /* Increase top padding from spacing-xs (4px) to spacing-sm (8px) plus
           the iOS safe-area inset, so the logo always has breathing room
           below the browser chrome / status-bar / notch. */
        padding: calc(var(--spacing-sm) + env(safe-area-inset-top, 0px))
                 var(--spacing-sm)
                 var(--spacing-sm);
        border-radius: 0;
        border-left: none;
        border-right: none;
        background: none;
        min-height: auto;
    }

    .spa-header-title {
        font-size: var(--font-md);
    }

    /* Reduce logo size on mobile */
    .spa-header-logo {
        height: 36px;
        max-width: 140px;
    }

    .menu-icon-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .functionality-header {
        padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs);
    }

    .functionality-title {
        font-size: var(--font-lg);
    }

    .functionality-content {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    /* Reduce subheader size on mobile but keep enough top margin so the
       "SaaDhaGaa" logo and the "MY PLAYER" / "MY SRUTHI" / "MY PROFILE"
       label below it never overlap. The previous 0.1rem margin was too
       tight — increase to 0.5rem to give visible breathing room. */
    .spa-subheader {
        margin: 0.55rem auto 0.6rem;
        padding: 0.18rem 0.75rem 0.3rem;
        font-size: 0.72rem;
    }

    .spa-subheader::before,
    .spa-subheader::after {
        flex: 0 0 20px;
    }
}

/* 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
   (base .session-dot styles are defined above — no duplicate needed) */
.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 */
    height: 100%;
    max-height: 100%;
    /* Adaptive width cap — grows with the viewport so tablets and desktops
       use the room available instead of rendering as a 480px phone card.
       Phone fills naturally; tablet/desktop centres inside .spa-canvas-wrapper. */
    width: 100%;
    max-width: var(--container-medium);
    position: relative;
    background: transparent !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    overflow: hidden; /* clips horizontally; vertical scroll is handled by .spa-content */
    box-sizing: border-box;

    /* ── Container query context ──────────────────────────────────────────
       Establishes this as a CSS container so child elements can use cqw
       units. The cqw-based tokens below now scale with the adaptive
       container width — typography and spacing grow naturally on tablet
       and desktop while staying compact on phone.                        */
    container-type: inline-size;
    container-name: spa-app;

    /* Font tokens — container-relative (cqw) instead of viewport-relative (vw) */
    --font-xs:   clamp(10px, 2cqw,   12px);
    --font-sm:   clamp(12px, 2.5cqw, 14px);
    --font-base: clamp(14px, 3cqw,   16px);
    --font-md:   clamp(16px, 3.5cqw, 18px);
    --font-lg:   clamp(18px, 4cqw,   24px);
    --font-xl:   clamp(24px, 5cqw,   32px);
    --font-2xl:  clamp(28px, 6cqw,   40px);

    /* Spacing tokens */
    --spacing-xs: clamp(4px,  1cqw,   8px);
    --spacing-sm: clamp(8px,  2cqw,  12px);
    --spacing-md: clamp(12px, 3cqw,  16px);
    --spacing-lg: clamp(16px, 4cqw,  24px);
    --spacing-xl: clamp(24px, 6cqw,  32px);

    /* Border-radius tokens */
    --radius-sm: clamp(4px,  1cqw,   6px);
    --radius-md: clamp(6px,  1.5cqw, 10px);
    --radius-lg: clamp(8px,  2cqw,   14px);
    --radius-xl: clamp(12px, 3cqw,   18px);

    /* Touch target */
    --touch-target-min: clamp(44px, 10cqw, 60px);
}

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

/* 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 */
}

/* Network Status Container - shows Online/Offline status */
.network-status-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.4rem 0.8rem;
	border-radius: 8px;
	background: rgba(15, 23, 42, 0.4);
	border: 1px solid rgba(100, 116, 139, 0.15);
	transition: all 0.2s ease;
}

.network-status-container:hover {
	background: rgba(15, 23, 42, 0.6);
	border-color: rgba(100, 116, 139, 0.3);
}

.network-status-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	font-weight: 500;
	color: #cbd5e1;
	transition: color 0.2s ease;
}

.network-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	transition: all 0.2s ease;
	box-shadow: 0 0 6px currentColor;
}

.network-status-dot.online {
	background-color: #10b981;
	color: #10b981;
}

.network-status-dot.offline {
	background-color: #ef4444;
	color: #ef4444;
}

.network-status-dot.unstable {
	background-color: #f59e0b;
	color: #f59e0b;
	animation: network-pulse 2s ease-in-out infinite;
}

.network-status-text {
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Session Timer Container - shows practice time */
.session-timer-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.4rem 1rem;
	border-radius: 8px;
	background: rgba(15, 23, 42, 0.4);
	border: 1px solid rgba(229, 184, 11, 0.2);
	transition: all 0.2s ease;
	cursor: pointer;
	color: #e5b80b;
	font-weight: 600;
	font-size: 0.95rem;
}

.session-timer-container:hover {
	background: rgba(229, 184, 11, 0.08);
	border-color: rgba(229, 184, 11, 0.4);
	transform: translateY(-1px);
}

.session-timer-icon {
	font-size: 1rem;
	display: inline-block;
}

.session-timer-display {
	font-family: 'Courier New', monospace;
	font-weight: 700;
	letter-spacing: 0.05em;
	min-width: 50px;
	text-align: center;
}

/* 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;
}

/* slideDown → centralized in animations.css */

/* 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;
}

/* fadeIn, scaleIn → centralized in animations.css */

/* 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;
}

/* slideUp → centralized in animations.css */

#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;
}

/* pulse, glow-pulse → centralized in animations.css */

/* 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;
  }
}

/* Fullscreen Mode Styles */
html:fullscreen,
html:-webkit-full-screen,
html:-moz-full-screen,
html:-ms-fullscreen {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body.fullscreen-active {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Hide browser UI elements in fullscreen */
body.fullscreen-active .spa-header {
  display: flex;
  background: #0B1426;
  border-bottom: 1px solid rgba(229, 184, 11, 0.1);
}

body.fullscreen-active .spa-footer {
  display: flex;
  background: #0B1426;
  border-top: 1px solid rgba(229, 184, 11, 0.1);
}

/* Maximize content area in fullscreen */
body.fullscreen-active .app-container,
body.fullscreen-active #app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Ensure player page takes full screen */
body.fullscreen-active #player-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Adjust layout variables for fullscreen */
body.fullscreen-active {
  --spa-viewport-height: 100vh;
  --spa-header-height: 60px;
  --spa-footer-height: 70px;
}

/* Hide scrollbars in fullscreen */
body.fullscreen-active ::-webkit-scrollbar {
  display: none;
}

body.fullscreen-active {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Fullscreen Re-entry Button - Minimal and non-intrusive */
.fullscreen-reentry-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 16px;
  padding: 0;
  background: transparent;
  color: rgba(229, 184, 11, 0.5);
  border: 1px solid rgba(229, 184, 11, 0.2);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
}

/* Show fullscreen button ONLY on player page (always visible as opt-in) */
html.player-page .fullscreen-reentry-btn {
  display: inline-flex !important;
}

/* Hide on all other pages */
html:not(.player-page) .fullscreen-reentry-btn {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Hide when in fullscreen mode */
body.fullscreen-active .fullscreen-reentry-btn {
  display: none !important;
}

/* Ensure header center displays items inline */
.spa-header-center {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Ensure header has relative positioning for absolute button */
.spa-header {
  position: relative;
}

.fullscreen-reentry-btn:hover {
  background: rgba(229, 184, 11, 0.08);
  border-color: rgba(229, 184, 11, 0.4);
  color: rgba(229, 184, 11, 0.8);
  opacity: 1;
  transform: translateY(-50%) scale(1.05);
}

.fullscreen-reentry-btn:active {
  transform: translateY(-50%) scale(0.98);
  background: rgba(229, 184, 11, 0.12);
}

.fullscreen-reentry-btn:focus {
  outline: 1px solid rgba(229, 184, 11, 0.3);
  outline-offset: 2px;
}