.modified-time {
    color: #666;
    margin-left: 15px;
    font-size: 14px;
}

/*
 * =====================================
 * THE TIVOLI HOOT JUKEBOX - STYLES
 * =====================================
 *
 * A comprehensive stylesheet for a ChordPro-based
 * music jukebox application with dark mode support
 * and responsive design.
 *
 * Table of Contents:
 * 1. Base Styles & Reset
 * 2. Layout & Container
 * 3. Mobile Responsive Design
 * 4. Typography & Headers
 * 5. Navigation & Tabs
 * 6. Song List & Cards
 * 7. Playlist Components
 * 8. Search Functionality
 * 9. Modal & Song Display
 * 10. ChordPro Formatting
 * 11. Interactive Controls
 * 12. Theme Toggle & Dark Mode
 * 13. PWA & Splash Screen
 * 14. Utility Classes
 */

/*
 ╔══════════════════════════════════════╗
 ║           BASE STYLES & RESET        ║
 ╚══════════════════════════════════════╝
   Foundation styles, resets & globals
*/

/* =====================================
   1. BASE STYLES & RESET
   ===================================== */

/* Global box-sizing for consistent layout */
* {
	box-sizing: border-box;
}

/* Prevent horizontal scrolling on all elements */
html {
	overflow-x: hidden;
}

/* Main body styling with Real Book theme colors */
body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	margin: 20px;
	background: #FAF8F2; /* Cream/off-white background like Real Book pages */
	overflow-x: hidden; /* Prevent horizontal scroll */
	color: #1a1a1a; /* Rich black text */
}

/*
 ┌─────────────────────────────────────┐
 │          LAYOUT & CONTAINER         │
 └─────────────────────────────────────┘
   Main content structure & positioning
*/

/* =====================================
   2. LAYOUT & CONTAINER
   ===================================== */

/* Main content container with Real Book styling */
.container {
	max-width: 1200px; /* Limit width for readability */
	margin: 0 auto; /* Center horizontally */
	background: #FFFEF9; /* Warm white background like book pages */
	padding: 30px;
	border: 2px solid #2c2c2c; /* Clean dark border like book pages */
	border-radius: 2px; /* Minimal rounding */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Book-like shadow */
	/* overflow-x: hidden; - Commented out to allow sticky positioning */
}
/*
 ┌─[ 📱 ]─────────────────────────────┐
 │      MOBILE RESPONSIVE DESIGN      │
 └─────────────────────────────────────┘
   Tablet & phone optimizations
*/

/* =====================================
   3. MOBILE RESPONSIVE DESIGN
   ===================================== */

/* Mobile-first responsive breakpoint for tablets and phones */
@media (max-width: 768px) {
	/* Remove body margins/padding on mobile for full-width layout */
	body {
		margin: 0;
		padding: 0;
		overflow-x: hidden;
	}

	/* Full-width container on mobile */
	.container {
		max-width: none;
		margin: 0;
		padding: 15px; /* Reduced padding for mobile */
		border-radius: 0; /* No rounded corners on mobile */
		box-shadow: none; /* Remove shadow on mobile */
		min-height: 100vh; /* Full viewport height */
		width: 100%;
		/* overflow-x: hidden; - Commented out to allow sticky positioning */
	}

	/* Smaller header text on mobile */
	h1 {
		font-size: 20px !important;
		margin: 10px 0 !important;
	}

	/* Smaller theme toggle button on mobile */
	.theme-toggle button {
		padding: 6px 10px;
		font-size: 12px;
	}

	/* Full-width search input on mobile */
	.search input {
		width: 100%;
		max-width: none;
		font-size: 16px; /* Prevent iOS zoom on focus */
		box-sizing: border-box;
	}

	/* Full-screen modal on mobile */
	.modal-content {
		margin: 1%;
		width: 98%;
		max-height: 98%;
		padding: 15px;
	}

	/* Stack song controls vertically on mobile */
	.song-controls {
		flex-direction: column;
		gap: 8px;
		align-items: stretch; /* Stretch to full width */
	}

	/* QR Code section on mobile */
	.song-qr-code {
		margin-bottom: 8px;
	}

	/* Share controls on mobile */
	.share-controls {
		justify-content: center;
		flex-wrap: wrap;
		gap: 8px;
	}

	/* Key-size controls stack vertically on mobile */
	.key-size-controls {
		flex-direction: column;
		gap: 8px;
		align-items: stretch;
	}

	/* Individual control groups center themselves on mobile */
	.transpose-controls,
	.font-size-controls,
	.nashville-controls {
		justify-content: center;
	}

	/* Song key display centers on mobile */
	.song-key-display {
		justify-content: center;
	}
}
/*
 ╭─────────────────────────────────────╮
 │        TYPOGRAPHY & HEADERS         │
 ╰─────────────────────────────────────╯
   Text styling, fonts & headings
*/

/* =====================================
   4. TYPOGRAPHY & HEADERS
   ===================================== */

/* Main page heading with Permanent Marker Google Font */
h1 {
	font-family: 'Permanent Marker', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	color: #1a1a1a; /* Rich black */
	font-weight: 400; /* Permanent Marker is designed to be normal weight */
	font-size: 32px; /* Slightly larger for handwriting font visibility */
	text-transform: none; /* Don't transform handwriting font */
	letter-spacing: 0.5px; /* Reduced for handwriting style */
	border-bottom: 3px solid #2c2c2c; /* Dark border */
	padding-bottom: 12px;
	text-align: center;
}

/* Welcome message styling */
/* Welcome message styling */
.welcome-message {
	text-align: center; /* Center the text */
	font-size: 22px; /* Larger font size */
	font-style: italic; /* Italic text */
	margin: 0px 0 10px 0; /* Margins with less bottom spacing */
	padding: 0 15px; /* Side padding for mobile */
	color: #333; /* Dark text color */
	/* background: grey; */
	padding: 20px;
}

.welcome-message a {
	color: #595959; /* Brand grey for links */
	text-decoration: underline;
}

.welcome-message a:hover {
	text-decoration: underline;
}

/* Statistics box styling - Real Book style */
.stats {
	background: #F0EFE9; /* Warm cream background */
	padding: 18px;
	border: 1px solid #2c2c2c; /* Dark border like Real Book pages */
	border-radius: 2px;
	margin: 25px 0;
	text-align: center; /* Center all text content */
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	color: #1a1a1a;
}
/*
 ┌─[ ⟦ TABS ⟧ ]───────────────────────┐
 │         NAVIGATION & TABS           │
 └─────────────────────────────────────┘
   Tab system & navigation elements
*/

/* =====================================
   5. NAVIGATION & TABS
   ===================================== */

/* Tab container using flexbox */
.tabs {
	display: flex;
	justify-content: center; /* Center tabs horizontally */
	margin: 20px 0;
}

/* Individual tab styling - Real Book style */
.tab {
	font-size: 12px;
	margin-left: -1px;
	padding: 10px 20px;
	background: #E8E6DF; /* Light cream background */
	cursor: pointer;
	border: 1px solid #2c2c2c; /* Dark border */
	/* border-bottom: none; */
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #2c2c2c;
}

/* Active tab with Real Book colors */
.tab.active {
	background: #FFFEF9; /* Warm white like book pages */
	color: #1a1a1a; /* Rich black text */
	/* border-bottom: 2px solid #FFFEF9;  */
}

/* Tab content containers - hidden by default */
.content {
	display: none;
	/* Ensure sticky positioning works when content becomes visible */
	position: relative;
	overflow: visible;
}

