/* Basic styles shared */
:root {
	--bg: #0e0f12;
	--panel: #1a1c22;
	--text: #e5e7eb;
	--muted: #9ca3af;
	--accent: #7c3aed;
	--accent-2: #22d3ee;
}

html, body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--text);
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
}

.home .container {
	max-width: 900px;
	margin: 40px auto;
	padding: 24px;
	background: var(--panel);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.home input {
	padding: 8px 12px;
	border-radius: 8px;
	border: 1px solid #2d2f36;
	background: #0b0c10;
	color: var(--text);
}

.home button {
	padding: 10px 14px;
	border-radius: 8px;
	border: none;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: white;
	cursor: pointer;
	font-weight: 600;
}

.home .actions {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: 16px;
}

.home .links {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid #2a2c33;
}

.username-section {
	margin: 20px 0;
	padding: 16px;
	background: #0b0c10;
	border: 1px solid #2d2f36;
	border-radius: 8px;
}

.username-section label {
	display: block;
	margin-bottom: 8px;
	color: var(--text);
	font-weight: 600;
}

.username-controls {
	display: flex;
	gap: 8px;
	align-items: center;
}

.username-controls input {
	flex: 1;
	padding: 8px 12px;
	border-radius: 6px;
	border: 1px solid #2d2f36;
	background: #15171c;
	color: var(--text);
	font-size: 14px;
}

.username-controls input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

.username-controls button {
	padding: 8px 16px;
	border-radius: 6px;
	border: none;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: white;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	transition: all 0.2s;
}

.username-controls button:hover {
	background: linear-gradient(135deg, #8b5cf6, #06b6d4);
	transform: translateY(-1px);
}

.username-controls button:active {
	transform: translateY(0);
}

/* Control layout */
.topbar {
	position: sticky;
	top: 0;
	background: #15171c;
	border-bottom: 1px solid #2a2c33;
	z-index: 10;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 14px;
}

.brand { font-weight: 700; }

.toolbar { display: flex; gap: 10px; align-items: center; }

.toolbar button, .file-button span {
	padding: 8px 12px;
	border-radius: 8px;
	border: 1px solid #2d2f36;
	background: #0b0c10;
	color: var(--text);
	cursor: pointer;
}

.layout {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 4px;
	padding: 4px;
	height: calc(100vh - 8px);
	position: relative;
}

.stage-wrap {
	background: #101216;
	border: 1px solid #2a2c33;
	border-radius: 10px;
	/*padding: 12px;*/
	overflow: hidden;
	height: calc(100vh - 12px);
	position: relative;
}

.stage-controls {
	position: absolute;
	bottom: 14px;
	right: calc(280px + 18px);
	display: flex;
	gap: 5px;
	z-index: 1000;
}

.zoom-btn {
	width: 32px;
	height: 32px;
	border: 1px solid #2a2c33;
	background: #0b0c10;
	color: var(--text);
	border-radius: 6px;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
}

.zoom-btn:hover {
	background: #15171c;
	border-color: #3a3c43;
}

.zoom-btn:active {
	background: #1a1c22;
}

.help-btn {
	background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
	color: white !important;
	font-weight: bold;
}

.help-btn:hover {
	background: linear-gradient(135deg, #8b5cf6, #06b6d4) !important;
}

.stage {
	position: relative;
	width: 4000px;
	height: 2160px;
	background: #181920 ;
	border: 1px solid #2a2c33;
	border-radius: 8px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
	transform-origin: top left;
}

.stream-area {
	border: 2px dashed rgba(124,58,237,0.6);
	box-shadow: 0 0 0 4px rgba(124,58,237,0.15) inset;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.stream-area.player-controls-enabled {
	z-index: 10000;
}

.overlay-el {
	position: absolute;
	transform-origin: top left;
	cursor: move;
	user-select: none;
	touch-action: none;
	/* Improve rendering performance and reduce artifacts */
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.overlay-el.selected {
	outline: 2px solid #00aaff;
	outline-offset: 2px;
}

.overlay-el.dragging {
	/* Optimize rendering during drag operations */
	will-change: transform;
	pointer-events: none;
}

.resize-handle {
	position: absolute;
	width: 8px;
	height: 8px;
	background: #00aaff;
	border: 1px solid white;
	cursor: pointer;
	z-index: 1000;
}

.resize-handle.nw { top: -4px; left: -4px; cursor: nw-resize; }
.resize-handle.ne { top: -4px; right: -4px; cursor: ne-resize; }
.resize-handle.sw { bottom: -4px; left: -4px; cursor: sw-resize; }
.resize-handle.se { bottom: -4px; right: -4px; cursor: se-resize; }

.rotation-handle {
	position: absolute;
	width: 20px;
	height: 20px;
	background: #00aaff;
	border: 2px solid white;
	border-radius: 50%;
	cursor: pointer;
	z-index: 1000;
	top: -30px;
	left: calc(50% - 15px);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: white;
	font-weight: bold;
}

.drag-handle {
	position: absolute;
	width: 20px;
	height: 20px;
	background: #00aaff;
	border: 2px solid white;
	border-radius: 50%;
	cursor: move;
	z-index: 1000;
	top: -30px;
	left: calc(50% + 15px);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: white;
	font-weight: bold;
}

.hidden-indicator {
	position: absolute;
	top: -25px;
	right: -5px;
	width: 20px;
	height: 20px;
	background: rgba(255, 0, 0, 0.8);
	border: 2px solid white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	color: white;
	z-index: 1001;
	pointer-events: none;
}

.locked-indicator {
	position: absolute;
	top: -25px;
	right: 15px;
	width: 20px;
	height: 20px;
	background: rgba(255, 165, 0, 0.8);
	border: 2px solid white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	color: white;
	z-index: 1001;
	pointer-events: none;
}

/* Group indicator badge on canvas */
.group-indicator {
	position: absolute;
	top: -25px;
	right: 35px;
	width: 20px;
	height: 20px;
	border: 2px solid white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: bold;
	color: white;
	z-index: 1001;
	pointer-events: none;
}

/* Group header in elements list */
.elements li.group-header {
	background: linear-gradient(180deg, #1a1c24, #14161e);
	padding: 6px 8px;
	margin-bottom: 2px;
	cursor: pointer;
	border-radius: 4px;
}

.elements li.group-header:hover {
	background: linear-gradient(180deg, #1f2130, #1a1c24);
}

.elements li.group-header .name-label.group-name {
	font-weight: 700;
	font-size: 12px;
	color: var(--text);
	cursor: pointer;
}

.elements li.group-header .btns {
	gap: 2px;
}

/* Group child indentation */
.elements li.group-child {
	margin-bottom: 1px;
}

/* Drop into group highlight */
.elements li.group-header.drop-into-group {
	outline: 2px solid var(--accent);
	background: rgba(124, 58, 237, 0.15);
}

/* Group name inline edit */
.group-name-input {
	background: var(--bg);
	border: 1px solid var(--accent);
	border-radius: 3px;
	color: var(--text);
	font-size: 12px;
	padding: 2px 4px;
	width: 100%;
	outline: none;
}

/* Group opacity popup */
.group-opacity-popup {
	position: fixed;
	background: var(--panel);
	border: 1px solid #2a2c33;
	border-radius: 8px;
	padding: 8px 12px;
	z-index: 10000;
	box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Prevent Twitch player tooltips when controls disabled by covering with invisible layer */
.stage.no-player-tooltips::after {
	content: '';
	position: absolute;
	left: 320px; top: 180px; width: 1280px; height: 720px;
	pointer-events: none;
}


.overlay-el img {
	pointer-events: none;
	-webkit-user-drag: none;
	user-drag: none;
}

.overlay-el .handle {
	position: absolute;
	bottom: -8px;
	right: -8px;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	background: var(--accent);
	border: 2px solid #111;
	cursor: nwse-resize;
	box-shadow: 0 1px 2px rgba(0,0,0,.5);
}

.el-text {
	padding: 6px 8px;
	color: white;
	font-size: 28px;
	font-weight: 700;
	text-shadow: 0 2px 8px rgba(0,0,0,.6);
	background: rgba(124, 58, 237, 0.12);
	border: 1px dashed rgba(124, 58, 237, 0.4);
	border-radius: 6px;
}

.el-image img { display: block; }

.el-video video { display: block; }

.el-audio {
	/* Remove default styling to allow custom audio player to work */
	background: transparent;
	backdrop-filter: none;
	border: none;
	border-radius: 0;
	padding: 0;
}
.el-audio .drag-handle {
	cursor: grab;
	background: rgba(255,255,255,0.08);
	height: 8px;
	border-radius: 4px;
	margin-bottom: 6px;
}
.el-audio .audio-title {
	/* Remove default styling to allow custom audio player to work */
	display: none;
}
.el-audio audio { 
	/* Hide default audio element to allow custom player */
	display: none; 
}

.inspector {
	background: linear-gradient(180deg, #0f1116, #0b0d12);
	border: 1px solid #2a2c33;
	border-radius: 12px;
	padding: 10px;
	min-height: 300px;
	box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.elements-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.elements-header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

.create-btn {
	padding: 6px 12px;
	border-radius: 6px;
	border: 1px solid var(--accent);
	background: var(--accent);
	color: white;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	transition: all 0.2s;
}

.create-btn:hover {
	background: #8b5cf6;
	border-color: #8b5cf6;
}

.player-controls {
	margin: 12px 0;
	padding: 8px 0;
	border-top: 1px solid #2a2c33;
}



.checkbox-label {
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 12px;
	color: var(--text);
	cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
	margin: 0;
}

/* Modal Styles */
.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
}

.modal.show {
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-content {
	background: linear-gradient(180deg, #0f1116, #0b0d12);
	border: 1px solid #2a2c33;
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(0,0,0,.5);
	max-width: 400px;
	width: 90%;
	animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
	from {
		opacity: 0;
		transform: translateY(-20px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid #2a2c33;
}

.modal-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.modal-close {
	background: none;
	border: none;
	color: var(--muted);
	font-size: 24px;
	cursor: pointer;
	padding: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: all 0.2s;
}

.modal-close:hover {
	background: #2a2c33;
	color: var(--text);
}

.modal-body {
	padding: 20px;
}

.create-options {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.create-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px 12px;
	border: 2px solid #2a2c33;
	border-radius: 8px;
	background: #0b0c10;
	color: var(--text);
	cursor: pointer;
	transition: all 0.2s;
	text-decoration: none;
}

.create-option:hover {
	border-color: var(--accent);
	background: rgba(124, 58, 237, 0.1);
}

.create-option.file-option {
	cursor: pointer;
}

.option-icon {
	font-size: 24px;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.option-icon i {
	color: var(--accent);
}
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: rgba(124, 58, 237, 0.2);
}

.option-label {
	font-size: 12px;
	font-weight: 600;
	text-align: center;
}

.elements { 
	list-style: none; 
	padding: 0; 
	margin: 0; 
	max-height: 200px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #2a2c33 #0b0c10;
}
.elements::-webkit-scrollbar {
	width: 6px;
}
.elements::-webkit-scrollbar-track {
	background: #0b0c10;
	border-radius: 3px;
}
.elements::-webkit-scrollbar-thumb {
	background: #2a2c33;
	border-radius: 3px;
}
.elements::-webkit-scrollbar-thumb:hover {
	background: #3a3c43;
}
.elements li { 
	padding: 4px 6px; 
	border-radius: 6px; 
	display: grid; 
	grid-template-columns: 1fr auto; 
	align-items: center; 
	gap: 4px; 
	border: 1px solid #2a2c33; 
	background: linear-gradient(180deg, #0f1116, #0b0d12); 
	margin-bottom: 4px;
}
.elements li:last-child { margin-bottom: 0; }
.elements li.active { background: rgba(124, 58, 237, 0.18); }
.elements .small { color: var(--muted); font-size: 12px; }
.elements input.name-input {
	width: 100%;
	background: #0b0c10;
	color: var(--text);
	border: 1px solid #2d2f36;
	border-radius: 6px;
	padding: 4px 6px;
}

.elements p.name-label {
	margin: 0;
	color: var(--text);
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	cursor: grab;
	user-select: none;
}

.elements p.name-label:active {
	cursor: grabbing;
}

/* Drag and drop styles */
.elements li.dragging {
	opacity: 0.5;
	transform: rotate(2deg);
	transition: opacity 0.2s, transform 0.2s;
}

.elements li.drop-above {
	border-top: 2px solid var(--accent);
	background: linear-gradient(180deg, rgba(124, 58, 237, 0.1), #0f1116);
}

.elements li.drop-below {
	border-bottom: 2px solid var(--accent);
	background: linear-gradient(180deg, #0f1116, rgba(124, 58, 237, 0.1));
}

.elements .btns { display: flex; gap: 6px; }
.elements button.icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: #0b0c10; border: 1px solid #2a2c33; color: var(--text); cursor: pointer; }
.elements button.icon:hover { background: #15171c; }

.elements button.icon.small { width: 22px; height: 22px; font-size: 12px; }

/* Font Awesome icon styling for elements list */
.elements p.name-label i {
	margin-right: 6px;
	width: 16px;
	text-align: center;
	color: var(--accent);
}

.elements button.icon i {
	font-size: 11px;
}

/* YouTube element styling */
.youtube-preview {
	transition: all 0.3s ease;
}

/* Removed hover effect to prevent pop animation */

.youtube-status {
	transition: all 0.2s ease;
}

.youtube-time {
	transition: all 0.2s ease;
}

.youtube-thumbnail {
	transition: all 0.3s ease;
}

.youtube-thumbnail:hover {
	transform: scale(1.05);
}

.prop-panel { 
	margin-top: 10px; 
	border-top: 1px solid #2a2c33; 
	padding-top: 10px; 
	padding-right: 5px;
	max-height: 480px;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: #2a2c33 #0b0c10;
}

.prop-panel::-webkit-scrollbar {
	width: 6px;
}

.prop-panel::-webkit-scrollbar-track {
	background: #0b0c10;
	border-radius: 3px;
}

.prop-panel::-webkit-scrollbar-thumb {
	background: #2a2c33;
	border-radius: 3px;
}

.prop-panel::-webkit-scrollbar-thumb:hover {
	background: #3a3c43;
}
.prop-panel label { display: block; font-size: 12px; color: var(--muted); margin-top: 12px; margin-bottom: 4px; }
.prop-panel .size-group, .prop-panel .slider-group, .prop-panel .format-group, .prop-panel .border-group { margin-bottom: 12px; }

.border-group {
	margin-bottom: 12px;
}

.border-group label {
	display: block;
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 4px;
}

.border-controls, .rotation-controls, .position-controls, .size-controls {
	display: flex;
	gap: 3px;
	align-items: center;
	margin-top: 4px;
}

/* Make position and size inputs smaller to fit 4 digits + arrows */
.position-controls input[type="number"],
.size-controls input[type="number"] {
	width: 62px;
	min-width: 62px;
	max-width: 62px;
}

/* Reduce gap for position and size controls to fit everything */
.position-controls,
.size-controls {
	gap: 3px;
}

/* Make buttons in position and size controls more compact */
.position-controls button,
.size-controls button {
	padding: 3px 6px;
	font-size: 10px;
}

.border-controls input[type="color"] {
	width: 24px;
	height: 24px;
	border: 1px solid #2a2c33;
	border-radius: 4px;
	cursor: pointer;
	padding: 0;
}

.input-controls input[type="color"] {
	width: 24px;
	height: 24px;
	border: 1px solid #2a2c33;
	border-radius: 4px;
	cursor: pointer;
	padding: 0;
}

.border-controls input[type="range"] {
	flex: 1;
}

.rotation-controls input[type="range"] {
	flex: 1;
}

.format-group {
	margin-bottom: 12px;
}

.format-group label {
	display: block;
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 4px;
}

.format-controls {
	display: flex;
	gap: 3px;
	align-items: center;
	margin-top: 4px;
}

.format-group select {
	padding: 3px 3px;
	border-radius: 4px;
	border: 1px solid #2a2c33;
	background: #0b0c10;
	color: var(--text);
	font-size: 10px;
	max-width: 70px;
}

.format-btn {
	padding: 2px 8px;
	border-radius: 4px;
	border: 1px solid #2a2c33;
	background: #0b0c10;
	color: var(--text);
	font-size: 10px;
	cursor: pointer;
	transition: all 0.2s;
	min-width: 30px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.format-btn:hover {
	background: #15171c;
	border-color: #3a3c43;
}

.format-btn.active {
	background: var(--accent);
	border-color: var(--accent);
	color: white;
}

.format-group input[type="color"] {
	width: 30px;
	height: 24px;
	border: 1px solid #2a2c33;
	border-radius: 4px;
	cursor: pointer;
}

.format-group input[type="number"] {
	width: 45px;
	padding: 3px 3px;
	border-radius: 4px;
	border: 1px solid #2a2c33;
	background: #0b0c10;
	color: var(--text);
	font-size: 10px;
}
.prop-panel input, .prop-panel textarea { padding: 6px 8px; border-radius: 8px; border: 1px solid #2a2c33; background: #0b0c10; color: var(--text); box-sizing: border-box; overflow: hidden; }
.prop-panel input[type="range"] { padding: 0; height: 4px; }
.prop-panel input[type="number"] { width: 80px; }
.prop-panel .size-group { margin-bottom: 12px; }
.prop-panel .size-group label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.prop-panel .size-group .size-controls { display: flex; gap: 3px; align-items: flex-end; flex-wrap: wrap; }
.prop-panel .size-group .size-controls button { padding: 6px 8px; border-radius: 6px; border: 1px solid #2a2c33; background: #0b0c10; color: var(--text); cursor: pointer; font-size: 11px; }
.prop-panel .size-group .size-controls button:hover { background: #15171c; }

.prop-panel .position-controls button { padding: 6px 8px; border-radius: 6px; border: 1px solid #2a2c33; background: #0b0c10; color: var(--text); cursor: pointer; font-size: 11px; }
.prop-panel .position-controls button:hover { background: #15171c; }

.prop-panel .slider-group { margin-bottom: 12px; }
.prop-panel .slider-group label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.prop-panel .slider-group .rotation-controls { display: flex; gap: 3px; align-items: center; }
.prop-panel .slider-group .rotation-controls input[type="range"] { flex: 1; }
.prop-panel .slider-group .rotation-controls button { padding: 6px 3px; border-radius: 6px; border: 1px solid #2a2c33; background: #0b0c10; color: var(--text); cursor: pointer; font-size: 11px; }
.prop-panel .slider-group .rotation-controls button:hover { background: #15171c; }

/* New control types for better layout */
.prop-panel .input-controls { display: flex; gap: 3px; align-items: center; margin-top: 4px; }
.prop-panel .input-controls input { flex: 1; min-width: 0; }
.prop-panel .input-controls textarea { flex: 1; min-width: 0; resize: vertical; min-height: 60px; }

.prop-panel .number-controls { display: flex; gap: 3px; align-items: center; margin-top: 4px; }
.prop-panel .number-controls input { flex: 1; min-width: 0; }

.prop-panel .range-controls { display: flex; gap: 3px; align-items: center; margin-top: 4px; }
.prop-panel .range-controls input[type="range"] { flex: 1; }

.prop-panel .checkbox-group { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; }
.prop-panel .checkbox-group label { font-size: 12px; color: var(--muted); margin: 0; }

.prop-panel .alignment-controls { display: flex; gap: 3px; align-items: center; margin-top: 4px; }
.prop-panel .alignment-controls .format-btn { min-width: 35px; font-size: 12px; }
.prop-panel .checkbox-group input[type="checkbox"] { margin: 0; }

.prop-panel .select-controls { display: flex; gap: 3px; align-items: center; margin-top: 4px; }
.prop-panel .select-controls select { flex: 1; min-width: 0; }

.prop-panel .url-controls { display: flex; gap: 3px; align-items: center; margin-top: 4px; }
.prop-panel .url-controls input { flex: 1; min-width: 0; }
.prop-panel .url-controls button { padding: 6px 3px; border-radius: 6px; border: 1px solid #2a2c33; background: #0b0c10; color: var(--text); cursor: pointer; font-size: 11px; }
.prop-panel .url-controls button:hover { background: #15171c; }

.prop-panel .video-controls { display: flex; gap: 3px; align-items: center; margin-top: 4px; }
.prop-panel .video-controls label { margin: 0; font-size: 11px; }
.prop-panel .video-controls input[type="checkbox"] { margin: 0; }

.prop-panel .audio-controls { display: flex; gap: 3px; align-items: center; margin-top: 4px; }
.prop-panel .audio-controls label { margin: 0; font-size: 11px; }
.prop-panel .audio-controls input[type="checkbox"] { margin: 0; }

.prop-panel .playback-controls { display: flex; gap: 3px; align-items: center; margin-top: 4px; }
.prop-panel .playback-controls button { padding: 6px 8px; border-radius: 6px; border: 1px solid #2a2c33; background: #0b0c10; color: var(--text); cursor: pointer; font-size: 11px; }
.prop-panel .playback-controls button:hover { background: #15171c; }

.prop-panel .font-style-controls { display: flex; gap: 3px; align-items: center; margin-top: 4px; }
.prop-panel .font-style-controls select { flex: 1; min-width: 0; }
.prop-panel .font-style-controls .format-btn { padding: 2px 8px; border-radius: 4px; border: 1px solid #2a2c33; background: #0b0c10; color: var(--text); font-size: 10px; cursor: pointer; transition: all 0.2s; min-width: 30px; }
.prop-panel .font-style-controls .format-btn:hover { background: #15171c; border-color: #3a3c43; }
.prop-panel .font-style-controls .format-btn.active { background: var(--accent); border-color: var(--accent); color: white; }

.prop-panel .button-group { margin-bottom: 12px; }
.prop-panel .button-group label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.prop-actions { display: flex; gap: 6px; margin-top: 10px; }

.duplicate-btn {
	width: 100%;
	padding: 8px 12px;
	border-radius: 6px;
	border: 1px solid #2d2f36;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: white;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	transition: all 0.2s;
}

.duplicate-btn:hover {
	background: linear-gradient(135deg, #8b5cf6, #06b6d4);
	border-color: #3a3c43;
	transform: translateY(-1px);
}

.duplicate-btn:active {
	transform: translateY(0);
}

/* File Drop Zone */
.file-drop-zone {
	width: 100%;
	height: 80px;
	border: 2px dashed #2a2c33;
	border-radius: 8px;
	margin: 10px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #0b0c10;
	transition: all 0.2s ease;
	cursor: pointer;
}

.file-drop-zone:hover {
	border-color: var(--accent);
	background: rgba(124, 58, 237, 0.1);
}

.file-drop-zone.drag-over {
	border-color: var(--accent);
	background: rgba(124, 58, 237, 0.2);
	transform: scale(1.02);
}

.drop-zone-content {
	text-align: center;
	color: var(--muted);
}

.drop-zone-icon {
	font-size: 24px;
	margin-bottom: 4px;
}

.drop-zone-text {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 2px;
}

.drop-zone-hint {
	font-size: 11px;
	color: var(--muted);
}

/* Time unit toggle buttons */
.time-unit-toggle {
	display: flex;
	gap: 2px;
	flex-shrink: 0;
}

.time-unit-btn {
	padding: 4px 8px;
	border-radius: 4px;
	border: 1px solid #2d2f36;
	background: #0b0c10;
	color: var(--text);
	cursor: pointer;
	font-size: 11px;
	flex: 1;
	transition: all 0.2s;
}

.time-unit-btn:hover {
	background: #15171c;
}

.time-unit-btn.active {
	background: var(--accent);
	border-color: var(--accent);
	color: white;
}

/* Initial time controls layout */
.initial-time-controls {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.time-row {
	display: flex;
	gap: 8px;
	align-items: center;
}

.initial-time-controls input[type="number"] {
	width: 80px;
	flex-shrink: 0;
}

/* Help Tooltip */
.help-tooltip {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--panel);
	border: 1px solid #2a2c33;
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.5);
	z-index: 10000;
	max-width: 400px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}

.help-tooltip.show {
	opacity: 1;
	visibility: visible;
}

.help-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid #2a2c33;
}

.help-header h3 {
	margin: 0;
	color: var(--text);
	font-size: 18px;
	font-weight: 600;
}

.help-close {
	background: none;
	border: none;
	color: var(--muted);
	font-size: 24px;
	cursor: pointer;
	padding: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: all 0.2s;
}

.help-close:hover {
	background: #2a2c33;
	color: var(--text);
}

.help-content {
	padding: 20px;
}

.help-section {
	margin-bottom: 20px;
}

.help-section:last-child {
	margin-bottom: 0;
}

.help-section h4 {
	margin: 0 0 12px 0;
	color: var(--text);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.help-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid rgba(42, 44, 51, 0.5);
}

.help-item:last-child {
	border-bottom: none;
}

.help-item .key {
	background: #0b0c10;
	border: 1px solid #2d2f36;
	border-radius: 4px;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--accent);
	font-family: 'Courier New', monospace;
	min-width: 80px;
	text-align: center;
}

.help-item .description {
	color: var(--text);
	font-size: 13px;
	flex: 1;
	margin-left: 12px;
}

/* Hotkey Feedback */
.hotkey-feedback {
	position: fixed;
	top: 20px;
	right: 20px;
	background: var(--accent);
	color: white;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	z-index: 10001;
	opacity: 0;
	transform: translateX(100%);
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.hotkey-feedback.show {
	opacity: 1;
	transform: translateX(0);
}