:root { 
			--bg: #0f0f0f; 
			--card: #1a1a1a; 
			--primary: #3498db; 
			--text: #e0e0e0; 
		}
		
		* {
			box-sizing: border-box;
		}
		
		body {
			margin: 0;
			padding: 0px;
			display: flex;
			flex-direction: column;
			min-height: 100vh;
			background: #121212;
			color: #eee;
			font-family: 'Inter', sans-serif;
			overflow-x: hidden;
		}
		
		.main-content {
			flex: 1;
			padding: 20px;
		}
		
		select { 
			background: #222; 
			color: white; 
			border: 1px solid #444; 
			padding: 0.8rem; 
		}
		
		textarea { 
			background: #222; 
			color: white; 
			border: 1px solid #444; 
			padding: 0.8rem;
			width: 40%;
		}
		
		input { 
			width: 40%; 
			padding: 0.6rem; 
			margin: 0.5rem 0; 
			background: #222; 
			border: 1px solid #444; 
			color: white; 
			border-radius: 4px; 
			box-sizing: border-box; 
		}
		
		label { 
			display: block; 

			color: #888; 
			font-weight: bold; 
		}
		
		a.dl-link:link { color: #BD8235; }
		a.dl-link:visited { color: #DEAE73; }
		a.dl-link:hover { color: #3570BD; }
		
		.prj-notes {
			width: 38%;
		}
		
		.sharelink {
			color: #27BBF5;
		}
		
		.navlink {
			color: var(--primary); 
			text-decoration: none;
		}
		
		.navbar {
			background: #111; 
			padding: 10px 20px; 
			display: flex; 
			justify-content: space-between; 
			border-bottom: 1px solid #333; 
			
		}
		
		.footer {
			background: #111; 
			padding: 10px 20px; 
			margin-top: auto;
			display: flex; 
			justify-content: center; 
			gap: 20px; 
			border-top: 1px solid #333; 
		}

		.login-container {
			flex-grow: 1; 
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20px;
		}

		.login-card { 
			background: #1e1e1e; 
			padding: 2.5rem; 
			border-radius: 12px; 
			border: 1px solid #333; 
			width: 350px; 
			text-align: center; 
			box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
		}
		
        .container { 
			max-width: 900px; 
			margin: 0 auto; 
		}
		
        .player-card { 
			background: var(--card); 
			padding: 30px; 
			border-radius: 12px; 
			border: 1px solid #333; 
		}
		
        #waveform { 
			width: 100%; 
			height: 128px; 
			cursor: pointer; 
			margin: 20px 0; 
		}
		
        .controls { 
			display: flex; 
			gap: 15px; 
			align-items: center; 
		}

        .card { 
			background: #1e1e1e; 
			padding: 1rem; 
			border-radius: 8px; 
			margin-bottom: 0.5rem; 
			border: 1px solid #333; 
		}
		
        .flex { 
			display: flex; 
			justify-content: space-between; 
			align-items: center; 
		}
        
		.error { 
			color: #e74c3c; 
			font-size: 0.9rem; 
			margin-bottom: 1rem; 
		}
		
        .comment-section { margin-top: 40px; }
		
        .comment { 
			background: #252525; 
			padding: 15px; 
			border-radius: 8px; 
			margin-bottom: 10px; 
			border-left: 4px solid var(--primary); 
		}
		
        .timestamp { 
			color: var(--primary); 
			font-weight: bold; 
			margin-right: 10px; 
			cursor: pointer; 
		}
		
		.version-row { 
			background: #1e1e1e; 
			padding: 1rem; 
			border-radius: 8px; 
			margin-bottom: 1rem; 
			border-left: 4px solid #3498db; 
		}
		
		.project-notes {
			font-style: italic;
			color: #aaa;
			line-height: 1.6;
			border-left: 2px solid #444;
			padding-left: 15px;
			margin: 15px 0;
			font-size: 0.95rem;
		}

		.version-badge {
			display: inline-block;
			background: #2c3e50;
			color: #3498db;
			padding: 2px 8px;
			border-radius: 4px;
			font-size: 0.75rem;
			font-weight: bold;
			text-transform: uppercase;
			margin-right: 10px;
			border: 1px solid #3498db;
		}

		.changelog-box {
			background: #222;
			padding: 12px 15px;
			border-radius: 6px;
			margin-top: 15px;
			font-size: 0.9rem;
			border: 1px dashed #444;
		}
		
		.version-list { 
			display: flex; 
			flex-direction: column; 
			gap: 10px; 
		}
		
		.version-row { 
			background: #1a1a1a; padding: 15px; border-radius: 6px; 
			display: flex; justify-content: space-between; align-items: center; 
			border: 1px solid #333; 
		}
		
		.version-row.active { border-left: 4px solid var(--primary); }
		
		.active-badge { 
			color: var(--primary); 
			font-size: 0.8rem; 
			font-weight: bold; 
		}
		
		.status-badge {
			font-size: 0.7rem; 
			color: #888;
		}
				
		/* Buttons */
		.button-group {
			display: flex;
			gap: 10px; /* This creates the space between the buttons */
			margin-top: 20px;
		}
		
		.btn { 
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background: var(--primary); 
			color: white; 
			border: none; 
			padding: 8px 16px; 
			border-radius: 6px; 
			cursor: pointer; 
			font-weight: bold;
			text-decoration: none;
			font-size: 0.9rem;
		}

		.btn-sm { 
			padding: 4px 10px; 
			font-size: 0.8rem;
		}

		.btn-alt { 
			background: #444; 
		}

		.btn-danger {
			background: #c0392b;
		}
		
		.triage-btn {
			background: #333;
			border: 1px solid #444;
			cursor: pointer;
			border-radius: 4px;
			padding: 2px 6px;
			transition: background 0.2s;
		}
		
		.triage-btn:hover { background: #555; }
		
		.checkbox {
			width: 25px;
		}
		
		.hr {
		border: 0.5px solid #333; 
		margin: 2rem 0;
		}

		/* Player / playlists */
		[hidden] { display: none !important; }

		.multiline { white-space: pre-line; }

		.track-artist {
			color: #888;
			margin-bottom: 10px;
		}

		.playlist-label {
			color: var(--primary);
			font-size: 0.8rem;
			font-weight: bold;
			text-transform: uppercase;
			letter-spacing: 0.05em;
			margin-bottom: 8px;
		}

		.playlist-title { margin: 0 0 5px; }

		.tracklist {
			list-style: none;
			padding: 0;
			margin: 0;
			counter-reset: track;
		}

		.tracklist-item {
			counter-increment: track;
			display: flex;
			gap: 12px;
			align-items: baseline;
			padding: 10px 15px;
			border-radius: 6px;
			cursor: pointer;
			border-left: 4px solid transparent;
		}

		.tracklist-item::before {
			content: counter(track);
			color: #666;
			min-width: 1.5em;
			text-align: right;
		}

		.tracklist-item:hover { background: #222; }
		.tracklist-item.active { background: #1e1e1e; border-left-color: var(--primary); }
		.tracklist-item.active .tracklist-title { color: var(--primary); }

		.tracklist-title { font-weight: bold; }
		.tracklist-artist { color: #888; flex-grow: 1; }
		.tracklist-meta { color: #666; font-size: 0.8rem; }

		/* Admin: warnings & playlist editing */
		.warning-card {
			border-color: #BD8235;
			border-left: 4px solid #BD8235;
		}

		.warning-card p { color: #aaa; }

		.notice-inline {
			color: #BD8235;
			font-size: 0.8rem;
			margin-top: 4px;
		}

		.private-badge {
			font-size: 0.7rem;
			color: #BD8235;
			border: 1px solid #BD8235;
			border-radius: 4px;
			padding: 1px 6px;
			margin-left: 8px;
		}

		.playlist-item-row { gap: 10px; flex-wrap: wrap; }

		.copy-link {
			cursor: pointer;
			font-size: 0.8em;
			margin-left: 10px;
		}

		button:disabled { opacity: 0.3; cursor: default; }

		/* Drag-and-drop reordering */
		.drag-handle {
			cursor: grab;
			color: #666;
			font-size: 1.2rem;
			padding: 0 6px;
			user-select: none;
			touch-action: none; /* let the finger drag the row instead of scrolling the page */
		}
		.drag-handle:hover { color: #fff; }

		.upload-row, .playlist-item-row { transition: box-shadow 0.15s, transform 0.15s, background 0.15s, border-color 0.15s; }

		/* hovering the handle hints that the whole row is what moves */
		.upload-row:has(.drag-handle:hover), .playlist-item-row:has(.drag-handle:hover) {
			background: #222;
			border-color: #555;
		}

		/* the row being dragged looks lifted off the list */
		.upload-row.dragging, .playlist-item-row.dragging {
			position: relative;
			z-index: 10;
			background: #262b30;
			border-color: var(--primary);
			box-shadow: 0 0 0 2px var(--primary), 0 10px 28px rgba(0, 0, 0, 0.7);
			transform: scale(1.015);
		}
		.dragging .drag-handle { color: var(--primary); }

		body.is-sorting, body.is-sorting * { cursor: grabbing !important; user-select: none; }

		/* Bulk upload */
		.drop-zone {
			border: 2px dashed #444;
			border-radius: 10px;
			padding: 30px 20px;
			text-align: center;
			cursor: pointer;
			display: flex;
			flex-direction: column;
			gap: 6px;
			color: #aaa;
			transition: border-color 0.2s, background 0.2s;
		}
		.drop-zone:hover, .drop-zone:focus, .drop-zone.dragover {
			border-color: var(--primary);
			background: #222;
			outline: none;
		}
		.drop-zone small { color: #777; }
		.drop-zone.disabled { opacity: 0.4; pointer-events: none; }

		.bulk-apply, .bulk-playlist {
			display: flex;
			gap: 10px;
			align-items: center;
			flex-wrap: wrap;
			margin: 15px 0;
			color: #aaa;
		}
		.bulk-apply input, .bulk-playlist input[type="text"] { width: auto; margin: 0; }

		.upload-row {
			background: #1a1a1a;
			border: 1px solid #333;
			border-left: 4px solid #444;
			border-radius: 6px;
			padding: 12px;
			margin-bottom: 10px;
		}
		.upload-row.is-uploading { border-left-color: var(--primary); }
		.upload-row.is-done { border-left-color: #27ae60; }
		.upload-row.is-error { border-left-color: #c0392b; }

		.upload-head {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-bottom: 6px;
		}
		.upload-head .drag-handle { padding-left: 0; }
		.upload-head .remove-row { margin-left: auto; flex-shrink: 0; }
		.upload-file { color: #ccc; font-weight: bold; min-width: 0; overflow-wrap: anywhere; }
		.upload-file small { color: #777; font-weight: normal; }

		.upload-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 0 10px;
		}
		.upload-grid input, .upload-grid textarea { width: 100%; margin: 4px 0; }
		.upload-grid input, .upload-grid textarea { font: inherit; font-size: 0.9rem; }
		.upload-grid textarea { resize: vertical; }
		.upload-dl { display: flex; align-items: center; gap: 6px; font-weight: normal; font-size: 0.85rem; }
		.upload-dl input { width: auto; }

		input.invalid, textarea.invalid { border-color: #c0392b; }

		.upload-progress {
			height: 6px;
			background: #2a2a2a;
			border-radius: 3px;
			overflow: hidden;
			margin-top: 8px;
			display: none;
		}
		.upload-progress.active { display: block; }
		.upload-progress-bar {
			height: 100%;
			width: 0;
			background: var(--primary);
			transition: width 0.2s;
		}
		.is-done .upload-progress-bar { background: #27ae60; }
		.is-error .upload-progress-bar { background: #c0392b; }

		.upload-status { font-size: 0.8rem; color: #aaa; margin-top: 4px; }
		.upload-status:empty { display: none; }
		.is-done .upload-status { color: #27ae60; }
		.is-error .upload-status { color: #e74c3c; }

		.upload-summary {
			margin-top: 15px;
			padding: 10px 15px;
			border-radius: 6px;
			background: #1a2a1f;
			border: 1px solid #27ae60;
		}
		.upload-summary.error { background: #2a1a1a; border-color: #c0392b; }

		@media (max-width: 700px) {
			.upload-grid { grid-template-columns: 1fr; }
		}

		/* Admin dashboard: project rows with actions in fixed columns, so they line up whatever the title length */
		.project-row {
			display: grid;
			grid-template-columns: auto minmax(0, 1fr) auto auto 11.5rem;
			align-items: center;
			gap: 8px 14px;
			transition: background 0.15s, border-color 0.15s;
		}
		.project-row form { margin: 0; }
		.project-row .btn { white-space: nowrap; }
		.project-row.selected { background: #1f2630; border-color: var(--primary); }
		.project-row .checkbox { width: 18px; height: 18px; margin: 0; }

		.project-info { min-width: 0; overflow-wrap: anywhere; }

		.project-visibility {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 8px;
			color: #aaa;
			font-size: 0.9rem;
		}
		.visibility-btn { min-width: 5.5rem; }

		/* bulk action bar - sticks to the top of the screen while scrolling a long list */
		.bulk-bar {
			position: sticky;
			top: 0;
			z-index: 5;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			gap: 10px;
			background: #161616;
			border: 1px solid #333;
			border-radius: 8px;
			padding: 10px 1rem;
			margin-bottom: 0.5rem;
		}
		.bulk-select-all {
			display: flex;
			align-items: center;
			gap: 10px;
			margin: 0;
			color: #aaa;
			font-weight: normal;
		}
		.bulk-select-all .checkbox { width: 18px; height: 18px; margin: 0; }
		.bulk-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
		.bulk-bar-actions select { padding: 0.4rem; }
		.bulk-bar-actions input[type="text"] { width: 12rem; margin: 0; padding: 0.4rem; }

		@media (max-width: 700px) {
			/* phones: checkbox + title on the first line, the three actions side by side underneath */
			.project-row { grid-template-columns: auto auto auto 1fr; gap: 10px; }
			.project-info { grid-column: 2 / -1; }
			.project-row > :nth-child(3) { grid-column: 2; }
			.project-visibility { justify-content: flex-end; }
			.project-visibility span { display: none; } /* the Public/Private button speaks for itself */
		}

		/* Settings: webhook event checkboxes */
		.webhook-events { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
		.webhook-event { display: flex; align-items: center; gap: 8px; color: #ccc; font-weight: normal; }
		.webhook-event .checkbox { width: 18px; height: 18px; margin: 0; }
		.settings-hint { color: #777; font-size: 0.8rem; margin-top: 4px; }

		/* Play counts */
		.play-count { color: #888; margin-left: 8px; white-space: nowrap; }
		.track-plays { color: #777; }

		/* Comment-form honeypot: off-screen rather than display:none, which some bots check for */
		.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }

		/* Admin notifications (🔔 in the top bar) */
		.navbar > div { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
		.notif { position: relative; margin-right: 10px; }
		.notif-bell {
			position: relative;
			background: none;
			border: none;
			cursor: pointer;
			font-size: 1.1rem;
			padding: 2px 6px;
			border-radius: 6px;
		}
		.notif-bell:hover, .notif-bell[aria-expanded="true"] { background: #222; }
		.notif-badge {
			position: absolute;
			top: -4px;
			right: -6px;
			min-width: 18px;
			height: 18px;
			padding: 0 5px;
			border-radius: 9px;
			background: #c0392b;
			color: #fff;
			font-size: 0.7rem;
			font-weight: bold;
			line-height: 18px;
			text-align: center;
		}
		.notif-panel {
			position: absolute;
			right: 0;
			top: calc(100% + 8px);
			z-index: 50;
			width: min(380px, 90vw);
			max-height: 70vh;
			overflow-y: auto;
			background: #1a1a1a;
			border: 1px solid #333;
			border-radius: 8px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
		}
		.notif-head {
			position: sticky;
			top: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 14px;
			background: #1a1a1a;
			border-bottom: 1px solid #333;
		}
		.notif-markall { background: none; border: none; color: var(--primary); cursor: pointer; font-size: 0.8rem; padding: 0; }
		.notif-markall:hover { text-decoration: underline; }
		.notif-item {
			display: flex;
			flex-direction: column;
			gap: 2px;
			padding: 10px 14px;
			border-bottom: 1px solid #262626;
			color: #ddd;
			text-decoration: none;
			font-size: 0.85rem;
		}
		.notif-item:hover { background: #222; }
		.notif-meta { color: #777; font-size: 0.75rem; }
		.notif-text { color: #aaa; overflow-wrap: anywhere; }
		.notif-empty, .notif-more { color: #777; font-size: 0.8rem; padding: 12px 14px; margin: 0; }

		/* the comment you clicked through to from a notification */
		.comment-highlight { animation: comment-flash 2.5s ease-out; }
		@keyframes comment-flash {
			0%, 30% { background: #2c3e50; box-shadow: 0 0 0 2px var(--primary); }
			100% { background: #252525; box-shadow: none; }
		}

		/* Comments held for approval */
		.comment-held { border-left-color: #BD8235; background: #2a2620; }
		.held-tag { color: #BD8235; font-size: 0.75rem; margin-left: 6px; }
		.approve-btn { background: #27ae60; margin-right: 6px; }
		.comment-notice { color: #27ae60; margin: 10px 0 0; font-size: 0.9rem; }

		.notif-item { flex-direction: column; }
		.notif-link { display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
		.notif-held { background: #221f1a; border-left: 3px solid #BD8235; }
		.notif-actions { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
		.notif-held-tag { color: #BD8235; font-size: 0.75rem; margin-right: auto; }
		.notif-actions .btn { padding: 3px 10px; font-size: 0.75rem; }
		.notif-approve { background: #27ae60; }

		/* 👍/👎 feedback triage: the chosen decision looks pressed (click it again to clear) */
		.triage-btn.active.accepted { background: #1e4d2e; border-color: #27ae60; }
		.triage-btn.active.rejected { background: #4d1e1e; border-color: #c0392b; }
		.status-badge[title] { cursor: help; }

		/* Private per-version notes (admin only) */
		.pnotes { margin-top: 15px; border: 1px solid #3d3a55; background: #1c1b26; border-radius: 6px; }
		.pnotes-head { display: flex; align-items: center; gap: 10px; padding: 10px 15px; flex-wrap: wrap; }
		.pnotes-toggle { display: flex; align-items: center; gap: 8px; background: none; border: none; padding: 0; cursor: pointer; font: inherit; }
		.pnotes-arrow { color: #a59dff; font-size: 0.8rem; width: 0.8rem; display: inline-block; transition: transform 0.15s; }
		.pnotes.open .pnotes-arrow { transform: rotate(90deg); }
		.pnotes-label { font-size: 0.75rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.04em; color: #a59dff; }
		.pnotes-hint, .pnotes-saved { font-size: 0.75rem; color: #6f6a90; }
		.pnotes-saved { margin-left: auto; }
		.pnotes-body { padding: 0 15px 12px; }
		.pnotes:not(.open) .pnotes-body, .pnotes:not(.open) .pn-tabs, .pnotes:not(.open) .pnotes-saved, .pnotes.open .pnotes-hint { display: none; }
		.pnotes textarea { width: 100%; min-height: 110px; margin: 0; background: #15141d; border: 1px solid #2e2c40; color: #ddd; border-radius: 4px; padding: 10px; font: inherit; font-size: 0.9rem; line-height: 1.5; resize: vertical; }
		.pnotes textarea:focus { outline: none; border-color: #a59dff; }
		.pnotes-old { white-space: pre-line; font-size: 0.85rem; line-height: 1.5; color: #8e8aa8; background: #17161f; border: 1px dashed #2e2c40; border-radius: 4px; padding: 10px; min-height: 60px; overflow-wrap: anywhere; }
		.pnotes-old.empty { font-style: italic; color: #5d5977; }
		.pn-tab-label { font-size: 0.75rem; color: #6f6a90; margin-bottom: 6px; }
		.pn-tabs { display: flex; gap: 4px; align-items: center; position: relative; flex-wrap: wrap; }
		.pn-tab { background: #15141d; border: 1px solid #2e2c40; color: #8e8aa8; border-radius: 4px; padding: 3px 10px; font-size: 0.75rem; cursor: pointer; white-space: nowrap; }
		.pn-tab.on { border-color: #a59dff; color: #ddd; }
		.pn-tabs .dot, .pn-older-menu .dot { color: #a59dff; }
		.pn-older-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 5; display: flex; flex-direction: column; min-width: 110px; padding: 4px; background: #1c1b26; border: 1px solid #3d3a55; border-radius: 6px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); }
		.pn-older-menu button { background: none; border: none; color: #bbb; text-align: left; padding: 5px 10px; font-size: 0.8rem; cursor: pointer; border-radius: 4px; }
		.pn-older-menu button:hover { background: #262436; }
		.pnotes-edit { display: block; width: 50%; min-height: 60px; margin-top: 6px; background: #1c1b26; border-color: #3d3a55; font: inherit; font-size: 0.85rem; }
		.notes-marker { margin-left: 6px; cursor: help; }