/* Active tab content - visible */
.content.active {
	display: block;
	/* Ensure sticky positioning works when content becomes visible */
	position: relative;
	overflow: visible;
}
/*
 ♪ ┌───────────────────────────────────┐ ♪
   │         SONG LIST & CARDS         │
 ♫ └───────────────────────────────────┘ ♫
   Individual song display components
*/

/* =====================================
   6. SONG LIST & CARDS
   ===================================== */

/* Individual song card styling - Real Book index style */
.song {
	background: #FFFEF9; /* Warm white like book pages */
	margin: 2px 0; /* Tighter spacing like index pages */
	padding: 12px 18px;
	border: 1px solid #D8D5CE; /* Subtle border */
	border-left: 3px solid #2c2c2c; /* Dark accent like Real Book */
	border-radius: 1px; /* Minimal rounding */
	cursor: pointer;
	transition: all 0.2s;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* Song hover effect - Real Book style */
.song:hover {
	background: #F5F3ED !important; /* Slightly darker cream on hover */
	box-shadow: 0 2px 4px rgba(44, 44, 44, 0.1);
}

/* Song title styling - Permanent Marker Google Font */
.song-title {
	font-family: 'Permanent Marker', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 400; /* Permanent Marker is designed to be normal weight */
	font-size: 18px; /* Slightly larger for better readability with handwriting font */
	text-transform: none; /* Don't transform handwriting font to uppercase */
	letter-spacing: 0.2px;
	color: #1a1a1a; /* Rich black like Real Book titles */
}

/* Song artist styling - Real Book credit style */
.song-artist {
	color: #4a4a4a; /* Darker gray for better contrast */
	font-style: normal;
	font-size: 13px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	text-transform: none;
	letter-spacing: 0.2px;
}

/* Song key badge styling - Real Book key notation */
.song-key {
	background: #2c2c2c; /* Dark background like Real Book */
	color: #FFFEF9; /* Warm white text */
	padding: 3px 8px;
	border-radius: 1px; /* Minimal rounding */
	font-size: 11px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 700;
	letter-spacing: 0.3px;
}
/*
 ┌─[ 📂 PLAYLISTS ]───────────────────┐
 │       PLAYLIST COMPONENTS           │
 └─────────────────────────────────────┘
   Collapsible playlist functionality
*/

/* =====================================
   7. PLAYLIST COMPONENTS
   ===================================== */

/* Playlist container with modern white theme */
.playlist {
	background: #ffffff; /* Clean white background */
	border: 1px solid #e0e0e0; /* Light gray border */
	padding: 15px;
	margin: 10px 0;
	border-radius: 5px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Playlist header with flexbox layout */
.playlist-header {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer; /* Indicate clickable */
	user-select: none; /* Prevent text selection */
}

/* Playlist header hover effect */
.playlist-header:hover {
	background: rgba(89, 89, 89, 0.05); /* Light grey hover */
	padding: 5px;
	margin: -5px; /* Compensate for padding */
	border-radius: 3px;
}

/* Collapsible playlist toggle arrow */
.playlist-toggle {
	font-size: 12px;
	color: #666666; /* Modern gray */
	transition: transform 0.2s; /* Smooth rotation */
	min-width: 12px;
}

/* Expanded state - rotate arrow 90 degrees */
.playlist-toggle.expanded {
	transform: rotate(90deg);
}

/* Playlist name styling - Permanent Marker Google Font */
.playlist-name {
	font-family: 'Permanent Marker', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 400; /* Permanent Marker is designed to be normal weight */
	font-size: 16px; /* Slightly larger for handwriting font visibility */
	color: #333333; /* Modern dark gray */
	flex: 1; /* Take remaining space */
}

/* Track count display */
.track-count {
	color: #6c757d; /* Gray text */
	font-size: 14px;
}

/* Playlist tracks list - reset list styling */
.playlist-tracks {
	list-style: none; /* Remove bullets */
	padding: 0;
	margin: 10px 0 0 0;
}

/* Individual track item */
.playlist-track {
	margin: 5px 0;
}

/* Track link styling */
.playlist-track a {
	display: block;
	text-decoration: underline; /* Add underline for links */
	color: inherit; /* Use parent color */
	padding: 8px 12px;
	border-radius: 4px;
	transition: background-color 0.2s; /* Smooth hover */
}

/* Track link hover effect */
.playlist-track a:hover {
	background: rgba(89, 89, 89, 0.05); /* Light grey hover */
}

/* Track title styling - Permanent Marker Google Font */
.track-title {
	font-family: 'Permanent Marker', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 400; /* Permanent Marker is designed to be normal weight */
	font-size: 17px;
	color: #333; /* Dark gray */
	display: block;
}

/* Track artist styling */
.track-artist {
	color: #666; /* Medium gray */
	font-style: italic;
	display: block;
	font-size: 14px;
	margin: 2px 0;
}

/* Track key badge */
.track-key {
	background: #595959; /* Brand grey */
	color: #fff; /* White text */
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 11px;
}

/* Missing track styling */
.track-missing {
	color: #999; /* Light gray */
	font-style: italic;
}

/* Track status (error) styling */
.track-status {
	color: #dc3545; /* Red error color */
	font-size: 12px;
}

/*
|| ┌─[ 🎤 ARTISTS ]─────────────────────┐
|| │         ARTIST GROUPINGS            │
|| └─────────────────────────────────────┘
||   Artist folders use playlist styling
*/

/* Artists use the same collapsible playlist styling */
/*
 ┌─[ 🔍 ]─────────────────────────────┐
 │        SEARCH FUNCTIONALITY         │
 └─────────────────────────────────────┘
   Search input & filtering
*/

/* =====================================
   8. SEARCH FUNCTIONALITY
   ===================================== */

/* Search container - flexible layout with sticky positioning */
.search {
	/* Layout properties */
	margin: 20px 0;
	display: flex;
	align-items: center;
	gap: 10px;
	border-radius: 8px;
	
	/* CSS sticky positioning as primary method */
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 1000; /* Higher z-index to ensure it stays on top */
	
	/* Visual styling */
	background: #fff; /* Ensure background covers content */
	border-bottom: 1px solid #e0e0e0;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	transition: box-shadow 0.2s ease; /* Smooth shadow transitions */
}

/* JavaScript-based sticky state styling */
.search.js-sticky {
	/* Enhanced shadow for fixed position */
	box-shadow: 0 4px 16px rgba(0,0,0,0.25);
	border-radius: 0; /* Remove border radius when fixed */
	margin: 0; /* Remove margins when fixed */
}

/* Placeholder element for layout maintenance */
.search-placeholder {
	width: 100%;
	background: transparent;
	pointer-events: none;
}

/* Ensure container allows sticky positioning */
.content {
	position: relative;
	overflow: visible;
}

/* Dark mode sticky search */
body.dark-mode .search {
	background: #2d2d2d;
	border-bottom-color: #555;
}

/* Desktop padding for search */
@media (min-width: 1025px) {
	.search {
		padding: 12px 20px;
	}
}

/* Mobile-specific adjustments for sticky search */
@media (max-width: 1024px) {
	.search {
		margin: 0 0 10px 0;
		border-radius: 0;
		padding: 12px 15px;
	}
}

/* Search input field */
.search input {
	padding: 12px 16px;
	font-size: 16px;
	flex: 1;
	min-width: 0;
	/* border: 1px solid #ddd; */
	border: 1px solid black;
	/* border-radius: 25px; */
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.search input:focus {
	border-color: #595959;
	box-shadow: 0 0 0 3px rgba(89, 89, 89, 0.1);
}

/* Clear button styling */
.search button {
	padding: 8px 12px;
	background: #6c757d;
	color: white;
	border: none;
	border-radius: 20px;
	cursor: pointer;
	font-size: 14px;
	white-space: nowrap;
	transition: background-color 0.2s;
	flex-shrink: 0;
	min-width: auto;
}

.search button:hover {
	background: #545b62;
}
/*
 ╔═══════════════════════════════════════╗
 ║          MODAL & SONG DISPLAY         ║
 ╚═══════════════════════════════════════╝
   Popup windows & song view container
*/

/* =====================================
   9. MODAL & SONG DISPLAY
   ===================================== */

/* Modal overlay - covers entire screen */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1000; /* On top of everything */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
	overflow-x: hidden;
}

/* Modal content container - Real Book sheet music page style */
.modal-content {
	background-color: #FFFEF9; /* Warm white like Real Book pages */
	margin: 10px auto; /* 10px margin for centering */
	padding: 0; /* Remove padding to control it per section */
	border-radius: 2px; /* Minimal rounding like book pages */
	border: 2px solid #2c2c2c; /* Dark border like book pages */
	width: calc(100% - 20px);
	max-width: 1200px; /* Limit maximum width */
	height: calc(100% - 20px);
	max-height: calc(100vh - 20px); /* Prevent overflow */
	overflow: hidden; /* No scrolling on container itself */
	position: relative;
	word-break: keep-all; /* Never break words */
	overflow-wrap: normal; /* Only break at natural boundaries */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); /* Stronger book-like shadow */
}

/* Desktop modal sizing - uses calc values from main rule */
@media (min-width: 769px) {
	/* Modal uses the calc(100% - 20px) values from the main .modal-content rule */
}

/* Modal close button - positioned in sticky header */
.close {
	color: #000; /* Black color */
	opacity: 0.5; /* 50% lighter */
	position: absolute;
	top: 6px;
	right: 6px;
	font-size: 28px;
	font-weight: 700; /* Bold */
	cursor: pointer;
	z-index: 101; /* Above header */
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.2s ease;
}

/* Close button hover effect */
.close:hover {
	opacity: 1; /* Full opacity on hover */
	color: #666; /* Gray on hover */
	background: rgba(0,0,0,0.1); /* Light background on hover */
}

/* Song header section in modal - Real Book sheet music style */
.song-header {
	border-bottom: 3px solid #2c2c2c; /* Dark border like Real Book */
	padding: 15px 15px 12px 15px; /* More generous padding */
	margin-bottom: 0; /* Remove bottom margin since we're using flexbox */
	background: #F8F7F0; /* Slightly darker cream background */
	position: sticky;
	top: 0;
	z-index: 100; /* Above song content */
	box-shadow: 0 3px 6px rgba(44, 44, 44, 0.15); /* Real Book style shadow */
	flex-shrink: 0; /* Don't shrink when content is large */
}

/* Song title in modal - Permanent Marker Google Font */
.song-modal-title {
	font-family: 'Permanent Marker', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-size: 26px;
	font-weight: 400; /* Permanent Marker is designed to be normal weight */
	color: #1a1a1a; /* Rich black like Real Book */
	margin: 0 15px; /* Add 15px left and right margin to avoid close button */
	text-align: center;
	text-transform: none; /* Don't transform handwriting font */
	letter-spacing: 0.5px;
	line-height: 1em;
}

/* Song artist in modal - Real Book credit style */
.song-modal-artist {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-size: 16px;
	color: #4a4a4a; /* Darker gray for better contrast */
	font-style: normal;
	margin: 8px 0;
	text-align: center;
	letter-spacing: 0.3px;
}

/* Song key badge in modal - Real Book key notation */
.song-modal-key {
	background: #2c2c2c; /* Dark background like Real Book */
	color: #FFFEF9; /* Warm white text */
	padding: 6px 14px;
	border-radius: 1px; /* Minimal rounding */
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
}
/*
 ♪ ╔═══════════════════════════════════╗ ♪
 ♫ ║        CHORDPRO FORMATTING        ║ ♫
 ♪ ╚═══════════════════════════════════╝ ♪
   Music notation & chord display
*/

/* =====================================
   10. CHORDPRO FORMATTING
   ===================================== */

/* Main ChordPro song container - Real Book sheet music style */
.chordpro-song {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; /* Modern system fonts */
	line-height: 1.5; /* Readable line spacing like sheet music */
	color: #1a1a1a; /* Rich black text like Real Book */
	word-break: normal; /* Allow natural breaking at spaces */
	overflow-wrap: break-word; /* Break long words if absolutely necessary */
	white-space: normal; /* Allow normal text wrapping */
	hyphens: none; /* Disable automatic hyphenation that can break words */
	font-weight: 500; /* Medium weight for readability */
	font-size: 1em; /* Base font size */
	width: 100%;
	overflow-x: hidden; /* Prevent horizontal scroll */
	box-sizing: border-box;
	padding: 20px 25px; /* More generous padding like book pages */
	flex: 1; /* Take remaining space in flex container */
	overflow-y: auto; /* Allow vertical scrolling within content area */
	background: #FFFEF9; /* Warm white background */
}
.chordpro-metadata {
	margin: 0.625em 0; /* Use em units for responsive spacing */
	font-weight: 700;
	color: #222;
	word-break: keep-all; /* Never break words */
	overflow-wrap: normal; /* Only break at natural word boundaries */
	hyphens: none; /* Disable automatic hyphenation */
	line-height: 1.4; /* Relative line height for metadata */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, sans-serif;
}
.chordpro-title {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, sans-serif;
	font-size: 1.5em;
	color: #111;
	word-wrap: break-word;
	font-weight: 700;
	display:none;
}
.chordpro-subtitle {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, sans-serif;
	font-size: 1.2em;
	color: #444;
	word-wrap: break-word;
	font-weight: 700;
	display:none;
}
.chordpro-artist {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, sans-serif;
	font-size: 1.05em;
	color: #555;
	word-wrap: break-word;
	font-weight: 700;
}
.chordpro-lyrics {
	margin: 15px 0;
	color: #222;
	font-weight: 600;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, sans-serif;
}
/* ChordPro line with balanced spacing for chords and readability */
.chordpro-line {
	margin: 0.3em 0 0.6em 0; /* Reduced margins for tighter spacing */
	padding-top: 1.3em; /* Reduced padding - just enough for chords */
	position: relative; /* For absolute positioned chords */
	color: #222; /* Dark gray text */
	word-break: normal; /* Allow natural breaking at spaces */
	overflow-wrap: break-word; /* Break long words if absolutely necessary */
	white-space: normal; /* Allow normal text wrapping */
	hyphens: none; /* Disable automatic hyphenation */
	font-weight: 600; /* Semi-bold */
	width: 100%;
	box-sizing: border-box;
	max-width: 100%; /* Prevent overflow */
	overflow-x: hidden; /* Prevent horizontal overflow */
	line-height: 1.5; /* Slightly reduced line height */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, sans-serif;
}

/* ChordPro chord symbols - Real Book chord style with handwritten feel */
.chordpro-chord {
	color: #2c2c2c; /* Dark color for chords like Real Book */
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 800; /* Extra bold weight for better chord visibility */
	font-size: 18px; /* Fixed size for better chord visibility */
	position: absolute; /* Position above lyrics */
	top: -1.6em; /* Balanced spacing for normal lines */
	left: 0; /* Align to left edge of text */
	white-space: nowrap; /* Prevent chord wrapping */
	z-index: 1; /* Above other elements */
	margin: 0; /* Remove any margins */
	padding: 0; /* Remove any padding */
	letter-spacing: 0.2px; /* Slight letter spacing for clarity */
}

/* Individual wrapped line styling - applied to specific lines that wrap */
.chordpro-line.wrapped {
	padding-top: 2.0em; /* Extra space for wrapped chords */
	line-height: 2.5; /* Increased line height for better chord clearance */
}

/* Chords in individually wrapped lines */
.chordpro-line.wrapped .chordpro-chord {
	top: -2em; /* Balanced spacing for wrapped lines */
}

/* Fix for wrapped lines and chord spacing */
.chordpro-lines-wrapped .chordpro-chord {
	top: -1.5em; /* Balanced spacing for normal lines - tighter clearance */
}

/* Fix for consecutive chords without text - align them above the line */
.chordpro-line-chords-only .chordpro-chord {
    position: relative;
    top: -1.5em; /* Same height as other chords */
    left: auto;
    margin-right: 1em; /* Space between consecutive chords */
    display: inline-block;
    vertical-align: baseline; /* Align baselines for proper superscript display */
}

/* Alternative selector for blocks with empty text */
.chordpro-block:has(.chordpro-text:empty) .chordpro-chord {
    position: relative;
    top: -1.5em;
    left: auto;
    margin-right: 1em;
    display: inline-block;
    vertical-align: baseline; /* Align baselines for proper superscript display */
}
.chordpro-text {
	font-size: 1.05em;
	color: #111;
	word-break: normal; /* Allow natural breaking at spaces */
	overflow-wrap: break-word; /* Break long words if absolutely necessary */
	white-space: normal; /* Allow normal text wrapping */
	hyphens: none; /* Disable automatic hyphenation */
	text-indent: 0;
	padding-left: 0;
	font-weight: 500;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, sans-serif;
}
.chordpro-comment {
	font-family: 'Permanent Marker', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-size: 24px;
	font-weight: 400; /* Permanent Marker is designed to be normal weight */
	color: #1a1a1a; /* Rich black like song modal title */
	margin: 0.667em 0; /* Use em units for responsive spacing */
	text-align: left;
	text-transform: none; /* Don't transform handwriting font */
	letter-spacing: 0.5px;
	line-height: 1em;
	word-break: keep-all; /* Never break words */
	overflow-wrap: normal; /* Only break at natural word boundaries */
	hyphens: none; /* Disable automatic hyphenation */
	display: inline-block; /* Make it inline-block so border follows text width */
	border-bottom: 4px solid #2c2c2c; /* 4px border bottom under text only */
	padding-bottom: 8px; /* 8px space between text and border */
	margin-bottom: 0px; /* No margin below the text */
}
.chordpro-block {
	text-indent: 0;
	padding-left: 0;
	padding-right: 0; /* Remove right padding */
	margin-right: 0; /* Remove right margin */
	word-break: normal; /* Allow natural breaking at spaces */
	overflow-wrap: break-word; /* Break long words if absolutely necessary */
	white-space: normal; /* Allow normal text wrapping */
	hyphens: none; /* Disable automatic hyphenation */
	max-width: 100%;
	box-sizing: border-box;
	position: relative;
	display: inline; /* Make blocks inline to reduce gaps */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, sans-serif;
}
.chordpro-block .chordpro-text {
	display: inline;
	text-indent: 0; /* Remove text indent */
	padding-left: 0; /* Remove left padding */
	margin-left: 0;
	margin-right: 0; /* Remove right margin */
	padding-right: 0; /* Remove right padding */
}
.chordpro-section {
	margin: 1.25em 0; /* Use em units for responsive spacing */
	padding: 0.625em 0.625em 0.625em 1em; /* 1em left padding, 0.625em for other sides */
	background: #F8F7F0; /* Same background as song modal header */
	border-left: 0.25em solid #000000; /* Black left border */
	line-height: 1.5; /* Relative line height for sections */
}
.chordpro-section-title {
	font-weight: 700;
	color: #595959;
	margin-bottom: 0.625em; /* Use em units for responsive spacing */
	line-height: 1.2; /* Relative line height for section titles */
}
.chordpro-metadata a,
.chordpro-song a {
	color: #595959;
	text-decoration: underline;
	border-bottom: 1px dotted #595959;
	transition: all 0.2s ease;
}
.chordpro-metadata a:hover,
.chordpro-song a:hover {
	color: #454545;
	border-bottom: 1px solid #454545;
	background-color: rgba(89, 89, 89, 0.1);
}
.chordpro-metadata a:visited,
.chordpro-song a:visited {
	color: #6f42c1;
}
/*
 ┌─[ ⚙️ CONTROLS ]────────────────────┐
 │       INTERACTIVE CONTROLS          │
 └─────────────────────────────────────┘
   Buttons, sliders & user interface
*/

/* =====================================
   11. INTERACTIVE CONTROLS
   ===================================== */

/* Container for song control buttons - vertical stacking layout */
.song-controls {
	display: flex;
	flex-direction: column; /* Stack vertically */
	align-items: center;
	gap: 10px; /* Space between vertical sections */
	margin: 5px 10px;
	padding: 8px 0;
	border-bottom: 1px solid #eee;
	background: #fafafa;
	flex-shrink: 0;
	position: static;
	z-index: auto;
}

/* QR Code section styling */
.song-qr-code {
	text-align: center;
	padding: 10px;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #dee2e6;
	margin-bottom: 10px;
}

.qr-code-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.qr-code-label {
	font-size: 14px;
	color: #495057;
	font-weight: 600;
}

.qr-code-image {
	max-width: 150px;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Horizontal wrapper for key, nashville, transpose, and font controls */
.key-size-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

/* Song key display within controls - not sticky */
.song-key-display {
	display: flex;
	align-items: center;
	position: static;
	z-index: auto;
}

/* Transpose control group container */
.transpose-controls {
	display: flex;
	align-items: center;
	gap: 8px; /* Space between buttons */
	background: #e9ecef; /* Darkened by 10% from #f8f9fa */
	padding: 8px 12px;
	border-radius: 6px;
	border: 1px solid #dee2e6; /* Light border */
}
.transpose-controls label {
	font-size: 14px;
	font-weight: 700;
	color: #495057;
}
.transpose-btn {
	background: #595959;
	color: #fff;
	border: none;
	width: 30px;
	height: 30px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s;
}
.transpose-btn:hover {
	background: #454545;
}
.transpose-btn:active {
	transform: scale(0.95);
}
#transposeDisplay {
	background: #fff;
	border: 1px solid #dee2e6;
	padding: 4px 8px;
	border-radius: 3px;
	min-width: 25px;
	text-align: center;
	font-weight: 700;
	color: #495057;
}
.transpose-reset {
	background: #6c757d;
	color: #fff;
	border: none;
	padding: 6px 12px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	transition: background-color 0.2s;
}
.transpose-reset:hover {
	background: #545b62;
}
.font-size-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #e9ecef; /* Darkened by 10% from #f8f9fa */
	padding: 8px 12px;
	border-radius: 6px;
	border: 1px solid #dee2e6;
}
.font-size-controls label {
	font-size: 14px;
	font-weight: 700;
	color: #495057;
}
.font-size-btn {
	background: #595959;
	color: #fff;
	border: none;
	width: 30px;
	height: 30px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s;
}
.font-size-btn:hover {
	background: #454545;
}
.font-size-btn:active {
	transform: scale(0.95);
}
#fontSizeDisplay {
	background: #fff;
	border: 1px solid #dee2e6;
	padding: 4px 8px;
	border-radius: 3px;
	min-width: 40px;
	text-align: center;
	font-weight: 700;
	color: #495057;
	font-size: 12px;
}
.font-size-reset {
	background: #6c757d;
	color: #fff;
	border: none;
	padding: 6px 10px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 11px;
	transition: background-color 0.2s;
}
.font-size-reset:hover {
	background: #545b62;
}
.share-controls {
	display: flex;
	align-items: center;
	gap: 10px;
}
.share-btn {
	background: transparent;
	color: #595959;
	border: none;
	padding: 8px 12px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 5px;
}
.share-btn:hover {
	background: rgba(89, 89, 89, 0.1);
}
.share-btn:active {
	transform: scale(0.95);
}

