/* UI Containers & Controls */
.ui-component-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 1px;
    flex-shrink: 0;
}

.ui-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    line-height: 1;
    text-align: center;
}

/* Inline Value Fields */
.ctrl-value-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: 4px;
}

.ctrl-value-input {
    width: 42px;
    height: 16px;
    padding: 0 2px;
    font-size: 10px;
    font-family: ui-monospace, monospace;
    text-align: center;
    background: var(--bg-darker);
    color: var(--accent);
    border: 1px solid var(--border-main);
    border-radius: 3px;
    -moz-appearance: textfield;
}
.ctrl-value-input::-webkit-outer-spin-button,
.ctrl-value-input::-webkit-inner-spin-button {
    opacity: 1;
    height: 14px;
}

.ctrl-value-input-lg {
    width: 100%;
    height: 32px;
    font-size: 16px;
    margin: 12px 0;
}

.ctrl-value-badge {
    min-width: 36px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-family: ui-monospace, monospace;
    background: var(--bg-darker);
    color: var(--accent);
    border: 1px solid var(--border-main);
    border-radius: 3px;
    cursor: pointer;
}
.ctrl-value-badge:hover { border-color: var(--accent); }

.ctrl-value-edit {
    width: 16px;
    height: 16px;
    padding: 0;
    font-size: 9px;
    background: transparent;
    border: 1px solid var(--border-main);
    color: var(--text-muted);
    border-radius: 3px;
    cursor: pointer;
}
.ctrl-value-edit:hover { color: var(--accent); border-color: var(--accent); }

.ctrl-value-modal { padding: 16px 20px 20px; min-width: 220px; }
.ctrl-value-modal-label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.ctrl-value-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Canvases & Meters */
canvas { background: var(--bg-darker); border: 1px solid var(--border-focus); border-radius: 4px; }
canvas#editor { cursor: crosshair; width: 100%; height: auto; aspect-ratio: 2 / 1; }

.visualizer-canvas { width: 100%; height: 90px; }
.volume-meter-canvas {
    width: 12px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 2px;
    align-self: center;
    display: block;
}

/* Plugins, Macros & Elements */
.plugin-body {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    height: 100%;
}

.controls-container { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 15px; }

.controls-group {
    background: var(--bg-elevated);
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--border-main);
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
    min-width: 200px;
}
.controls-group h3 { width: 100%; font-size: 14px; color: var(--accent); }

#point-ui {
    display: flex; flex-direction: column; gap: 8px;
    max-height: 220px; overflow-y: auto;
    padding-right: 8px; margin-top: 10px;
    border-top: 1px solid var(--border-main); padding-top: 10px;
}
.point-row {
    background: var(--bg-elevated); padding: 8px;
    border-radius: 4px; display: inline-flex; align-items: center; gap: 10px;
}
.point-row.selected {
    background: #164b4b; border: 1px solid #00ffff; box-shadow: 0 0 6px rgba(0, 255, 255, 0.25);
}


/* Accordions */
details.ui-accordion {
    background: var(--bg-surface); border: 1px solid var(--border-main); border-radius: 6px; padding: 10px; margin-top: 15px;
}
details.ui-accordion summary {
    color: var(--accent); font-weight: bold; font-size: 14px; text-transform: uppercase;
    cursor: pointer; padding: 5px; user-select: none; list-style: none;
}
details.ui-accordion summary::-webkit-details-marker { display: none; }
details.ui-accordion summary::before { content: "► "; color: var(--border-focus); }
details.ui-accordion[open] summary::before { content: "▼ "; color: var(--accent); }

/* Badges */
.stage-badges { display: inline-flex; gap: 4px; margin-right: 8px; }
.stage-badge { color: #000; font-size: 10px; font-weight: bold; padding: 1px 5px; border-radius: 3px; }
.badge-attack { background-color: #ff6464; }
.badge-decay { background-color: #ffb432; }
.badge-loop-start { background-color: #64ff64; }
.badge-loop-end { background-color: #6496ff; }
.badge-release { background-color: #c864ff; }

/* Preset Overrides */
.preset-input-row { display: flex; gap: 8px; padding: 12px; background: var(--bg-surface); border-bottom: 1px solid var(--border-main); }
.preset-name-input { flex: 1; background: var(--bg-darker); border: 1px solid var(--border-focus); color: var(--text-main); padding: 6px 10px; border-radius: 4px; font-size: 13px; }
.preset-list-container { max-height: 280px; overflow-y: auto; background: var(--bg-base); padding: 4px 0; }
.preset-item-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: background 0.15s; }
.preset-item-row:hover { background: var(--bg-hover); }
.preset-item-name { font-size: 13px; color: var(--text-main); font-weight: 500; }
.preset-item-actions { display: flex; gap: 6px; }
.preset-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: 12px; font-style: italic; }

.btn-save { background: var(--accent); color: var(--bg-darker); }
.btn-load { background: #2196F3; color: #fff; padding: 4px 10px; font-size: 12px; }
.btn-delete { background: rgba(255, 68, 68, 0.2); color: var(--danger); border: 1px solid var(--danger); padding: 4px 10px; font-size: 12px; }
.btn-delete:hover { background: var(--danger); color: #fff; }
.synth-header-panel { display: flex; align-items: center; gap: 8px; }