:root {
            --bg-main: #0d0d0d; --bg-panel: #1a1a1a; --bg-card: #262626;
            --text-main: #e0e0e0; --text-muted: #888;
            --accent: #00bcd4; --accent-hover: #008ba3;
            --danger: #f44336; --warning: #ffb300; --success: #4CAF50;
            --border: #333;
        }

        body { font-family: 'Segoe UI', Tahoma, sans-serif; background: var(--bg-main); color: var(--text-main); margin: 0; padding: 15px; font-size: 14px; }
        .header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--accent); padding-bottom: 10px; margin-bottom: 15px; }
        h1 { margin: 0; font-size: 1.5em; text-transform: uppercase; letter-spacing: 2px; }
        
        .section-panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; padding: 15px; margin-bottom: 15px; }
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
        
        h3 { margin: 0 0 10px 0; font-size: 1em; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 5px; }
        label { font-size: 0.75em; color: var(--text-muted); display: block; margin-bottom: 3px; }
        
        button { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border); padding: 6px 12px; border-radius: 4px; cursor: pointer; transition: 0.2s; font-weight: bold; }
        button:hover:not(:disabled) { background: #333; }
        button:disabled { opacity: 0.5; cursor: not-allowed; }
        button.active { background: var(--accent); color: #000; border-color: var(--accent); }
        button.btn-danger { background: var(--bg-card); border-color: var(--danger); color: var(--danger); }
        button.btn-danger.active { background: var(--danger); color: #fff; }
        button.btn-bypass { padding: 2px 6px; font-size: 0.7em; }
        
        input[type="range"] { width: 100%; margin: 5px 0; accent-color: var(--accent); cursor: pointer; }
        input[type="number"], select, input[type="text"] { background: #111; color: var(--accent); border: 1px solid var(--border); padding: 4px; border-radius: 3px; font-family: monospace; font-size: 0.9em; width: 100%; box-sizing: border-box; }
        input[type="checkbox"] { accent-color: var(--accent); transform: scale(1.2); }
        
        .ctrl-row { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; align-items: center; margin-bottom: 6px; }
        .ctrl-col { display: flex; flex-direction: column; }
        .ctrl-inline { display: grid; grid-template-columns: 1fr 60px; gap: 5px; align-items: center; }
        .flex-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
        .transport-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
        .geq-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
        @media (max-width: 600px) { .geq-grid { grid-template-columns: repeat(3, 1fr); } }
        
        /* Canvas & Meters CSS */
        canvas { width: 100%; height: 150px; background: #000; border-radius: 4px; border: 1px solid #222; display: block; }
        .meter-container { height: 10px; background: #111; border-radius: 3px; border: 1px solid #333; overflow: hidden; margin-top: 5px; position: relative;}
        .vu-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #4CAF50 60%, #ffb300 85%, #f44336 100%); transition: width 0.05s linear; }
        .gr-bar { height: 100%; width: 0%; background: #f44336; float: right; transition: width 0.05s linear; }
        .meter-label { font-size: 0.65em; color: #666; text-align: right; margin-top: 2px;}
        .site-credit { color: var(--text-muted); font-size: 0.8em; text-align: center; padding: 8px 0 2px; }