/* Print button styling */
.print-btn {
	background: transparent;
	color: #595959;
	border: none;
	padding: 8px 12px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 5px;
}
.print-btn:hover {
	background: rgba(89, 89, 89, 0.1);
}
.print-btn:active {
	transform: scale(0.95);
}

/* Nashville Notation controls */
.nashville-controls {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nashville-controls label {
	font-size: 14px;
	font-weight: 700;
	color: #495057;
}

.nashville-slider-container {
	display: flex;
	align-items: center;
	gap: 8px;
}

.slider-label {
	font-size: 12px;
	font-weight: 600;
	color: #495057;
	min-width: 25px;
	text-align: center;
}

/* Toggle switch styling */
.nashville-switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
}

.nashville-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.nashville-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 24px;
}

.nashville-slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 50%;
}

input:checked + .nashville-slider {
	background-color: #595959;
}

input:focus + .nashville-slider {
	box-shadow: 0 0 1px #595959;
}

input:checked + .nashville-slider:before {
	-webkit-transform: translateX(20px);
	-ms-transform: translateX(20px);
	transform: translateX(20px);
}

/* Dark mode support for Nashville controls */
body.dark-mode .nashville-controls label {
	color: #e0e0e0;
}

body.dark-mode .slider-label {
	color: #e0e0e0;
}

