:root { 
			--bg-color: #222; 
			--panel-color: #333; 
			--accent-color: #0f0; 
			--text-color: #ddd; 
			--highlight-color: #1a1a1a; 
			--selection-color: #003300; 
			--duration-color: #00aaaa;
			--col-width: 180px; 
		}

		body { 
			background: var(--bg-color); 
			color: var(--text-color); 
			font-family: 'Courier New', monospace; 
			padding: 0; 
			margin: 0; 
			display: flex; 
			flex-direction: column; 
			height: 100vh; 
			overflow: hidden; 
		}
		
		/* --- SCROLLBARS --- */
		::-webkit-scrollbar { width: 16px; height: 16px; }
		::-webkit-scrollbar-track { background: #111; border-left: 1px solid #333; }
		::-webkit-scrollbar-thumb { background: #555; border: 3px solid #111; border-radius: 8px; }
		
		/* --- MAIN APP LAYOUT --- */
		.app-wrapper { 
			display: flex; 
			flex-direction: column; 
			height: 100%; 
			padding: 10px; 
			box-sizing: border-box; 
			gap: 5px; 
			overflow: hidden; 
		}

		.header-container {
			display: flex; 
			flex-wrap: wrap; 
			gap: 5px; 
			padding-bottom: 5px; 
			border-bottom: 1px solid #444; 
			background: var(--bg-color); 
			flex-shrink: 0;
		}
		
		.separator-vertical {
			width: 1px; 
			background: #444; 
			height: 20px; 
			margin: 0 2px;
		}

		/* --- NOTE BUILDER --- */
		.note-builder-bar {
			display: flex; 
			gap: 10px; 
			align-items: center; 
			background: #2a2a2a; 
			padding: 4px; 
			border: 1px solid #555; 
			flex-wrap: wrap; 
			width: 100%; 
			flex-shrink: 0;
		}

		.builder-group {
			display: flex; 
			gap: 2px; 
			align-items: center; 
			padding-right: 10px; 
			border-right: 1px solid #444;
		}
		.builder-group-last { border-right: none; }
		
		.dur-control-flex {
			display: flex; 
			gap: 5px; 
			align-items: center;
		}

		/* --- SPLIT WORKSPACE (Scroll Fix) --- */
		.workspace-area { 
			display: flex; 
			flex-direction: column; 
			flex-grow: 1; 
			overflow: hidden; 
			border: 1px solid #555; 
			background: var(--highlight-color);
			position: relative; 
			width: 100%;
		}
		
		/* Top Pane: Headers Only */
		.tracker-headers-pane {
			display: flex; 
			flex-wrap: nowrap; 
			overflow-x: hidden; /* Programmatically scrolled */
			overflow-y: hidden;
			background: var(--panel-color); 
			border-bottom: 2px solid #555;
			flex-shrink: 0; 
			padding-left: 30px; 
			width: 100%;
		}
		
		/* Bottom Pane: Grid Only (Drives the Scroll) */
		.tracker-grid-pane { 
			display: flex; 
			flex-wrap: nowrap; 
			flex-grow: 1; 
			overflow: auto; /* Native Scrollbars */
			padding-left: 30px; 
			position: relative;
			width: 100%;
		}
		
		/* COLUMNS */
		.header-col { 
			min-width: var(--col-width); 
			width: var(--col-width); 
			flex-shrink: 0; 
			border-right: 1px solid #444; 
			padding: 4px; 
			box-sizing: border-box; 
			height: 160px; 
			display: flex; 
			flex-direction: column; 
			gap: 2px;
		}
		
		.grid-col { 
			min-width: var(--col-width); 
			width: var(--col-width); 
			flex-shrink: 0; 
			border-right: 1px solid #444; 
			display: flex; 
			flex-direction: column; 
		}
		
		.grid-row { 
			height: 32px; 
			min-height: 32px; 
			display: flex; 
			align-items: center; 
			border-bottom: 1px solid #333; 
			position: relative; 
		}
		
		.row-number { 
			position: absolute; 
			left: -30px; 
			width: 25px; 
			font-size: 9px; 
			color: #666; 
			pointer-events: none; 
			text-align: right; 
			padding-right: 5px; 
			height: 100%; 
			line-height: 32px;
			background: rgba(0,0,0,0.2); 
		}
		
		/* --- CONTROLS --- */
		input, select { 
			background: transparent; 
			border: none; 
			color: var(--accent-color); 
			font-family: inherit; 
			text-align: center; 
			width: 100%; 
			height: 100%; 
			outline: none; 
			font-size: 14px; 
		}
		
		.grid-row input { cursor: pointer; caret-color: transparent; }
		
		select { cursor: pointer; background: #222; border: 1px solid #444;  margin-bottom: 2px; }
		
		.header-select { 
			width: 100%; 
			height: 22px; 
			background: #222; 
			border: 1px solid #444; 
			color: #fff; 
			margin-bottom: 2px; 
			display: block; 
			font-size: 10px; 
		}
		
		.control-row { 
			display: flex; 
			align-items: center; 
			justify-content: space-between; 
			height: 22px; 
		}
		
		.control-row input { text-align: right; width: 60px; }
		
		.label-tiny { width: 30px; font-weight: bold; color: #aaa; }
		
		/* --- BUTTONS --- */
		.btn-std { 
			background: #444; 
			color: #fff; 
			border: 1px solid #555; 
			padding: 4px 10px; 
			cursor: pointer; 
			font-size: 12px; 
			border-radius: 3px; 
			min-width: 32px; 
			min-height: 28px; 
		}
		.btn-std:hover { background: #555; }
		.btn-play { background: #060; border-color: #0f0; color: #0f0; }
		.btn-stop { background: #600; border-color: #f00; color: #f00; }
		.btn-danger { background: #500; border-color: #f00; color: #faa; }
		.btn-action { background: #442266; border-color: #664488; }
		.btn-cloud { background: #224466; border-color: #4488aa; color:#0ff; }
		.btn-margin-left { margin-left: auto; }
		.btn-dollar { background: #460; color: #af0; }
		
		.btn-note { 
			min-width: 30px; 
			height: 30px; 
			padding: 0 4px; 
			display: flex; 
			align-items: center; 
			justify-content: center; 
			font-weight: bold; 
			border: 1px solid #555; 
			background: #333; 
			color: #aaa; 
			cursor: pointer; 
			font-size: 12px; 
		}
		.btn-note.selected { background: var(--accent-color); color: #000; border-color: #fff; }
		
		/* --- MODALS --- */
		.modal-overlay { 
			display: none; 
			position: fixed; 
			top: 0; left: 0; 
			width: 100%; 
			height: 100%; 
			background: rgba(0,0,0,0.95); 
			z-index: 2000; 
			padding: 20px; 
			box-sizing: border-box; 
			overflow-y: auto; 
		}
		
		.modal-box { 
			max-width: 800px; 
			margin: 0 auto; 
			background: #222; 
			border: 2px solid #555; 
			padding: 20px; 
			color: #ddd; 
			padding-bottom: 50px; 
		}
		
		.modal-close-btn { 
			float: right; 
			background: #600; 
			color: #fff; 
			border: none; 
			padding: 5px 15px; 
			cursor: pointer; 
		}
		
		.list-item { 
			padding: 8px; 
			border-bottom: 1px solid #444; 
			cursor: pointer; 
			display: flex; 
			justify-content: space-between; 
			align-items: center; 
		}
		.list-item:hover { background: #333; }
		
		.io-section-header { margin-bottom: 15px; border-bottom: 1px solid #444; padding-bottom: 10px; }
		.io-group { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
		.io-file-list { max-height: 150px; overflow-y: auto; border: 1px solid #444; margin: 10px 0; background: #111; }
		.io-cloud-panel { padding: 10px; background: #1a1a1a; border: 1px solid #444; }
		.io-status-text { margin-bottom: 10px; color: #aaa; }
		.io-control-group { display: none; gap: 5px; } /* Hidden by default until authorized */
		
		/* --- EDITOR TEXTAREA --- */
		textarea { 
			background: transparent; 
			border: none; 
			color: var(--accent-color); 
			font-family: inherit; 
			width: auto; 
			height: 100%; 
			outline: none; 
			font-size: 14px; 
		}
		
		.code-editor {
			text-align: left !important; 
			font-family: monospace; 
			white-space: pre;
			background: #111; 
			border: 1px solid #444; 
			padding: 10px;
			height: 400px; 
			width: 100%; 
			box-sizing: border-box; 
			overflow: auto; 
			display: block;
		}

		/* --- STATES & VISUALS --- */
		.state-active-row { background: #2a2a3a !important; }
		.state-active-cell { background: #005500 !important; } 
		.state-range-cell { background: var(--selection-color) !important; } 
		.state-duration-mark { position: relative; }
		.state-duration-mark::after {
			content: ''; 
			position: absolute; 
			left: 0; top: 0; bottom: 0; 
			width: 4px;
			background: var(--duration-color); 
			z-index: 5;
		}
		
		.visualizer-container { 
			background: #111; 
			border: 1px solid #444; 
			margin-top: 10px; 
			padding: 10px; 
			min-height: 150px; 
		}
		.visualizer-header { border-bottom: 1px solid #333; padding-bottom: 5px; margin-bottom: 5px; }
		.visualizer-row { display: flex; gap: 5px; padding: 4px; border-bottom: 1px dashed #333; font-size: 12px; color: #666; }
		.visualizer-row.current { background: #224422; color: #fff; font-weight: bold; border: 1px solid #0f0; }
		.visualizer-cell { width: 60px; text-align: center; }

		/* --- TABS --- */
		.tab-header { display: flex; gap: 5px; margin-bottom: 10px; border-bottom: 1px solid #444; }
		.tab-button { background: #333; border: 1px solid #444; color: #aaa; padding: 8px 16px; cursor: pointer; }
		.tab-button.active { background: #222; border-color: #555; color: var(--accent-color); border-bottom: 3px solid var(--accent-color); }
		.tab-content { display: none; min-height:700px;} 
		.tab-content.active { display: block; }

		/* --- ADVERTISEMENT RESPONSIVE LAYOUTS --- */
		
		/* 1. Editor Banner (Centered, Flexible) */
		.ad-banner-container { 
			width: 100%; 
			height: 96px;
			background: #181818; 
			border-bottom: 1px solid #333; 
			display: flex; 
			align-items: center; 
			justify-content: center; 
			flex-shrink: 0; 
			padding: 2px 0;
		}
		@media (max-width: 727px){
			.ad-banner-container {
				height: 56px;
			}
		}
		/* 2. Generic Ad Box (Half Page) */
		.ad-box {
			display: flex;
			justify-content: center;
			align-items: center;
			background: #202020;
			border: 1px dashed #444;
			width: 310px;
			height: 610px;
			/*width: fit-content;*/

		}
		@media (max-height: 750px) {
			.ad-box{
				height: 260px;
			}
			.tab-content {
			min-height:300px;
			}
		}

		/* 3. Hub & Help Layout (Ad floats right, text left) */
		/* Uses Row-Reverse to put Ad on right, but keep it first in DOM for stacking on top */
		.ad-text-layout {
			display:block;
			width:100%;
		}

		.ad-text-content {
			display:block;
			width: auto;
		}

		.ad-wrapper-float {
			float: right;
			margin: 0 0 15px 15px;
			width:auto;
			display:block;
			clear: right;
		}

		/* 4. Player Layout */
		.player-top-section {
			display: flex;
			flex-wrap: wrap;
			gap: 15px;
			align-items: flex-start;
		}

		.player-ad-wrapper {
			flex: 1 1 auto;
			display: flex;
			justify-content: center;
			/* If ad exceeds 75%, it will force wrap due to flex basis mechanics */
			min-width: 300px; 
		}

		.player-controls {
			flex: 1 1 25%; /* Target 25% width */
			min-width: 250px; /* Force wrap if too narrow */
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.player-control-panel {
			display: flex; 
			gap: 10px; 
			background: #333; 
			padding: 10px; 
			border: 1px solid #555; 
			align-items: center; 
			flex-wrap: wrap;
		}

		.player-settings-row {
			display: flex; 
			gap: 15px; 
			align-items: center;
		}

		.player-meta-row {
			margin-top: 10px;
		}
		
		.player-meta-inputs {
			display: flex; 
			gap: 5px;
		}

		.input-small-num 	{ width: 70px; background: #111; border: 1px solid #555; }
		.input-small-select 	{ width: 70px; background: #111; border: 1px solid #555; }
		.input-med-select 	{ width: 100px; background: #111; border: 1px solid #555; }
		.panel-meta { 
			background: #1a1a1a; 
			padding: 10px; 
			border: 1px solid #444; 
			margin-bottom: 15px; 
			display: block; 
			overflow: visible;
		}
		.meta-grid { 
			display: grid; 
			grid-template-columns: 1fr 1fr; 
			gap: 5px; 
			margin-bottom: 5px;
			width: auto;
		}
		.meta-input { 
			background: #111; 
			border: 1px solid #555; 
			padding: 5px; 
			text-align: left; 
			width: 100%; 
			box-sizing: border-box; 
		}
		.meta-textarea { 
			background: #111; 
			border: 1px solid #555; 
			width: 100%; 
			height: 180px; 
			margin-top: 5px; 
			resize: none; 
			padding: 5px; 
			text-align: left; 
			box-sizing: border-box; 
			grid-column: span 2;
		}