/* Font Faces */
@font-face{font-family:'Server Mono';src:url('../fonts/ServerMono-Regular.woff') format('woff');font-weight:400}
@font-face{font-family:'Hauora Sans';src:url('../fonts/Hauora-Bold.woff2') format('woff2');font-weight:700}
@font-face{font-family:'IBM Model3x Alt4';src:url('../modules/sr71blackbird/fonts/Web437_IBM_Model3x_Alt4.woff') format('woff')}
@font-face{font-family:'Space Grotesk';src:url('../fonts/SpaceGrotesk-Medium.woff') format('woff');font-weight:500}
@font-face{font-family:'Gajraj One';src:url('../fonts/GajrajOne-Regular.woff') format('woff');font-weight:400}
@font-face{font-family:'Kings';src:url('../fonts/Kings-Regular.woff') format('woff');font-weight:400}
@font-face{font-family:'Oswald';src:url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap')}

/* Reset & Base */
*{margin:0;padding:0;box-sizing:border-box}
html{height:100%}
body{font-family:'Server Mono',monospace;background:#000;color:#fff;overflow:hidden;user-select:none;font-size:11px;display:flex;flex-direction:column;height:100vh;margin:0;padding:0;image-rendering:pixelated}

/* Global Controls */
#global-controls{display:flex;align-items:center;gap:15px;padding:8px 15px;box-shadow:0 1px 0 #fff;background:#000;height:35px;flex-shrink:0;position:relative;z-index:1000}
.control-group{display:flex;align-items:center;gap:5px}
.control-group label{font-size:10px;text-transform:uppercase}

/* BPM Control */
.bpm-control-wrapper{display:flex;align-items:stretch;height:18px}
#global-bpm{background:#000;color:#fff;border:1px solid #fff;padding:2px 4px;font-family:inherit;font-size:10px;width:50px;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:ew-resize;height:100%;box-sizing:border-box}
.bpm-arrows{display:flex;flex-direction:column;height:100%}
.bpm-arrow{background:#000;color:#fff;border:1px solid #fff;width:16px;flex:1;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:6px;line-height:1;box-sizing:border-box}
.bpm-arrow:hover{background:#fff;color:#000}
.bpm-arrow.up{border-bottom:none}

/* Form Elements */
input[type="number"],select{background:#000;color:#fff;border:1px solid #fff;padding:2px 4px;font-family:inherit;font-size:10px;width:50px;appearance:none;-webkit-appearance:none;-moz-appearance:none}
select{width:70px;background:#000;color:#fff;border:1px solid #fff;padding:2px 16px 2px 4px;cursor:pointer;font-family:'Server Mono',monospace;font-size:10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 0l4 4 4-4z' fill='%23fff'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center}
select:hover{background-color:#111}
select:focus{outline:1px solid #fff;outline-offset:-1px}
select option{background:#000;color:#fff}

/* Preset Controls */
#preset-controls{display:flex;gap:5px;align-items:center}
#preset-select{background:#000;color:#fff;border:1px solid #fff;font-family:'Server Mono',monospace;font-size:10px;text-transform:uppercase;width:120px}

/* Checkboxes */
input[type="checkbox"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border:1px solid #fff;background:#000;cursor:pointer;position:relative;margin-right:4px}
input[type="checkbox"]:checked::after{content:'X';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:10px;font-weight:bold}

/* Buttons */
button{background:#000;color:#fff;border:1px solid #fff;padding:2px 8px;font-family:inherit;font-size:10px;text-transform:uppercase;cursor:pointer;height:20px;display:flex;align-items:center;justify-content:center;line-height:1;position:relative}
button:hover{background:#fff;color:#000}
button.active{background:#fff;color:#000}
#add-module,#releases-btn,#routing-toggle{position:relative}
#add-module{font-size:9px;padding:4px 8px;background:#000;color:#fff;border:1px solid #fff;text-transform:uppercase;letter-spacing:0.5px}
#add-module:hover{background:#fff;color:#000;border-color:#fff}
#releases-btn{font-size:9px;padding:4px 8px;background:#000;color:#fff;border:1px solid #fff;text-transform:uppercase;letter-spacing:0.5px}
#releases-btn:hover{background:#fff;color:#000;border-color:#fff}

/* Volume Bar */
#global-volume-bar{width:80px;height:16px;background:#000;border:1px solid #fff;position:relative;cursor:pointer}
#global-volume-fill{position:absolute;left:0;top:0;height:100%;background:#fff;width:80%;pointer-events:none}
#global-volume-group{margin-left:auto;display:flex;align-items:center;gap:5px}

/* Logo */
#logo{font-family:'Hauora Sans',Helvetica,Arial,sans-serif;font-weight:400;font-size:18px;line-height:20px;color:#fff;margin-right:20px;display:flex;align-items:center;height:20px}
#version{font-family:'Server Mono',monospace;font-size:8px;color:#666;margin-left:5px;font-weight:normal}

/* Settings Dropdown */
#settings-dropdown{position:relative}
#settings-dropdown-btn{background:#000;color:#fff;border:1px solid #fff;padding:4px 10px;font-family:'Server Mono',monospace;font-size:10px;cursor:pointer;display:flex;align-items:center;gap:6px;text-transform:uppercase}
#settings-dropdown-btn:hover{background:#fff;color:#000}
#settings-dropdown.open #settings-dropdown-btn{background:#fff;color:#000}
#settings-dropdown-panel{display:none;position:absolute;top:100%;left:0;background:#000;border:1px solid #fff;border-top:none;min-width:180px;z-index:2000;padding:10px}
#settings-dropdown.open #settings-dropdown-panel{display:block}
.dropdown-section{display:flex;flex-direction:column;gap:8px}
.dropdown-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dropdown-row label{font-size:9px;text-transform:uppercase;color:#fff;min-width:70px}
.dropdown-row select{background:#000;color:#fff;border:1px solid #fff;padding:3px 5px;font-family:'Server Mono',monospace;font-size:10px;min-width:60px}
.dropdown-row input[type="checkbox"]{width:14px;height:14px;accent-color:#fff}
.dropdown-divider{height:0;margin:10px 0}
.dropdown-buttons{gap:4px}
.dropdown-buttons button{width:100%;background:#000;color:#fff;border:1px solid #fff;padding:6px 10px;font-family:'Server Mono',monospace;font-size:9px;text-transform:uppercase;cursor:pointer;text-align:left}
.dropdown-buttons button:hover{background:#fff;color:#000}
.dropdown-buttons button.active{background:#fff;color:#000}
.dropdown-buttons-row{display:flex;flex-direction:row;gap:4px}
.dropdown-buttons-row button{flex:1;background:#000;color:#fff;border:1px solid #fff;padding:6px 10px;font-family:'Server Mono',monospace;font-size:9px;text-transform:uppercase;cursor:pointer;text-align:center}
.dropdown-buttons-row button:hover{background:#fff;color:#000}
#settings-dropdown .bpm-control-wrapper{display:flex;align-items:center}
#settings-dropdown #global-bpm{width:50px;background:#000;color:#fff;border:1px solid #fff;padding:3px 5px;font-family:'Server Mono',monospace;font-size:10px;text-align:center}
#settings-dropdown .bpm-arrows{display:flex;flex-direction:column;margin-left:2px}
#settings-dropdown .bpm-arrow{font-size:6px;line-height:7px;cursor:pointer;padding:0 3px;color:#fff}
#settings-dropdown .bpm-arrow:hover{background:#fff;color:#000}

/* Module Grid */
#module-grid-wrapper{position:relative;flex:1;overflow:auto;min-height:0;width:100%;scrollbar-width:none;-ms-overflow-style:none}
#module-grid-wrapper::-webkit-scrollbar{display:none}
#module-grid{position:relative;width:10000px;height:10000px;background-color:#000;background-image:url("data:image/svg+xml,%3Csvg width='25' height='25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1.275' height='1.275' fill='rgba(255,255,255,0.4)'/%3E%3C/svg%3E");background-size:25px 25px;background-position:0 0}

/* Module Containers */
.module-container{position:absolute;background:#000;border:1px solid #fff;display:flex;flex-direction:column;min-width:75px;min-height:125px;z-index:10}
.module-container.dragging{z-index:500;opacity:0.9}
.module-container.error{background-color:#300;border-color:#f00}
.module-container.disconnected{border-style:dashed}
.module-container.minimized{min-height:25px!important;height:25px!important}
.module-container.minimized .module-element{display:none}
.module-container.minimized .resize-handle{display:none}
.module-container.selected{border-style:dashed!important}
.module-container.group-dragging{opacity:0.8}
.module-container.scene-hidden{display:none!important}

/* Module Header */
.module-header{display:flex;justify-content:space-between;align-items:center;padding:4px 6px;border-bottom:1px solid #fff;background:#000;cursor:move;height:25px;flex-shrink:0;position:relative}
.module-title{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#fff;display:flex;align-items:center;gap:5px;transition:all 0.15s ease}
.minimize-toggle{width:12px;height:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:10px;transform:rotate(0deg)}
.minimize-toggle:hover{opacity:0.7}
.minimize-toggle.minimized{transform:rotate(180deg)}

/* Routing Mode Header Transformations */
body.routing-active .module-header{justify-content:center}
body.routing-active .module-controls{display:none}
body.routing-active .module-title{flex:1;justify-content:center;text-align:center}
body.routing-active .minimize-toggle{display:none}

/* Module-specific styles */
.module-container.impactos-module{border:1px solid #F4D03F}
.module-container.impactos-module .module-header{border-bottom:1px solid #F4D03F}
.module-container.impactos-module .module-title{font-family:Helvetica,Arial,sans-serif;font-size:14px;text-transform:none;letter-spacing:0;color:#F4D03F;font-weight:bold}
.module-container.impactos-module .module-controls button{border-color:#F4D03F;color:#F4D03F}
.module-container.impactos-module .module-controls button:hover{background:#F4D03F;color:#000}

.module-container.splintercell-module{border:1px solid #00ffff}
.module-container.splintercell-module .module-header{border-bottom:1px solid #00ffff}
.module-container.splintercell-module .module-title{font-family:'Server Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#00ffff;font-weight:bold}
.module-container.splintercell-module .module-controls button{border-color:#00ffff;color:#00ffff}
.module-container.splintercell-module .module-controls button:hover{background:#00ffff;color:#000}

.module-container.bonk-module{border:1px solid #d4c2ff;min-height:125px}
.module-container.bonk-module .module-header{border-bottom:1px solid #d4c2ff}
.module-container.bonk-module .module-title{font-family:'Gajraj One',sans-serif;font-size:22px;text-transform:uppercase;letter-spacing:0;color:#d4c2ff;font-weight:400;line-height:1}
.module-container.bonk-module .module-controls button{border-color:#d4c2ff;color:#d4c2ff}
.module-container.bonk-module .module-controls button:hover{background:#d4c2ff;color:#000}

.module-container.brickhouse-module .module-title{font-family:'Courier New',monospace!important;font-weight:bold;font-size:14px;text-transform:none}

.module-container.bouncecastle-module{border:1px solid #ff69b4}
.module-container.bouncecastle-module .module-header{border-bottom:1px solid #ff69b4}
.module-container.bouncecastle-module .module-title{font-family:Helvetica,Arial,sans-serif;font-size:14px;text-transform:none;letter-spacing:0;color:#ff69b4;font-weight:400}
.module-container.bouncecastle-module .module-controls button{border-color:#ff69b4;color:#ff69b4}
.module-container.bouncecastle-module .module-controls button:hover{background:#ff69b4;color:#000}

.module-container.sr71blackbird-module .module-header{background:#bfff00;border-bottom:1px solid #000}
.module-container.sr71blackbird-module .module-title{font-family:'IBM Model3x Alt4','Server Mono',monospace;font-size:14px;text-transform:uppercase;letter-spacing:0;color:#000;font-weight:normal}
.module-container.sr71blackbird-module .module-controls button{background:#000;color:#bfff00;border:1px solid #000}
.module-container.sr71blackbird-module .module-controls button:hover{background:#333;color:#bfff00}

.module-container.stringtheory-module .module-header{background:#1d22b8;border-bottom:1px solid #fff}
.module-container.stringtheory-module .module-title{font-family:'Space Grotesk',sans-serif;font-size:16px;text-transform:none;letter-spacing:0;color:#fff;font-weight:500}
.module-container.stringtheory-module .module-controls button{background:#1d22b8;color:#fff;border:1px solid #fff}
.module-container.stringtheory-module .module-controls button:hover{background:#fff;color:#1d22b8}

.module-container.gauntlet-module{border:1px solid #e6ff66}
.module-container.gauntlet-module .module-header{border-bottom:1px solid #e6ff66}
.module-container.gauntlet-module .module-title{font-family:'Kings',sans-serif;font-size:16px;text-transform:none;letter-spacing:0;color:#e6ff66;font-weight:400}
.module-container.gauntlet-module .module-controls button{border-color:#e6ff66;color:#e6ff66}
.module-container.gauntlet-module .module-controls button:hover{background:#e6ff66;color:#000}

.module-container.wingman-module{border:1px solid #bfff00}
.module-container.wingman-module .module-header{border-bottom:1px solid #bfff00}
.module-container.wingman-module .module-title{color:#bfff00}
.module-container.wingman-module .module-controls button{border-color:#bfff00;color:#bfff00}
.module-container.wingman-module .module-controls button:hover{background:#bfff00;color:#000}

.module-container.mouuse-module{border:1px solid #00ff88;background:#0F0F0F}
.module-container.mouuse-module .module-header{background:#0F0F0F;border-bottom:1px solid #00ff88}
.module-container.mouuse-module .module-title{color:#00ff88}
.module-container.mouuse-module .minimize-toggle{color:#00ff88}
.module-container.mouuse-module .module-controls button{background:#0F0F0F;border-color:#00ff88;color:#00ff88}
.module-container.mouuse-module .module-controls button:hover{background:#00ff88;color:#0F0F0F}

.module-container.assembly-module{border:1px solid #a0b0b0}
.module-container.assembly-module .module-header{background:#0a1212;border-bottom:1px solid #a0b0b0}
.module-container.assembly-module .module-title{color:#a0b0b0}
.module-container.assembly-module .minimize-toggle{color:#a0b0b0}
.module-container.assembly-module .module-controls button{background:#0a1212;border-color:#a0b0b0;color:#a0b0b0}
.module-container.assembly-module .module-controls button:hover{background:#a0b0b0;color:#0a1212}

.module-container.pegasus-module{border:1px solid #d4a017;background:#2d2418}
.module-container.pegasus-module .module-header{background:#2d2418;border-bottom:1px solid #d4a017}
.module-container.pegasus-module .module-title{color:#d4a017}
.module-container.pegasus-module .minimize-toggle{color:#d4a017}
.module-container.pegasus-module .module-controls button{background:#2d2418;border-color:#d4a017;color:#d4a017}
.module-container.pegasus-module .module-controls button:hover{background:#d4a017;color:#2d2418}

.module-container.dork-module{border:1px solid #ff4466}
.module-container.dork-module .module-header{border-bottom:1px solid #ff4466}
.module-container.dork-module .module-title{color:#ff4466}
.module-container.dork-module .minimize-toggle{color:#ff4466}
.module-container.dork-module .module-controls button{border-color:#ff4466;color:#ff4466}
.module-container.dork-module .module-controls button:hover{background:#ff4466;color:#000}

.module-container.timeline-module{border:1px solid #f0d000}
.module-container.timeline-module .module-header{border-bottom:1px solid #f0d000}
.module-container.timeline-module .module-title{color:#f0d000}
.module-container.timeline-module .minimize-toggle{color:#f0d000}
.module-container.timeline-module .module-controls button{border-color:#f0d000;color:#f0d000}
.module-container.timeline-module .module-controls button:hover{background:#f0d000;color:#000}

.module-container.cumulus-module{border:1px solid #dff3ff;background:#111216}
.module-container.cumulus-module .module-header{background:#111216;border-bottom:1px solid #dff3ff}
.module-container.cumulus-module .module-title{color:#dff3ff}
.module-container.cumulus-module .minimize-toggle{color:#dff3ff}
.module-container.cumulus-module .module-controls button{background:#111216;border-color:#dff3ff;color:#dff3ff}
.module-container.cumulus-module .module-controls button:hover{background:#dff3ff;color:#111216}

.module-container.warehouse-module{border:1px solid #000;background:#99D68F}
.module-container.warehouse-module .module-header{background:#99D68F;border-bottom:1px solid #000}
.module-container.warehouse-module .module-title{font-family:'Oswald',sans-serif;font-size:14px;text-transform:uppercase;letter-spacing:0;color:#000;font-weight:400}
.module-container.warehouse-module .minimize-toggle{color:#000}
.module-container.warehouse-module .module-controls button{background:#99D68F;border-color:#000;color:#000}
.module-container.warehouse-module .module-controls button:hover{background:#000;color:#99D68F}

/* DOS_BASS - Windows 95/98 Style */
.module-container.dos-bass-module{border:1px solid #1084d0}
.module-container.dos-bass-module .module-header{background:linear-gradient(90deg,#000080 0%,#1084d0 100%);border-bottom:1px solid #1084d0}
.module-container.dos-bass-module .module-title{font-family:'Server Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#fff;font-weight:bold}
.module-container.dos-bass-module .minimize-toggle{color:#fff}
.module-container.dos-bass-module .module-controls button{background:#c0c0c0;border:2px solid;border-color:#fff #808080 #808080 #fff;color:#000;box-shadow:inset -1px -1px 0 #404040,inset 1px 1px 0 #dfdfdf}
.module-container.dos-bass-module .module-controls button:hover{background:#d4d4d4}
.module-container.dos-bass-module .module-controls button.active{background:#808080;border-color:#808080 #fff #fff #808080;color:#000;box-shadow:inset 1px 1px 0 #404040}

/* Rodeo Module */
.module-container.rodeo-module{border:1px solid #e8c47c}
.module-container.rodeo-module .module-header{background:#000;border-bottom:1px solid #e8c47c}
.module-container.rodeo-module .module-title{color:#e8c47c}
.module-container.rodeo-module .minimize-toggle{color:#e8c47c}
.module-container.rodeo-module .module-controls button{background:#000;border-color:#e8c47c;color:#e8c47c}
.module-container.rodeo-module .module-controls button:hover{background:#e8c47c;color:#000}
.module-container.rodeo-module .module-controls button.active{background:#e8c47c;color:#000}

/* Fossil Module */
.module-container.fossil-module{border:1px solid #00FFCC}
.module-container.fossil-module .module-header{background:#000;border-bottom:1px solid #00FFCC}
.module-container.fossil-module .module-title{color:#00FFCC}
.module-container.fossil-module .minimize-toggle{color:#00FFCC}
.module-container.fossil-module .module-controls button{background:#000;border-color:#00FFCC;color:#00FFCC}
.module-container.fossil-module .module-controls button:hover{background:#00FFCC;color:#000}
.module-container.fossil-module .module-controls button.active{background:#00FFCC;color:#000}

/* Strobe Module */
.module-container.strobe-module{border:1px solid #FF00AA}
.module-container.strobe-module .module-header{background:#000;border-bottom:1px solid #FF00AA}
.module-container.strobe-module .module-title{color:#FF00AA}
.module-container.strobe-module .minimize-toggle{color:#FF00AA}
.module-container.strobe-module .module-controls button{background:#000;border-color:#FF00AA;color:#FF00AA}
.module-container.strobe-module .module-controls button:hover{background:#FF00AA;color:#000}
.module-container.strobe-module .module-controls button.active{background:#FFFF00;color:#000;border-color:#FFFF00}

/* Wavepool Module */
.module-container.wavepool-module{border:1px solid #00FFFF;background:#1a1a1a}
.module-container.wavepool-module .module-header{background:#000;border-bottom:1px solid #00FFFF}
.module-container.wavepool-module .module-title{color:#00FFFF}
.module-container.wavepool-module .minimize-toggle{color:#00FFFF}
.module-container.wavepool-module .module-controls button{background:#1a1a1a;border-color:#00FFFF;color:#00FFFF}
.module-container.wavepool-module .module-controls button:hover{background:#00FFFF;color:#1a1a1a}
.module-container.wavepool-module .module-controls button.active{background:#00FFFF;color:#1a1a1a}

/* Hotplate Module */
.module-container.hotplate-module{border:1px solid #ff9500;background:#111111}
.module-container.hotplate-module .module-header{background:#111111;border-bottom:1px solid #ff9500}
.module-container.hotplate-module .module-title{color:#ff9500}
.module-container.hotplate-module .minimize-toggle{color:#ff9500}
.module-container.hotplate-module .module-controls button{background:#111111;border-color:#ff9500;color:#ff9500}
.module-container.hotplate-module .module-controls button:hover{background:#ff9500;color:#111111}
.module-container.hotplate-module .module-controls button.active{background:#ff9500;color:#111111}

/* Recipe Module */
.module-container.recipe-module{border:1px solid #ff6b35;background:#1a1a1a}
.module-container.recipe-module .module-header{background:#1a1a1a;border-bottom:1px solid #ff6b35}
.module-container.recipe-module .module-title{color:#ff6b35}
.module-container.recipe-module .minimize-toggle{color:#ff6b35}
.module-container.recipe-module .module-controls button{background:#1a1a1a;border-color:#ff6b35;color:#ff6b35}
.module-container.recipe-module .module-controls button:hover{background:#ff6b35;color:#1a1a1a}
.module-container.recipe-module .module-controls button.active{background:#ff6b35;color:#1a1a1a}

/* Media Player Module */
.module-container.mediaplayer-module{border:1px solid #c4b5fd;background:#000000}
.module-container.mediaplayer-module .module-header{background:#000000;border-bottom:1px solid #c4b5fd}
.module-container.mediaplayer-module .module-title{color:#c4b5fd}
.module-container.mediaplayer-module .minimize-toggle{color:#c4b5fd}
.module-container.mediaplayer-module .module-controls button{background:#000000;border-color:#c4b5fd;color:#c4b5fd}
.module-container.mediaplayer-module .module-controls button:hover{background:#c4b5fd;color:#000000}
.module-container.mediaplayer-module .module-controls button.active{background:#c4b5fd;color:#000000}

/* Possession Module */
.module-container.possession-module{border:1px solid #00ffcc;background:#0a0a0a}
.module-container.possession-module .module-header{background:#0a0a0a;border-bottom:1px solid #00ffcc}
.module-container.possession-module .module-title{color:#00ffcc}
.module-container.possession-module .minimize-toggle{color:#00ffcc}
.module-container.possession-module .module-controls button{background:#0a0a0a;border-color:#00ffcc;color:#00ffcc}
.module-container.possession-module .module-controls button:hover{background:#00ffcc;color:#0a0a0a}
.module-container.possession-module .module-controls button.active{background:#00ffcc;color:#0a0a0a}

/* Seance Module */
.module-container.seance-module{border:1px solid #402040;background:#2a1a2a}
.module-container.seance-module .module-header{background:#2a1a2a;border-bottom:1px solid #402040}
.module-container.seance-module .module-title{color:#e0a0e0}
.module-container.seance-module .minimize-toggle{color:#e0a0e0}
.module-container.seance-module .module-controls button{background:#2a1a2a;border-color:#402040;color:#e0a0e0}
.module-container.seance-module .module-controls button:hover{background:#402040;color:#e0a0e0}
.module-container.seance-module .module-controls button.active{background:#e0a0e0;color:#2a1a2a}

/* Floss Module */
.module-container.floss-module{border:1px solid #9A7B0A;background:#000000}
.module-container.floss-module .module-header{background:#000000;border-bottom:1px solid #9A7B0A}
.module-container.floss-module .module-title{color:#FF5500}
.module-container.floss-module .minimize-toggle{color:#FF5500}
.module-container.floss-module .module-controls button{background:#000000;border-color:#9A7B0A;color:#FF5500}
.module-container.floss-module .module-controls button:hover{background:#9A7B0A;color:#FF5500}
.module-container.floss-module .module-controls button.active{background:#CC66FF;color:#000000;border-color:#CC66FF}

/* Garnish Module */
.module-container.garnish-module{border:1px solid #A8B5BC;background:#3D4654}
.module-container.garnish-module .module-header{background:#3D4654;border-bottom:1px solid #A8B5BC}
.module-container.garnish-module .module-title{color:#A8B5BC}
.module-container.garnish-module .minimize-toggle{color:#A8B5BC}
.module-container.garnish-module .module-controls button{background:#3D4654;border-color:#A8B5BC;color:#A8B5BC}
.module-container.garnish-module .module-controls button:hover{background:#C4D93E;color:#3D4654;border-color:#C4D93E}
.module-container.garnish-module .module-controls button.active{background:#D94E2A;color:#3D4654;border-color:#D94E2A}

/* MWEO Module */
.module-container.mweo-module{border:1px solid #A3AB91;background:#262A26}
.module-container.mweo-module .module-header{background:#262A26;border-bottom:1px solid #A3AB91}
.module-container.mweo-module .module-title{font-family:'Server Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#A3AB91;font-weight:normal}
.module-container.mweo-module .minimize-toggle{color:#A3AB91}
.module-container.mweo-module .module-controls button{background:#262A26;border-color:#A3AB91;color:#A3AB91}
.module-container.mweo-module .module-controls button:hover{background:#A3AB91;color:#262A26}
.module-container.mweo-module .module-controls button.active{background:#A3AB91;color:#262A26}

.module-container.stock-module{min-height:75px}
.module-container.stock-module .module-header{padding:2px 4px}
.module-container.stock-module .module-title{font-size:9px}
.module-container.stock-module .module-controls button{padding:1px 3px;font-size:8px;height:14px}

/* Stock Sampler Module */
.module-container.stock-sampler-module{border:1px solid #E94E1B;background:#000}
.module-container.stock-sampler-module .module-header{background:#000;border-bottom:1px solid #E94E1B}
.module-container.stock-sampler-module .module-title{color:#E94E1B}
.module-container.stock-sampler-module .minimize-toggle{color:#E94E1B}
.module-container.stock-sampler-module .module-controls button{background:#000;border-color:#E94E1B;color:#E94E1B}
.module-container.stock-sampler-module .module-controls button:hover{background:#E94E1B;color:#000}
.module-container.stock-sampler-module .module-controls button.active{background:#E94E1B;color:#000}

/* Tute Module */
.module-container.tute-module{border:1px solid #fff;background:#b5485d}
.module-container.tute-module .module-header{background:#b5485d;border-bottom:1px solid #fff}
.module-container.tute-module .module-title{color:#fff}
.module-container.tute-module .minimize-toggle{color:#fff}
.module-container.tute-module .module-controls button{background:#b5485d;border-color:#fff;color:#fff}
.module-container.tute-module .module-controls button:hover{background:#fff;color:#b5485d}
.module-container.tute-module .module-controls button.active{background:#fff;color:#b5485d}

/* Pickle Module */
.module-container.pickle-module{border:1px solid #6B8F71;background:#0A0A0A}
.module-container.pickle-module .module-header{background:#0A0A0A;border-bottom:1px solid #6B8F71}
.module-container.pickle-module .module-title{color:#E85BAE}
.module-container.pickle-module .minimize-toggle{color:#E85BAE}
.module-container.pickle-module .module-controls button{background:#0A0A0A;border-color:#6B8F71;color:#E85BAE}
.module-container.pickle-module .module-controls button:hover{background:#D4E422;color:#0A0A0A;border-color:#D4E422}
.module-container.pickle-module .module-controls button.active{background:#D4E422;color:#0A0A0A;border-color:#D4E422}

/* Arp Buddy Module */
.module-container.arpbuddy-module{border:1px solid #FD301B;background:#1A1D24}
.module-container.arpbuddy-module .module-header{background:#1A1D24;border-bottom:1px solid #FD301B}
.module-container.arpbuddy-module .module-title{color:#FD301B}
.module-container.arpbuddy-module .minimize-toggle{color:#FD301B}
.module-container.arpbuddy-module .module-controls button{background:#1A1D24;border-color:#FD301B;color:#FD301B}
.module-container.arpbuddy-module .module-controls button:hover{background:#FD301B;color:#1A1D24}
.module-container.arpbuddy-module .module-controls button.active{background:#FD301B;color:#1A1D24}

/* Lunchbox Module */
.module-container.lunchbox-module{border:1px solid #FF8B3D;background:#FF8B3D}
.module-container.lunchbox-module .module-header{background:#FF8B3D;border-bottom:1px solid #FF8B3D}
.module-container.lunchbox-module .module-title{font-family:Helvetica,Arial,sans-serif;font-size:14px;text-transform:none;letter-spacing:0;color:#000;font-weight:bold}
.module-container.lunchbox-module .minimize-toggle{color:#000}
.module-container.lunchbox-module .module-controls button{background:#FF8B3D;border-color:#000;color:#000}
.module-container.lunchbox-module .module-controls button:hover{background:#000;color:#FF8B3D}
.module-container.lunchbox-module .module-controls button.active{background:#000;color:#FF8B3D}

/* MidiMix Module - header only, no content area */
.module-container.midimix-module{height:27px!important;min-height:0!important;max-height:27px!important;overflow:hidden!important;border-bottom:none!important}
.module-container.midimix-module .module-element{display:none!important}
.module-container.midimix-module .resize-handle{display:none!important}

/* Custom Module Active Button States - Proper Inversion */
.module-container.impactos-module .module-controls button.active{background:#F4D03F;color:#000}
.module-container.splintercell-module .module-controls button.active{background:#00ffff;color:#000}
.module-container.bonk-module .module-controls button.active{background:#d4c2ff;color:#000}
.module-container.bouncecastle-module .module-controls button.active{background:#ff69b4;color:#000}
.module-container.sr71blackbird-module .module-controls button.active{background:#000;color:#bfff00}
.module-container.stringtheory-module .module-controls button.active{background:#fff;color:#1d22b8}
.module-container.gauntlet-module .module-controls button.active{background:#e6ff66;color:#000}
.module-container.wingman-module .module-controls button.active{background:#bfff00;color:#000}
.module-container.mouuse-module .module-controls button.active{background:#00ff88;color:#0F0F0F}
.module-container.assembly-module .module-controls button.active{background:#a0b0b0;color:#0a1212}
.module-container.pegasus-module .module-controls button.active{background:#d4a017;color:#2d2418}
.module-container.dork-module .module-controls button.active{background:#ff4466;color:#000}
.module-container.timeline-module .module-controls button.active{background:#f0d000;color:#000}
.module-container.cumulus-module .module-controls button.active{background:#dff3ff;color:#111216}
.module-container.warehouse-module .module-controls button.active{background:#000;color:#99D68F}
.module-container.wavepool-module .module-controls button.active{background:#00FFFF;color:#1a1a1a}
.module-container.hotplate-module .module-controls button.active{background:#ff9500;color:#111111}
.module-container.mweo-module .module-controls button.active{background:#A3AB91;color:#262A26}

/* Module Controls */
.module-controls{display:flex;gap:4px;align-items:center}
.module-controls button{padding:1px 4px;font-size:9px;height:18px}
.module-controls .remove-btn{font-size:14px;font-weight:normal}
.module-volume{display:none}
.disconnect-btn.active{background:#f80!important;color:#000!important}
.module-element{flex:1;width:100%;border:none;background:#000;min-height:0;display:block;overflow:hidden;position:relative}
.resize-handle{position:absolute;bottom:0;right:0;width:10px;height:10px;cursor:nwse-resize;border-left:1px solid #fff;border-top:1px solid #fff;opacity:0.3}
.module-container:hover .resize-handle{opacity:1}

/* Audio Jacks - Positioned in header */
.module-io{position:absolute;top:0;left:0;right:0;height:25px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:30;visibility:hidden}
body.routing-active .module-io{visibility:visible;pointer-events:auto;z-index:10000}
.audio-jack{width:25px;height:25px;border:2px solid;background:#000;pointer-events:none;cursor:pointer;position:relative;image-rendering:pixelated;display:inline-block;flex-shrink:0}
body.routing-active .audio-jack{pointer-events:auto;z-index:10001}
.audio-jack.input{border-color:#0ff}
.audio-jack.output{border-color:#0ff}
.audio-jack.midi-input{border-color:#ff0;background:#220}
.audio-jack.midi-output{border-color:#ff0;background:#220}
.audio-jack:hover{transform:scale(1.2);filter:brightness(1.8);z-index:100}

/* Cables */
#cable-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5}
.audio-cable{stroke-width:2;fill:none;opacity:0.9;stroke-linecap:round;stroke-linejoin:round;stroke:#0ff;stroke-dasharray:5,10;animation:data-flow 2s linear infinite}
.midi-cable{stroke:#ff0;stroke-dasharray:5,10;fill:none;stroke-width:2;opacity:0.9;stroke-linecap:round;stroke-linejoin:round;animation:data-flow 2s linear infinite}
@keyframes data-flow{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-15}}
.temp-cable{stroke:#ff0;stroke-width:2;fill:none;stroke-dasharray:5,10;animation:temp-dash 0.5s linear infinite;stroke-linecap:round;stroke-linejoin:round}
@keyframes temp-dash{to{stroke-dashoffset:-15}}
.cable-delete{fill:#f00;stroke:#fff;stroke-width:1;cursor:pointer;opacity:0}
.audio-cable:hover+.cable-delete,.cable-delete:hover{opacity:1}
.cable-node{fill:#fff;stroke:none}

/* Modals */
.modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#000;border:2px solid #fff;padding:0;z-index:2000;width:812px;max-height:600px;overflow:hidden}
.modal.modal-wide{width:1220px;max-height:90vh}
.modal.modal-wide .modal-content{max-height:calc(90vh - 50px)}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid #fff}
.modal h3{font-size:11px;text-transform:uppercase;margin:0}
.modal-close{background:#000;color:#fff;border:1px solid #fff;padding:2px 6px;cursor:pointer;font-size:14px;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:#fff;color:#000}
.modal-content{max-height:550px;overflow-y:auto;padding:5px}

/* Module Selector Styles */
.module-grid-compact{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:0}
.module-category{margin-bottom:12px}
.category-title{font-size:9px;font-weight:bold;color:#fff;margin-bottom:6px;text-transform:uppercase;padding-bottom:4px}
.module-option{padding:8px;margin:4px 0;border:1px solid #fff;cursor:pointer;font-size:9px;min-height:45px;display:flex;flex-direction:column;justify-content:center}
.module-option:hover{background:#fff;color:#000}
.module-name{font-weight:bold;margin-bottom:3px;font-size:10px}
.module-description{font-size:8px;opacity:0.8;line-height:1.3}
.device-class{font-size:8px;opacity:0.7;margin-left:4px;color:#888}
.stock-section{margin-bottom:12px}
.stock-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.stock-option{padding:4px 8px;border:1px solid #666;cursor:pointer;font-size:8px;text-align:center;min-width:65px;flex:1}
.stock-option:hover{background:#fff;color:#000;border-color:#fff}
.column-left{display:flex;flex-direction:column;gap:12px}
.column-right{display:flex;flex-direction:column;gap:12px}
.compact-group{display:flex;flex-direction:column;gap:3px}
.compact-row{display:flex;gap:3px;flex-wrap:wrap}
.compact-module{padding:8px 10px;border:1px solid #fff;cursor:pointer;font-size:9px;flex:1;min-width:120px;min-height:45px;display:flex;flex-direction:column;justify-content:center}
.compact-module:hover{background:#fff;color:#000}
.compact-module-name{font-weight:bold;margin-bottom:2px}
.compact-module-desc{font-size:8px;opacity:0.8}

/* Status Bar */
#status-bar{position:fixed;bottom:0;left:0;right:0;height:20px;background:#000;border-top:1px solid #fff;display:flex;align-items:center;padding:0 10px;font-size:10px;gap:20px;z-index:1000}

/* VU Meter */
#vu-meter-container{display:flex;align-items:center;gap:3px}
#vu-meter{width:75px;height:12px;display:flex;gap:1px;background:#000;border:1px solid #444;padding:2px}
.vu-bar{flex:1;background:#000;transition:background 0.05s}
.vu-bar.active{background:#00ff00}
.vu-bar.active.yellow{background:#ffff00}
.vu-bar.active.orange{background:#ff9900}
.vu-bar.active.red{background:#ff0000}
#vu-peak{color:#666;font-size:9px;font-family:'Server Mono',monospace}

/* Overlays and Indicators */
.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:1999;display:none}
.snap-indicator{position:absolute;border:1px dashed #666;pointer-events:none;display:none}
.tooltip{position:absolute;background:#000;border:1px solid #fff;padding:4px 8px;font-size:10px;pointer-events:none;z-index:10000;display:none;white-space:nowrap}
#size-display{position:fixed;top:45px;left:50%;transform:translateX(-50%);background:#000;border:1px solid #fff;padding:4px 8px;display:none;z-index:1000;font-size:10px;font-family:'Server Mono',monospace}
#size-display.visible{display:block}
#midi-indicator{display:none}
#midi-indicator.active{background:#0f0}
#metronome-indicator{position:fixed;top:45px;right:10px;width:40px;height:40px;border:2px solid #fff;border-radius:50%;background:#000;display:none;align-items:center;justify-content:center;font-size:20px;font-weight:bold;z-index:100}
#metronome-indicator.active{display:flex}
#metronome-indicator.tick{background:#ff0;color:#000}
#error-display{position:fixed;top:45px;left:50%;transform:translateX(-50%);background:#000;border:2px solid #f00;padding:10px 20px;display:none;z-index:2001;max-width:400px}
#error-display.visible{display:block}
.error-message{color:#ff0;margin-bottom:10px;font-size:12px}
.error-details{color:#f88;font-size:10px;margin-bottom:10px}
.error-close{background:#f00;color:#fff;border:none;padding:4px 10px;cursor:pointer;font-size:10px}
.error-close:hover{background:#f44}
#routing-hint{position:fixed;top:45px;left:50%;transform:translateX(-50%);background:#000;border:2px solid #0ff;padding:10px 20px;display:none;z-index:2000;font-size:11px;color:#0ff;text-align:center}
#routing-hint.visible{display:block}
#help-btn{position:fixed;bottom:37.5px;right:37.5px;background:#000;color:#fff;border:1px solid #fff;width:50px;height:50px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:999}
#help-btn:hover{background:#fff;color:#000}

/* Help Modal - Two Column Layout v1.0 */
#help-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#000;border:2px solid #fff;padding:0;z-index:2000;width:560px;overflow:hidden}
#help-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid #fff}
#help-modal h3{font-size:11px;text-transform:uppercase;margin:0}
#help-modal .modal-close{background:#000;color:#fff;border:1px solid #fff;padding:2px 6px;cursor:pointer;font-size:14px;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
#help-modal .modal-close:hover{background:#fff;color:#000}
#help-modal .modal-content{padding:15px;font-size:11px;line-height:1.6}
#help-modal .help-description{margin-bottom:15px;padding-bottom:15px;color:#fff;line-height:1.5}
#help-modal .help-columns{display:flex;gap:25px}
#help-modal .help-column-left{flex:1}
#help-modal .help-column-right{flex:1;padding-left:25px}
#help-modal .help-section{margin-bottom:15px}
#help-modal .help-section h4{font-size:10px;text-transform:uppercase;margin-bottom:8px;font-weight:bold;color:#fff;letter-spacing:1px}
#help-modal .help-section p{margin-bottom:4px;display:flex;align-items:center;gap:8px}
#help-modal .shortcut-key{background:#000;border:1px solid #fff;padding:2px 6px;font-size:9px;min-width:80px;display:inline-block;text-align:center;color:#fff}
#help-modal .creator-name{font-size:12px;font-weight:bold;color:#fff}
#help-modal .creator-link{color:#0af;text-decoration:none}
#help-modal .creator-link:hover{text-decoration:underline}
#help-modal .shortcut-key.shortcut-key-sq{min-width:20px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:9px;line-height:1}
#help-modal .basics-btn{display:inline-block;background:#000;color:#fff;border:1px solid #fff;padding:6px 16px;text-transform:uppercase;font-size:10px;cursor:pointer;font-family:inherit;transition:all 0.15s ease}
#help-modal .basics-btn:hover{background:#fff;color:#000}
#help-modal .help-version{margin-top:auto}
#help-modal .version-text{font-size:9px;color:#666;text-transform:uppercase;letter-spacing:1px}

/* Basics Modal - Beginner Guide */
#basics-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#000;border:2px solid #fff;padding:0;z-index:2000;width:480px;max-height:80vh;overflow:hidden}
#basics-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid #fff}
#basics-modal h3{font-size:11px;text-transform:uppercase;margin:0}
#basics-modal .modal-close{background:#000;color:#fff;border:1px solid #fff;padding:2px 6px;cursor:pointer;font-size:14px;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
#basics-modal .modal-close:hover{background:#fff;color:#000}
.basics-scroll{padding:15px;overflow-y:auto;max-height:calc(80vh - 40px);font-size:11px;line-height:1.6}
.basics-intro{margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid #333;color:#fff;line-height:1.5}
.basics-section{margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid #222}
.basics-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.basics-section h4{font-size:10px;text-transform:uppercase;margin-bottom:8px;font-weight:bold;color:#fff;letter-spacing:1px}
.basics-section p{margin-bottom:6px;color:#ccc}
.basics-section strong{color:#fff}
.basics-section em{font-style:italic;color:#aaa}

/* Drag States */
.drag-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;display:none;cursor:inherit}
body.dragging-module .drag-overlay{display:block;cursor:move}
body.dragging-volume .drag-overlay{display:block;cursor:ns-resize}
body.resizing .drag-overlay{display:block;cursor:nwse-resize}
body.cable-dragging .drag-overlay{display:block;cursor:crosshair}
body.routing-active #module-grid{background-image:linear-gradient(rgba(0,255,255,0.03),rgba(0,255,255,0.03)),url("data:image/svg+xml,%3Csvg width='25' height='25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1.275' height='1.275' fill='rgba(255,255,255,0.4)'/%3E%3C/svg%3E")}
body.routing-active .module-controls{display:none!important}
body.routing-active .minimize-toggle{display:none!important}
body.routing-active .module-title{margin:0 auto;text-align:center}
body.panning{cursor:move!important}
body.panning *{cursor:move!important}

/* Selection Box */
.selection-box{position:absolute;border:1px dashed #fff;background:transparent;pointer-events:none;display:none;z-index:8}

/* Routing Icon */
.routing-icon{width:22.5px;height:22.5px;display:inline-block;vertical-align:middle}

/* Latency Display */
#routing-latency{color:#0f0;font-weight:bold}
#routing-latency.medium{color:#ff0}
#routing-latency.high{color:#f60}
/* v1.8.3 Recording Feature - APPENDED */
#record-btn.recording{background:#f00;color:#fff;animation:record-pulse 1s ease-in-out infinite}
@keyframes record-pulse{0%,100%{opacity:1}50%{opacity:0.6}}
#timecode{font-family:'Server Mono',monospace;font-size:11px;padding:0 8px;color:#fff}
#timecode.playing{color:#fff}
#timecode.recording{color:#f00}
#timecode.recording-tail{color:#f00;animation:timecode-blink 0.5s ease-in-out infinite}
@keyframes timecode-blink{0%,100%{opacity:1}50%{opacity:0.3}}
#export-modal .modal-content{padding:20px}
.export-options{display:flex;flex-direction:column;gap:15px}
.export-format-group{display:flex;flex-direction:column;gap:10px}
.export-format-group label{font-size:12px;text-transform:uppercase;margin-bottom:5px}
.export-format-btn{padding:10px 15px;background:#000;color:#fff;border:1px solid #fff;cursor:pointer;font-family:inherit;font-size:11px}
.export-format-btn:hover{background:#fff;color:#000}
.export-info{font-size:10px;color:#666;text-align:center}
.export-message{padding:20px;text-align:center;font-size:12px}
#overwrite-modal .modal-content{padding:20px}
.overwrite-message{margin-bottom:20px;text-align:center;line-height:1.6}
.overwrite-buttons{display:flex;gap:10px;justify-content:center}
.overwrite-buttons button{padding:8px 15px;font-family:inherit;font-size:10px;cursor:pointer}
#overwrite-cancel{background:#000;color:#fff;border:1px solid #fff}
#overwrite-cancel:hover{background:#333}
#overwrite-confirm{background:#f00;color:#fff;border:1px solid #f00}
#overwrite-confirm:hover{background:#c00}
#recording-status{color:#f00;display:none}

/* Save Project Modal */
#save-project-modal{width:350px}
#save-project-modal .modal-content{padding:20px}
.save-project-form{margin-bottom:20px}
.save-project-form label{display:block;font-size:10px;text-transform:uppercase;margin-bottom:8px}
.save-project-form input{width:100%;background:#000;color:#fff;border:1px solid #fff;padding:8px 10px;font-family:'Server Mono',monospace;font-size:12px;box-sizing:border-box}
.save-project-form input:focus{outline:1px solid #fff;outline-offset:-1px}
.save-project-buttons{display:flex;gap:10px;justify-content:flex-end}
.save-project-buttons button{padding:8px 15px;font-family:inherit;font-size:10px;cursor:pointer}
#save-project-cancel{background:#000;color:#fff;border:1px solid #fff}
#save-project-cancel:hover{background:#333}
#save-project-confirm{background:#fff;color:#000;border:1px solid #fff}
#save-project-confirm:hover{background:#ccc}

/* Releases Modal */
#releases-modal{width:auto;min-width:200px;max-width:700px}
#releases-modal .modal-content{padding:15px}
.releases-grid{display:grid;grid-template-columns:repeat(4,150px);gap:10px;justify-content:center}
.release-tile{position:relative;width:150px;height:150px;cursor:pointer;overflow:hidden;border:1px solid #fff}
.release-tile img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:auto}
.release-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity 0.15s ease}
.release-tile:hover .release-overlay{opacity:1}
.release-title{font-size:10px;font-weight:bold;color:#fff;text-transform:uppercase;text-align:center;padding:0 8px;margin-bottom:4px}
.release-artist{font-size:9px;color:#aaa;text-transform:uppercase;text-align:center;padding:0 8px}

/* v1.8.3 Header Bar Fixes */

/* Hide browser native number input spinners */
#global-bpm::-webkit-inner-spin-button,
#global-bpm::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#global-bpm { -moz-appearance: textfield; }

/* Header layout - no gaps, no padding */
#global-controls { gap: 0; padding: 0; }

/* All direct children in header get consistent styling */
#global-controls > * {
    height: 35px;
    display: flex;
    align-items: center;
    border-left: 1px solid #333;
}

/* First child (logo) - no left border */
#global-controls > *:first-child { border-left: none; }

/* Logo specific */
#logo { padding: 0 15px; }

/* Control groups */
#global-controls .control-group { padding: 0 10px; gap: 5px; }

/* Buttons in header - remove default borders, add left separator */
#global-controls > button {
    box-sizing: border-box;
    height: 35px;
    min-width: 35px;
    padding: 0 10px;
    border: none;
    border-left: 1px solid #333;
    text-decoration: none;
}

/* Remove underline from any button content */
#global-controls > button * { text-decoration: none; }

/* Settings dropdown button - fixed width to prevent layout shift */
#global-controls #settings-dropdown-btn { 
    min-width: 180px; 
    border: none; 
    border-left: 1px solid #333;
    height: 35px;
    padding: 0 10px;
}

/* Timecode display */
#timecode {
    height: 35px;
    min-width: 90px;
    padding: 0 10px;
    border: none;
    border-left: 1px solid #333;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Ensure consistent bottom border across header */
#global-controls::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #fff;
}

/* ============================================================================
   Context Menu - v1.8.4
   ============================================================================ */

.context-menu {
    position: fixed;
    background: #000;
    border: 1px solid #fff;
    min-width: 160px;
    z-index: 10000;
    display: none;
    font-family: 'Server Mono', monospace;
    font-size: 11px;
}

.context-menu-item {
    padding: 8px 12px;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
}

.context-menu-item:hover {
    background: #fff;
    color: #000;
}

.context-menu-item.disabled {
    color: #666;
    cursor: default;
}

.context-menu-item.disabled:hover {
    background: #000;
    color: #666;
}

.context-menu-divider {
    height: 1px;
    background: #333;
    margin: 4px 0;
}

.submenu-arrow {
    font-size: 8px;
    margin-left: 10px;
}

/* Submenu styling */
.context-submenu {
    position: absolute;
    left: 100%;
    top: 0;
    background: #000;
    border: 1px solid #fff;
    min-width: 140px;
    display: none;
    z-index: 10001;
}

.context-menu-item.has-submenu:hover .context-submenu {
    display: block;
}

.context-submenu .context-menu-item {
    padding: 6px 12px;
    color: #fff;  /* Explicit white text - fixes inheritance from hovered parent */
    background: #000;
}

.context-submenu .context-menu-item:hover {
    background: #fff;
    color: #000;
}

/* Adjust submenu position if near right edge */
.context-menu.flip-submenu .context-submenu {
    left: auto;
    right: 100%;
}

@font-face {
  font-family: 'IBM Model3x Alt4';
  src: url('../js/modules/sr71blackbird/fonts/Web437_IBM_Model3x_Alt4.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Cable Disconnect Dropdown - v1.8.5 */
#cable-disconnect-dropdown {
    position: fixed;
    background: #000;
    border: 1px solid #fff;
    min-width: 180px;
    z-index: 10002;
    display: none;
    font-family: 'Server Mono', monospace;
    font-size: 10px;
}

.cable-dropdown-header {
    padding: 6px 10px;
    border-bottom: 1px solid #333;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 9px;
}

.cable-dropdown-list {
    max-height: 200px;
    overflow-y: auto;
}

.cable-dropdown-empty {
    padding: 10px;
    color: #666;
    text-align: center;
    font-style: italic;
}

.cable-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: default;
    border-bottom: 1px solid #222;
}

.cable-dropdown-item:hover {
    background: #111;
}

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

.cable-type {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 10px;
}

.cable-type.audio {
    background: #0ff;
    color: #000;
}

.cable-type.midi {
    background: #ff0;
    color: #000;
}

.cable-source {
    flex: 1;
    color: #fff;
    text-transform: uppercase;
}

.cable-jack {
    color: #888;
    font-size: 9px;
}

.cable-disconnect-btn {
    width: 18px;
    height: 18px;
    background: #300;
    border: 1px solid #f00;
    color: #f00;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.cable-disconnect-btn:hover {
    background: #f00;
    color: #000;
}

.cable-dropdown-disconnect-all {
    padding: 8px 10px;
    background: #200;
    color: #f66;
    text-align: center;
    cursor: pointer;
    border-top: 1px solid #400;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 9px;
}

.cable-dropdown-disconnect-all:hover {
    background: #f00;
    color: #000;
}

@font-face {
  font-family: 'IBM PS-55';
  src: url('../js/modules/mweo/fonts/Web437_IBM_PS-55_re.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'IBM CGAthin';
  src: url('../js/modules/ringtones/fonts/Web437_IBM_CGAthin.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* ============================================================================
   Module Context Menu (Header Right-Click) - v1.9.1
   ============================================================================ */

#module-context-menu {
    z-index: 10002;
}

.mcm-section-header {
    padding: 4px 12px;
    color: #666;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: default;
}

.mcm-section-header:hover {
    background: #000;
    color: #666;
}

.mcm-cable-type {
    color: #888;
    font-size: 9px;
    margin-left: 6px;
}

/* Save Preset Modal - reuses save-project-form classes */
#save-preset-modal {
    width: 350px;
}

#save-preset-modal .modal-content {
    padding: 20px;
}

/* Responsive: narrow/half-width browser */
@media (max-width: 768px) {
    .modal.modal-wide{width:95vw;max-height:90vh}
    .modal.modal-wide .modal-content{max-height:calc(90vh - 50px);overflow-y:auto}
    .module-grid-compact{grid-template-columns:1fr}
}