body.dark-mode .nashville-slider {
	background-color: #555;
}

body.dark-mode input:checked + .nashville-slider {
	background-color: #707070;
}

/* Share playlist button */
.share-playlist-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 4px;
    transition: all 0.2s;
    color: #595959;
}

.share-playlist-btn:hover {
    background: rgba(89, 89, 89, 0.1);
}

/* Dark mode support for share playlist button */
body.dark-mode .share-playlist-btn {
    color: #707070;
}

body.dark-mode .share-playlist-btn:hover {
    background: rgba(112, 112, 112, 0.2);
}

/* Dark mode support for print button */
body.dark-mode .print-btn {
    color: #707070;
}

body.dark-mode .print-btn:hover {
    background: rgba(112, 112, 112, 0.2);
}
.share-notification {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: #28a745;
	color: #fff;
	padding: 12px 20px;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	z-index: 1001;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.3s ease;
}
.share-notification.show {
	opacity: 1;
	transform: translateY(0);
}

/* Auto-scroll controls - fixed to bottom of modal */
.auto-scroll-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: #e9ecef; /* Darkened by 10% from #f8f9fa */
	padding: 6px 10px; /* Reduced by 50% from 12px/20px */
	border-top: 1px solid #dee2e6;
	border-bottom: none;
	border-left: none;
	border-right: none;
	position: sticky;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	box-sizing: border-box;
	z-index: 50;
	border-radius: 0 0 8px 8px; /* Only round bottom corners */
	flex-shrink: 0;
}

