/* editor/editor.css: the Synth Editor (editor/editor.js) */
#se { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #0c0c0b; color: #e8e4dc;
	font: 13px Antonio, Oswald, "Arial Narrow", sans-serif; letter-spacing: 0.03em; user-select: none; }
#se[hidden], #se [hidden] { display: none !important; }
#se button, #se select, #se input { font: inherit; letter-spacing: inherit; color: #e8e4dc; background: #2b2b29; border: 1px solid #44443f; border-radius: 4px; padding: 3px 8px; }
#se button:hover { background: #3a3a37; }
#se button.on { background: #a33a2e; border-color: #c9483a; color: #fff; }
#se input[type=checkbox] { padding: 0; }
#se input[type=range] { padding: 0; accent-color: #e2574c; }
#se label { display: inline-flex; align-items: center; gap: 6px; color: #b5b1a8; }

.se-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; background: #161615; border-bottom: 1px solid #2c2c2a; }
.se-logo { font: 700 18px Antonio, sans-serif; letter-spacing: 0.1em; color: #e2574c; margin-right: 6px; }
.se-name { width: 150px; text-transform: uppercase; }
.se-tabs { display: flex; gap: 0; margin-left: 8px; }
.se-tabs button { border-radius: 0; }
.se-tabs button:first-child { border-radius: 4px 0 0 4px; }
.se-tabs button:last-child { border-radius: 0 4px 4px 0; }
.se-spacer { flex: 1; }
.se-done { background: #2f6b3a !important; border-color: #3d8a4b !important; font-weight: 700; }

.se-body { flex: 1; display: flex; min-height: 0; }
.se-palette { width: 180px; flex: none; overflow-y: auto; background: #131312; border-right: 1px solid #2c2c2a; padding: 8px; }
.se-palette h4 { margin: 10px 0 6px; font-size: 12px; letter-spacing: 0.1em; color: #f0a43a; }
.se-palette h4:first-child { margin-top: 0; }
.se-pal { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; margin-bottom: 5px; padding: 4px 6px; cursor: grab; touch-action: none;
	background: #1c1c1b; border: 1px solid #2f2f2d; border-radius: 5px; }
.se-pal:hover { border-color: #5a5a55; background: #232321; }
.se-pal:active { cursor: grabbing; }
.se-pal small { display: block; color: #8c8a84; font-size: 10.5px; letter-spacing: 0; font-family: system-ui, sans-serif; line-height: 1.25; }
.se-pal-mod { display: block; }
.se-pal-mod b { font-weight: 700; }
.se-thumb { width: 64px; height: 48px; flex: none; border-radius: 4px; }
.se-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 8px; }
.se-grid .se-pal { flex-direction: column; gap: 3px; margin: 0; padding: 4px 2px 5px; text-align: center; font-size: 11px; line-height: 1.1; }
.se-grid .se-thumb { width: 72px; height: 50px; }
.se-note { color: #8c8a84; font: 12px/1.4 system-ui, sans-serif; letter-spacing: 0; margin: 0; }
.se-ghost { position: fixed; z-index: 60; pointer-events: none; opacity: 0.85; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6)); }
.se-ghost-node { position: static; width: 168px; }
.se-ghost-node .se-ports { padding: 6px 8px; color: #8c8a84; font: 11px system-ui, sans-serif; }
.se-node.rear { background: #2a2a2e; border-color: #4a4a52; }
.se-gadget { display: block; width: 166px; cursor: move; border-bottom: 1px solid #35505f; }
.se-node.rear .se-head { background: #34343a; }

.se-stage { flex: 1; position: relative; overflow: hidden; background: #0b0b0a radial-gradient(#1c1c1b 1px, transparent 1px) 0 0 / 20px 20px; }
.se-front { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.se-inside { position: absolute; inset: 0; overflow: hidden; cursor: grab; }
.se-inside.panning { cursor: grabbing; }
.se-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.se-wires { position: absolute; left: -2000px; top: -2000px; width: 8000px; height: 8000px; overflow: visible; pointer-events: none; }
.se-wires path { fill: none; stroke-width: 3; stroke-linecap: round; pointer-events: stroke; cursor: pointer; }
.se-wires path.sel { stroke-width: 5; filter: drop-shadow(0 0 4px #fff); }
.se-wires path.temp { stroke-dasharray: 6 5; pointer-events: none; }

.se-node { position: absolute; width: 168px; background: #232321; border: 1px solid #3c3c39; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,0.5); cursor: default; }
.se-node.sel { border-color: #e2574c; box-shadow: 0 0 0 2px rgba(226,87,76,0.5), 0 6px 18px rgba(0,0,0,0.5); }
.se-node.ctl { background: #1d2a33; border-color: #35505f; }
.se-node.ctl.sel { border-color: #e2574c; }
.se-head { padding: 5px 8px; font-weight: 700; letter-spacing: 0.06em; border-bottom: 1px solid #3c3c39; cursor: move; border-radius: 6px 6px 0 0; background: #2d2d2a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-node.ctl .se-head { background: #263744; border-color: #35505f; }
.se-head small { color: #9fb8c8; font-weight: 500; margin-left: 4px; }
.se-ports { display: flex; justify-content: space-between; padding: 4px 0; }
.se-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.se-col.out { align-items: flex-end; }
.se-row { display: flex; align-items: center; gap: 5px; height: 17px; font-size: 11px; color: #c8c5bd; white-space: nowrap; }
.se-row i { font-style: normal; color: #77746d; font-size: 10px; font-family: system-ui, sans-serif; }
.se-port { width: 11px; height: 11px; border-radius: 50%; background: #111; border: 2px solid #8c8a84; flex: none; cursor: crosshair; }
.se-port.in { margin-left: -7px; }
.se-port.out { margin-right: -7px; }
.se-port.on { border-color: #f0a43a; background: #f0a43a; }
.se-port:hover, .se-port.hot { border-color: #fff; transform: scale(1.3); }

.se-props { width: 250px; flex: none; overflow-y: auto; background: #131312; border-left: 1px solid #2c2c2a; padding: 10px 12px; }
.se-props h3 { margin: 0 0 4px; font-size: 18px; letter-spacing: 0.06em; }
.se-props p { margin: 4px 0 10px; color: #8c8a84; font: 12px/1.4 system-ui, sans-serif; letter-spacing: 0; }
.se-field { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 3px !important; margin: 0 0 10px; }
.se-field input:not([type=checkbox]):not([type=range]), .se-field select { width: 100%; box-sizing: border-box; }
.se-field.check { flex-direction: row; align-items: center !important; }
.se-const { margin: 0 0 8px; }
.se-const .se-cv { display: flex; justify-content: space-between; color: #b5b1a8; font-size: 12px; }
.se-const .se-cv b { color: #e8e4dc; font-weight: 500; }
.se-const input { width: 100%; }
.se-const.wired { color: #f0a43a; font-size: 12px; }
.se-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.se-danger { border-color: #7a2a24 !important; color: #ff9d92 !important; }

.se-hint { padding: 6px 12px; background: #161615; border-top: 1px solid #2c2c2a; color: #8c8a84; font-size: 12px; }