.auto-scroll-controls label {
	font-size: 14px;
	font-weight: 700;
	color: #495057;
	white-space: nowrap;
}

.scroll-play-btn {
	background: #595959;
	color: #fff;
	border: none;
	width: 35px;
	height: 30px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s;
}

.scroll-play-btn:hover {
	background: #454545;
}

.scroll-play-btn.playing {
	background: #595959;
}

.scroll-play-btn.playing:hover {
	background: #454545;
}

.scroll-play-btn:focus {
	background: #595959;
	outline: none;
	box-shadow: 0 0 0 2px rgba(89, 89, 89, 0.3);
}

.scroll-play-btn:active {
	background: #454545;
}

.scroll-play-btn.playing:focus {
	background: #595959;
	outline: none;
	box-shadow: 0 0 0 2px rgba(89, 89, 89, 0.3);
}

.scroll-play-btn.playing:active {
	background: #454545;
}

.scroll-speed-slider {
	width: 75%;
	height: 6px;
	border-radius: 3px;
	background: #dee2e6;
	outline: none;
	-webkit-appearance: none;
	cursor: pointer;
}

/* Tablet-specific scroll slider width adjustment */
@media (max-width: 1024px) and (min-width: 769px) {
	.scroll-speed-slider {
		width: 65%; /* Reduced by 10% from 75% for tablets */
	}
}

/* Mobile-specific scroll slider width adjustment */
@media (max-width: 768px) {
	.scroll-speed-slider {
		width: 45%; /* Reduced by 30% from 75% for mobile */
	}
}

.scroll-speed-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #595959;
	cursor: pointer;
	border: 2px solid #fff;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.scroll-speed-slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #595959;
	cursor: pointer;
	border: 2px solid #fff;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

#scrollSpeedDisplay {
	background: #fff;
	border: 1px solid #dee2e6;
	padding: 4px 6px;
	border-radius: 3px;
	min-width: 25px;
	text-align: center;
	font-weight: 700;
	color: #495057;
	font-size: 12px;
}
/*
 ┌─[ 🌙/☀️ ]──────────────────────────┐
 │      THEME TOGGLE & DARK MODE       │
 └─────────────────────────────────────┘
   Light/dark theme switching
*/

/* =====================================
   12. THEME TOGGLE & DARK MODE
   ===================================== */

/* Theme toggle button styling */
.theme-toggle button {
	background: #595959; /* Brand grey */
	color: #fff; /* White text */
	border: none;
	padding: 8px 15px;
	border-radius: 20px; /* Pill shape */
	cursor: pointer;
	font-size: 14px;
	transition: all 0.3s ease; /* Smooth transitions */
	display: flex;
	align-items: center;
	gap: 8px; /* Space between icon and text */
}

/* Theme toggle hover effect */
.theme-toggle button:hover {
	background: #454545; /* Darker grey */
	transform: scale(1.05); /* Slightly larger */
}
/*
 ┌─[ 🌙 DARK MODE ]───────────────────┐
 │          DARK MODE THEME            │
 └─────────────────────────────────────┘
   Dark theme color overrides
*/

/* =====================================
   DARK MODE THEME
   ===================================== */

/* Dark mode body styling */
body.dark-mode {
	background: #1a1a1a; /* Dark background */
	color: #e0e0e0; /* Light text */
}
body.dark-mode .container {
	background: #2d2d2d;
	color: #e0e0e0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
body.dark-mode h1 {
	color: #fff;
	border-bottom-color: #707070;
}
body.dark-mode .stats {
	background: #3a3a3a;
	color: #e0e0e0;
}
body.dark-mode .welcome-message {
	color: #e0e0e0; /* Light text for dark mode */
}

body.dark-mode .welcome-message a {
	color: #707070; /* Lighter grey for better contrast in dark mode */
}

body.dark-mode .welcome-message a:hover {
	color: #808080; /* Even lighter grey on hover */
}
body.dark-mode .tab {
	background: #404040;
	color: #e0e0e0;
	border-color: #555;
}
body.dark-mode .tab.active {
	background: #707070;
	color: #fff;
}
body.dark-mode .song {
	background: #3a3a3a;
	border-left-color: #707070;
	color: #e0e0e0;
}
body.dark-mode .song:hover {
	background: #404040 !important;
}
body.dark-mode .song-title {
	color: #fff;
}
body.dark-mode .song-artist {
	color: #b0b0b0;
}
body.dark-mode .song-key {
	background: #707070;
}
/* Dark mode support for search */
body.dark-mode .search {
	background: #2d2d2d;
	border-bottom-color: #555;
}

body.dark-mode .search input {
	background: #404040;
	border-color: #555;
	color: #e0e0e0;
}

body.dark-mode .search input:focus {
	border-color: #707070;
	box-shadow: 0 0 0 3px rgba(112, 112, 112, 0.1);
}

body.dark-mode .search input::placeholder {
	color: #888;
}

body.dark-mode .search button {
	background: #555;
	color: #e0e0e0;
}

body.dark-mode .search button:hover {
	background: #666;
}

/* About page specific styles */
.about-main-section {
	background: #fff;
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	margin-bottom: 30px;
}

.about-section-header {
	color: #595959;
	border-bottom: 2px solid #595959;
	padding-bottom: 10px;
	margin-top: 0;
}

.about-subsection-header {
	color: #595959;
	margin-top: 30px;
}

.about-callout {
	background: #f0f0f0;
	padding: 20px;
	border-radius: 8px;
	margin: 30px 0;
	border-left: 4px solid #595959;
}

.about-callout-header {
	color: #595959;
	margin-top: 0;
}

.about-footer {
	text-align: center;
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid #eee;
	color: #666;
}

.about-version {
	margin: 5px 0 0 0;
	font-size: 14px;
}

/* Dark mode support for about page */
body.dark-mode .about-main-section {
	background: #3a3a3a;
	color: #e0e0e0;
	box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

body.dark-mode .about-section-header {
	color: #707070;
	border-bottom-color: #707070;
}

body.dark-mode .about-subsection-header {
	color: #707070;
}

body.dark-mode .about-callout {
	background: #2d4a5a;
	border-left-color: #707070;
}

body.dark-mode .about-callout-header {
	color: #707070;
}

body.dark-mode .about-footer {
	border-top-color: #555;
	color: #b0b0b0;
}

/*
| ┌─[ 📱 MOBILE HEADER ]──────────────────┐
| │      MOBILE HEADER LAYOUT             │
| └───────────────────────────────────────┘
|   Mobile-specific header positioning
*/

/* Header controls container */
.header-controls {
	display: flex;
	justify-content: center; /* Center everything horizontally */
	align-items: center;
	margin-bottom: 20px;
	flex-wrap: wrap;
	gap: 15px; /* Slightly larger gap for better spacing */
	text-align: center; /* Center text content */
}

.emoji-header {
	margin: 0;
	text-align: center; /* Ensure emoji header is centered */
}

/* Navigation links container */
.nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px; /* Slightly larger gap for better visual separation */
	flex-wrap: wrap;
}

/* Theme toggle container - ensure it's centered */
.theme-toggle {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Individual navigation link styling */
.nav-link {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 6px;
	text-decoration: underline;
	color: #333;
	font-size: 14px;
	font-weight: 500;
	border: 1px solid transparent;
}

.nav-link:hover {
	background: #f0f8ff;
	border-color: #595959;
	color: #595959;
	transform: translateY(-1px);
}

.nav-link svg {
	transition: transform 0.2s ease;
}

.nav-link:hover svg {
	transform: scale(1.1);
}

/* External link styling (Buy Me a Coffee) */
.nav-link[target="_blank"] {
	background: #ffdd44;
	color: #000;
	border-color: #ffdd44;
}

.nav-link[target="_blank"]:hover {
	background: #ffcc22;
	border-color: #ffcc22;
	color: #000;
}

/* Dark mode support for navigation links */
body.dark-mode .nav-link {
	color: #e0e0e0;
}

body.dark-mode .nav-link:hover {
	background: rgba(112, 112, 112, 0.2);
	border-color: #707070;
	color: #707070;
}

/* Dark mode for external links (Buy Me a Coffee) */
body.dark-mode .nav-link[target="_blank"] {
	background: #ffdd44;
	color: #000;
	border-color: #ffdd44;
}

body.dark-mode .nav-link[target="_blank"]:hover {
	background: #ffcc22;
	border-color: #ffcc22;
	color: #000;
}

/* Mobile-specific header layout */
@media (max-width: 768px) {
	.header-controls {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 15px;
	}

	.emoji-header {
		font-size: 18px;
		margin: 0;
		order: 1;
	}

	.theme-toggle {
		order: 2;
		display: flex;
		justify-content: center;
	}
}
body.dark-mode .modal-content {
	background: #3a3a3a; /* Lighter background for better contrast */
	color: #e0e0e0;
}
body.dark-mode .song-header {
	border-bottom-color: #707070;
	background: #3a3a3a; /* Match modal background */
}

body.dark-mode .close {
	color: #e0e0e0; /* Light color for visibility */
	opacity: 0.5; /* 50% lighter in dark mode too */
}

body.dark-mode .close:hover {
	opacity: 1; /* Full opacity on hover in dark mode */
	color: #fff; /* White on hover */
	background: rgba(255,255,255,0.1); /* Light background on hover */
}
body.dark-mode .song-modal-title {
	color: #fff;
}
body.dark-mode .song-modal-artist {
	color: #b0b0b0;
}
body.dark-mode .song-modal-key {
	background: #707070;
}
body.dark-mode .chordpro-song {
	color: #e0e0e0;
	background: #3a3a3a; /* Lighter background for song content */
}
body.dark-mode .chordpro-metadata {
	color: #e0e0e0;
}
body.dark-mode .chordpro-title {
	color: #fff;
}
body.dark-mode .chordpro-subtitle {
	color: #b0b0b0;
}
body.dark-mode .chordpro-artist {
	color: #a0a0a0;
}
body.dark-mode .chordpro-lyrics {
	color: #e0e0e0;
}
body.dark-mode .chordpro-line {
	color: #e0e0e0;
}
body.dark-mode .chordpro-chord {
	color: #808080;
}
body.dark-mode .chordpro-text {
	color: #e0e0e0;
}
body.dark-mode .chordpro-comment {
	color: #b0b0b0;
}
body.dark-mode .chordpro-section {
	background: #404040;
	border-left-color: #707070;
}
body.dark-mode .chordpro-section-title {
	color: #707070;
}
body.dark-mode .chordpro-metadata a,
body.dark-mode .chordpro-song a {
	color: #808080;
	border-bottom-color: #808080;
}
body.dark-mode .chordpro-metadata a:hover,
body.dark-mode .chordpro-song a:hover {
	color: #707070;
	border-bottom-color: #707070;
	background-color: rgba(112, 112, 112, 0.2);
}
body.dark-mode .song-controls {
	background: #404040; /* Slightly darker than song content for contrast */
	border-bottom-color: #555;
}

/* Dark mode support for QR code section */
body.dark-mode .song-qr-code {
	background: #404040;
	border-color: #555;
}

body.dark-mode .qr-code-label {
	color: #e0e0e0;
}
body.dark-mode .transpose-controls {
	background: #404040;
	border-color: #555;
}
body.dark-mode .transpose-controls label {
	color: #e0e0e0;
}
body.dark-mode #transposeDisplay {
	background: #3a3a3a;
	border-color: #555;
	color: #e0e0e0;
}
body.dark-mode .font-size-controls {
	background: #404040;
	border-color: #555;
}
body.dark-mode .font-size-controls label {
	color: #e0e0e0;
}
body.dark-mode #fontSizeDisplay {
	background: #3a3a3a;
	border-color: #555;
	color: #e0e0e0;
}
body.dark-mode .playlist {
	background: #3a3a3a;
	border-color: #555;
}
body.dark-mode .playlist-header:hover {
	background: rgba(112, 112, 112, 0.1);
}
body.dark-mode .playlist-toggle {
	color: #e0e0e0;
}
body.dark-mode .playlist-name {
	color: #e0e0e0;
}
body.dark-mode .track-count {
	color: #b0b0b0;
}
body.dark-mode .playlist-track a:hover {
	background: rgba(112, 112, 112, 0.2);
}
body.dark-mode .track-title {
	color: #e0e0e0;
}
body.dark-mode .track-artist {
	color: #b0b0b0;
}
body.dark-mode .track-key {
	background: #707070;
}
body.dark-mode .track-missing {
	color: #888;
}
body.dark-mode .track-status {
	color: #ff6b6b;
}

/*
 ╔═══════════════════════════════════════╗
 ║           CHORD GRID STYLES           ║
 ╚═══════════════════════════════════════╝
   ChordPro chord grid tables & formatting
*/

/* =====================================
   CHORD GRID STYLES
   ===================================== */

/* Main grid container */
.chordpro-grid {
	margin: 1em 0;
	font-family: monospace;
}

/* Grid section label */
.chordpro-grid-label {
	font-weight: bold;
	margin-bottom: 0.5em;
	color: #666;
	font-style: italic;
}

/* Grid table styling - inherits font size from parent container */
.chordpro-grid-table {
	border-collapse: collapse;
	margin: 0;
	font-size: 0.9em; /* Same as inline chords - will scale with container */
	background: #f9f9f9;
	border: 2px solid #333;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; /* Same as other elements */
	min-width: 200px;
}

/* Grid table rows */
.chordpro-grid-row {
	border-bottom: 1px solid #ddd;
}

/* Grid table cells */
.chordpro-grid-cell {
	border: 1px solid #ccc;
	padding: 8px 12px;
	text-align: center;
	min-width: 60px;
	font-weight: bold;
	vertical-align: middle;
}

/* Regular chord cells - same styling as inline chords */
.chordpro-grid-chord {
	background: #fff;
	color: #666; /* Same grey as inline chords */
	font-weight: 700; /* Same weight as inline chords */
}

/* Repeat/continuation symbols */
.chordpro-grid-repeat {
	background: #f0f0f0;
	color: #666;
	font-style: italic;
	font-weight: normal;
}

/* Rest/empty beat cells */
.chordpro-grid-rest {
	background: #f8f8f8;
	color: #999;
	font-weight: normal;
}

/* Responsive design for grids - relative sizing to maintain consistency */
@media (max-width: 768px) {
	.chordpro-grid-table {
		font-size: 0.8em; /* Slightly smaller but still relative */
	}

	.chordpro-grid-cell {
		padding: 6px 8px;
		min-width: 50px;
	}

	.chordpro-grid-label {
		font-size: 0.9em; /* Relative sizing */
	}
}

/* ChordPro tab sections - monospace for tablature */
.chordpro-tab {
	font-family: 'Courier New', Consolas, 'Liberation Mono', Monaco, 'Lucida Console', monospace;
	font-size: 0.9em;
	line-height: 1.3;
	white-space: pre;
	background: #f8f9fa;
	padding: 12px 16px;
	margin: 1em 0;
	border-radius: 4px;
	border: 1px solid #e0e0e0;
	overflow-x: auto;
	color: #333;
}

/* Dark mode support for tab sections */
body.dark-mode .chordpro-tab {
	background: #2a2a2a;
	border-color: #555;
	color: #e0e0e0;
}

/* Dark mode support for chord grids - improved contrast */
body.dark-mode .chordpro-grid-table {
	background: #2a2a2a; /* Lighter background for better readability */
	border-color: #666; /* Lighter border for visibility */
}

body.dark-mode .chordpro-grid-cell {
	border-color: #555; /* Lighter border for visibility */
}

body.dark-mode .chordpro-grid-chord {
	background: #404040; /* Lighter background for chord cells */
	color: #b0b0b0; /* Light grey for good contrast */
	font-weight: 700; /* Bold for better visibility */
}

body.dark-mode .chordpro-grid-repeat {
	background: #333; /* Lighter for better contrast */
	color: #e0e0e0; /* Much lighter for better visibility */
}

body.dark-mode .chordpro-grid-rest {
	background: #353535; /* Lighter background */
	color: #b0b0b0; /* Lighter text for better contrast */
}

body.dark-mode .chordpro-grid-label {
	color: #e0e0e0; /* Much lighter for better visibility */
}

/* Print styles - focus only on song modal when printing */
@media print {
    body.printing > *:not(#songModal) {
        display: none !important;
    }

    body.printing #songModal {
        display: block !important;
        position: static !important;
        background: white !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        color: black !important;
    }

    body.printing #songModal .modal-content {
        margin: 0 !important;
        padding: 20px !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        background: white !important;
        color: black !important;
    }

    body.printing #songModal .song-header {
        position: static !important;
        box-shadow: none !important;
        border-bottom: 2px solid black !important;
        background: white !important;
        color: black !important;
        margin-bottom: 20px !important;
    }

    body.printing #songModal .song-controls,
    body.printing #songModal .auto-scroll-controls,
    body.printing #songModal .close {
        display: none !important;
    }

    body.printing #songModal .chordpro-song {
        padding: 0 !important;
        background: white !important;
        color: black !important;
        font-size: 11pt !important;
        line-height: 1.3 !important;
        overflow: visible !important;
        /* Two-column layout for print */
        column-count: 2;
        column-gap: 30px;
        column-rule: 1px solid #ddd;
        column-fill: balance;
    }

    body.printing #songModal .chordpro-chord {
        color: black !important;
        font-weight: bold !important;
    }

    body.printing #songModal .chordpro-line {
        break-inside: avoid;
        page-break-inside: avoid;
        margin: 0.2em 0 0.4em 0 !important;
    }

    body.printing #songModal .chordpro-section {
        break-inside: avoid;
        page-break-inside: avoid;
        margin-top: 1em !important;
    }

    body.printing #songModal .chordpro-comment {
        color: #333 !important;
        font-style: italic !important;
        page-break-after: avoid;
    }

    body.printing #songModal .song-modal-title,
    body.printing #songModal .song-modal-artist,
    body.printing #songModal .song-modal-key {
        color: black !important;
        background: none !important;
    }

    /* Print styles for chord grids when printing */
    body.printing .chordpro-grid-table {
        border: 1px solid #000;
        page-break-inside: avoid;
        background: #fff !important;
    }

    body.printing .chordpro-grid-cell {
        border: 0.5px solid #000;
        background: #fff !important;
        color: #000 !important;
    }

    body.printing .chordpro-grid-repeat {
        background: #f5f5f5 !important;
    }

    /* Single column for narrow pages (like mobile print or small paper) */
    @media print and (max-width: 6in) {
        body.printing #songModal .chordpro-song {
            column-count: 1 !important;
            column-rule: none !important;
        }
    }

    /* Ensure chord grids don't break across columns */
    body.printing .chordpro-grid-table {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/*
 ╔═══════════════════════════════════════╗
 ║             END OF STYLES             ║
 ║      🎵 TIVOLI HOOT JUKEBOX 🎵        ║
 ╚═══════════════════════════════════════╝
   Total sections: 13 | Lines: ~1150
*/

/* =====================================
/* Playlist actions container */
.playlist-actions {
    display: flex;
    gap: 5px;
}

/* Copy playlist button */
.copy-playlist-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 4px;
    transition: all 0.2s;
    color: #595959;
}

.copy-playlist-btn:hover {
    background: rgba(89, 89, 89, 0.1);
}

/* Dark mode support for copy playlist button */
body.dark-mode .copy-playlist-btn {
    color: #707070;
}

body.dark-mode .copy-playlist-btn:hover {
    background: rgba(112, 112, 112, 0.2);
}

/*
 ╔═══════════════════════════════════════╗
 ║          PWA & SPLASH SCREEN          ║
 ╚═══════════════════════════════════════╝
   Progressive Web App loading screens
*/

/* =====================================
   13. PWA & SPLASH SCREEN
   ===================================== */

/* PWA Splash Screen - full screen overlay */
.pwa-splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f5 0%, #f0f0f0 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

/* Splash screen hidden state */
.pwa-splash.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Splash screen logo/icon */
.splash-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: pulse 2s infinite;
}

/* Splash screen title */
.splash-title {
    font-family: Arial, sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
    text-align: center;
}

/* Splash screen subtitle */
.splash-subtitle {
    font-family: Arial, sans-serif;
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 2rem;
    text-align: center;
}

/* Loading progress container */
.splash-progress {
    width: 300px;
    height: 4px;
    background: rgba(89, 89, 89, 0.2);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 1rem;
}

/* Loading progress bar */
.splash-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #595959, #707070);
    border-radius: 2px;
    width: 0%;
    transition: width 0.3s ease;
    animation: shimmer 2s infinite;
}

/* Loading text */
.splash-loading-text {
    font-family: Arial, sans-serif;
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    min-height: 1.2rem;
}

/* Mobile responsive splash */
@media (max-width: 768px) {
    .splash-title {
        font-size: 2rem;
    }

    .splash-subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .splash-icon {
        font-size: 3rem;
    }

    .splash-progress {
        width: 250px;
    }
}

/* Dark mode splash screen */
body.dark-mode .pwa-splash {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

body.dark-mode .splash-title {
    color: #fff;
}

body.dark-mode .splash-subtitle {
    color: #e0e0e0;
}

body.dark-mode .splash-loading-text {
    color: #e0e0e0;
}

body.dark-mode .splash-progress {
    background: rgba(112, 112, 112, 0.2);
}

/* Pulse animation for splash icon */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* Shimmer animation for progress bar */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.splash-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: shimmer 2s infinite;
}

/* PWA Install Prompt */
.pwa-install-prompt {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #595959;
    color: white;
    padding: 12px 20px;
    border-radius: 25px;
    box-shadow: 0 4px 12px rgba(89, 89, 89, 0.3);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    max-width: calc(100vw - 40px);
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    transition: all 0.3s ease;
    pointer-events: none;
}

/* Mobile responsive PWA install prompt */
@media (max-width: 768px) {
    .pwa-install-prompt {
        max-width: 90vw;
        left: 5vw;
        transform: translateX(0) translateY(20px);
        font-size: 13px;
        padding: 10px 15px;
        gap: 8px;
    }

    .pwa-install-prompt.show {
        transform: translateX(0) translateY(0);
    }
}

.pwa-install-prompt.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: all;
}

.pwa-install-prompt button {
    background: transparent;
    border: 1px solid white;
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.pwa-install-prompt button:hover {
    background: white;
    color: #595959;
}

.pwa-install-prompt .dismiss {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    margin-left: 5px;
}

/* Offline Status Indicator */
.offline-indicator {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: #dc3545;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    z-index: 1001;
    display: none;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
    max-width: calc(100vw - 40px);
}

/* Mobile responsive offline indicator */
@media (max-width: 768px) {
    .offline-indicator {
        max-width: 90vw;
        left: 5vw;
        transform: translateX(0);
        font-size: 11px;
        padding: 6px 12px;
    }
}

.offline-indicator.show {
    display: block;
    animation: slideDown 0.3s ease;
}

/* Cache Status Indicator */
.cache-status {
    position: fixed;
    bottom: 70px;
    right: 20px;
    background: #28a745;
    color: white;
    padding: 8px 12px;
    border-radius: 15px;
    font-size: 11px;
    z-index: 999;
    display: none;
    max-width: 200px;
}

.cache-status.show {
    display: block;
    animation: slideIn 0.3s ease;
}

/* Slide animations */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

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

/* PWA Update Available Notification */
.update-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    max-width: 350px;
    animation: slideIn 0.3s ease;
}

/* Dark mode PWA elements */
body.dark-mode .pwa-install-prompt {
    background: #707070;
}

body.dark-mode .offline-indicator {
    background: #ff6b6b;
}

body.dark-mode .cache-status {
    background: #51cf66;
}

/* =====================================
   14. UTILITY CLASSES
   ===================================== */

/* Stats metadata styling */
.stats-metadata {
    color: #666;
    margin-top: 5px;
    display: block;
}

/* Stats action link styling */
.stats-action-link {
    color: #595959;
    text-decoration: underline;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #595959;
    font-size: 11px;
    transition: all 0.2s;
}

.stats-action-link:hover {
    background: #595959;
    color: white;
}

/* Dark mode support for stats metadata */
body.dark-mode .stats-metadata {
    color: #b0b0b0;
}

body.dark-mode .stats-action-link {
    color: #707070;
    border-color: #707070;
}

body.dark-mode .stats-action-link:hover {
    background: #707070;
    color: #2d2d2d;
}

/* =====================================
   15. CHORDPRO IMAGE STYLES
   ===================================== */

/* CSS variables for images */
:root {
    --background-color: #FFFEF9;
    --border-color: #D8D5CE;
}

/* Dark mode CSS variables */
body.dark-mode {
    --background-color: #2d2d2d;
    --border-color: #555;
}

/* ChordPro Image Container */
.chordpro-image-container {
    margin: 15px 0;
    text-align: left;
    padding: 10px;
    background: var(--background-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

/* ChordPro Image Error Container */
.chordpro-image-error-container {
    background: #fff3cd;
    border-color: #ffeaa7;
}

/* ChordPro Image Error Message */
.chordpro-image-error {
    color: #856404;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    padding: 5px;
    text-align: center;
}

.chordpro-image-error .error-icon {
    font-size: 18px;
    vertical-align: middle;
}

.chordpro-image-error .error-message {
    font-weight: 600;
}

.chordpro-image-error .error-path {
    font-style: italic;
    color: #6c757d;
    font-size: 12px;
}

/* Dark mode support for image errors */
body.dark-mode .chordpro-image-error-container {
    background: #3d3d2a;
    border-color: #5d5d3a;
}

body.dark-mode .chordpro-image-error {
    color: #ffc107;
}

body.dark-mode .chordpro-image-error .error-path {
    color: #adb5bd;
}

/* ChordPro Image Element */
.chordpro-image {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chordpro-image:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

/* Responsive image sizing */
@media (max-width: 768px) {
    .chordpro-image-container {
        margin: 10px 0;
        padding: 8px;
    }
    
    .chordpro-image {
        max-width: 100%;
        width: auto;
    }
}

/* Dark mode adjustments for images */
body.dark-mode .chordpro-image-container {
    background: #2d2d2d;
    border-color: #555;
}

body.dark-mode .chordpro-image {
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

body.dark-mode .chordpro-image:hover {
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15);
}

/* Print styles for images */
@media print {
    .chordpro-image-container {
        margin: 10px 0;
        padding: 5px;
        border: 1px solid #ccc;
        background: white;
    }
    
    .chordpro-image {
        max-width: 100%;
        height: auto;
        box-shadow: none;
    }
}

/* END OF STYLESHEET
   ===================================== */