/* ============================================
   MYTECH - LIGHT RIDER INSPIRED DESIGN
   Professional DMX Controller Interface
   ============================================ */

/* === CSS VARIABLES === */
:root {
    --mytech-accent: #0088ff;
    --slider-track: #0088ff;
    --slider-track2: #00aaff;
    --slider-thumb: #ffffff;
    --slider-rail: #1a1e26;
}

/* === BASE === */
* {
    box-sizing: border-box;
}

body {
    background: var(--mytech-page-gradient, linear-gradient(180deg, #0a0a0f 0%, #0d1018 50%, #0a0a12 100%)) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif !important;
    color: #c8ccd4 !important;
    -webkit-font-smoothing: antialiased;
}

/* === CONTAINERS - Transparent Background === */
#root > div,
.MuiBox-root,
.MuiToolbar-root,
main,
section {
    background: transparent !important;
}

/* === SIDEBAR / DRAWER - Slight transparency === */
.MuiDrawer-paper,
nav,
aside {
    background: rgba(10,12,18,0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* === CARDS & PANELS - Semi-transparent === */
.MuiPaper-root,
.MuiCard-root {
    background: rgba(12,14,20,0.4) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

.MuiDialog-paper,
.MuiMenu-paper,
.MuiPopover-paper {
    background: rgba(12,14,20,0.9) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
}

/* === HEADER / APPBAR - Styling ohne Position-Override === */
.MuiAppBar-root,
header {
    background: rgba(6,8,14,0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.3) !important;
}

/* === BUTTONS === */
.MuiButton-root,
.MuiIconButton-root,
.MuiButtonBase-root,
.MuiToggleButton-root,
button:not(.mytech-toggle):not(.mytech-btn) {
    background: linear-gradient(180deg, rgba(28,32,42,0.9) 0%, rgba(18,22,30,0.9) 100%) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 10px !important;
    color: #a0a8b8 !important;
    font-weight: 500 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.MuiButton-root:hover,
.MuiIconButton-root:hover,
.MuiButtonBase-root:hover,
button:not(.mytech-toggle):not(.mytech-btn):hover {
    background: linear-gradient(180deg, rgba(38,44,58,0.95) 0%, rgba(28,34,46,0.95) 100%) !important;
    border-color: rgba(0,136,255,0.4) !important;
    color: #e8ecf4 !important;
    box-shadow:
        0 0 20px rgba(0,136,255,0.15),
        0 4px 12px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* === ACTIVE/SELECTED STATE === */
.MuiButton-root.Mui-selected,
.MuiToggleButton-root.Mui-selected,
.MuiButton-contained,
.MuiButton-containedPrimary {
    background: linear-gradient(180deg, #0088ff 0%, #0066cc 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow:
        0 0 30px rgba(0,136,255,0.4),
        0 4px 15px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

/* === FADERS / SLIDERS === */
.MuiSlider-root {
    color: var(--slider-track) !important;
    height: 8px !important;
}

.MuiSlider-rail {
    background: var(--slider-rail) !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
    border-radius: 4px !important;
    opacity: 1 !important;
}

.MuiSlider-track {
    background: linear-gradient(90deg, var(--slider-track) 0%, var(--slider-track2) 100%) !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: 0 0 12px color-mix(in srgb, var(--slider-track) 50%, transparent) !important;
}

.MuiSlider-thumb {
    width: 20px !important;
    height: 20px !important;
    background: linear-gradient(180deg, var(--slider-thumb) 0%, color-mix(in srgb, var(--slider-thumb) 90%, #000) 100%) !important;
    border: 2px solid color-mix(in srgb, var(--slider-track) 60%, transparent) !important;
    box-shadow: 0 0 15px color-mix(in srgb, var(--slider-track) 50%, transparent) !important;
}

/* === INPUTS === */
.MuiInputBase-root,
.MuiOutlinedInput-root,
.MuiFilledInput-root,
.MuiSelect-root,
input,
select,
textarea {
    background: linear-gradient(180deg, rgba(12,16,24,0.95) 0%, rgba(8,12,18,0.95) 100%) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 10px !important;
    color: #d0d4dc !important;
}

.MuiOutlinedInput-notchedOutline {
    border-color: rgba(255,255,255,0.06) !important;
}

.MuiInputBase-root:focus-within,
input:focus,
select:focus {
    border-color: rgba(0,136,255,0.5) !important;
    box-shadow: 0 0 0 3px rgba(0,136,255,0.1) !important;
}

/* === SWITCHES === */
.MuiSwitch-track {
    background: linear-gradient(180deg, rgba(20,24,32,1) 0%, rgba(12,16,22,1) 100%) !important;
    opacity: 1 !important;
}

.Mui-checked + .MuiSwitch-track {
    background: linear-gradient(90deg, #0066cc 0%, #0088ff 100%) !important;
    box-shadow: 0 0 15px rgba(0,136,255,0.4) !important;
}

.MuiSwitch-thumb {
    background: linear-gradient(180deg, #fff 0%, #e8ecf0 100%) !important;
}

/* === TABS === */
.MuiTab-root {
    color: #808890 !important;
    font-weight: 500 !important;
    border-radius: 8px 8px 0 0 !important;
}

.MuiTab-root.Mui-selected {
    color: #0088ff !important;
    background: rgba(0,136,255,0.08) !important;
}

.MuiTabs-indicator {
    background: linear-gradient(90deg, #0066cc 0%, #0088ff 100%) !important;
    box-shadow: 0 0 10px rgba(0,136,255,0.5) !important;
}

/* === LIST ITEMS === */
.MuiListItem-root,
.MuiListItemButton-root {
    border-radius: 8px !important;
    margin: 2px 4px !important;
}

.MuiListItem-root:hover,
.MuiListItemButton-root:hover {
    background: rgba(0,136,255,0.08) !important;
}

/* === CHIPS === */
.MuiChip-root {
    background: linear-gradient(180deg, rgba(28,32,42,0.9) 0%, rgba(18,22,30,0.9) 100%) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 20px !important;
}

/* === BACKDROP === */
.MuiBackdrop-root {
    background: transparent !important;
    backdrop-filter: none !important;
}

.MuiModal-root > .MuiBackdrop-root,
.MuiDialog-root > .MuiBackdrop-root {
    background: rgba(0,0,0,0.4) !important;
    backdrop-filter: blur(4px) !important;
}

/* === MENU / DROPDOWN === */
.MuiMenu-paper,
.MuiPopover-paper,
.MuiSelect-paper {
    background: rgba(12,16,24,0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
}

.MuiMenu-list,
.MuiList-root {
    background: transparent !important;
}

.MuiMenuItem-root {
    border-radius: 8px !important;
    margin: 2px 4px !important;
}

.MuiMenuItem-root:hover {
    background: rgba(0,136,255,0.15) !important;
}

/* === SCROLLBARS === */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.2);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(50,56,68,0.9) 0%, rgba(35,40,50,0.9) 100%);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(65,72,88,0.95) 0%, rgba(50,56,68,0.95) 100%);
}

/* === SELECTION === */
::selection {
    background: rgba(0,136,255,0.3);
    color: #fff;
}

/* ============================================
   MYTECH PANEL - Light Rider Style
   ============================================ */

.mytech-hidden { display: none !important; }

.mytech-highlight {
    outline: 2px solid #0088ff !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 30px rgba(0,136,255,0.4) !important;
    cursor: crosshair !important;
}

.mytech-panel {
    position: fixed;
    top: 16px;
    right: 16px;
    background: linear-gradient(180deg, rgba(14,16,24,0.97) 0%, rgba(8,10,16,0.97) 100%);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 0;
    z-index: 99999;
    font: 13px -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    color: #a0a8b8;
    min-width: 260px;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.4),
        0 30px 60px -15px rgba(0,0,0,0.6);
    overflow: hidden;
}

.mytech-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
    cursor: move;
    user-select: none;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.mytech-header span {
    font-weight: 700;
    font-size: 14px;
    color: #0088ff;
    letter-spacing: 0.1em;
    text-shadow: 0 0 20px rgba(0,136,255,0.4);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mytech-toggle {
    background: linear-gradient(180deg, rgba(30,34,46,0.9) 0%, rgba(20,24,32,0.9) 100%);
    border: 1px solid rgba(255,255,255,0.06);
    color: #707888;
    cursor: pointer;
    font-size: 15px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.mytech-toggle:hover {
    background: linear-gradient(180deg, rgba(40,46,60,0.95) 0%, rgba(30,36,48,0.95) 100%);
    border-color: rgba(0,136,255,0.3);
    color: #0088ff;
}

.mytech-content {
    padding: 18px 22px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
}

.mytech-content::-webkit-scrollbar {
    width: 6px;
}

.mytech-content::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
}

.mytech-content::-webkit-scrollbar-thumb {
    background: rgba(0,136,255,0.4);
    border-radius: 3px;
}

.mytech-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0,136,255,0.6);
}

.mytech-panel.collapsed .mytech-content { display: none; }
.mytech-panel.collapsed .mytech-header { border-bottom: none; }

.mytech-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 18px;
    margin: 8px 0;
    background: linear-gradient(180deg, rgba(26,30,40,0.95) 0%, rgba(18,22,30,0.95) 100%);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    color: #9098a8;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    box-sizing: border-box;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mytech-btn svg {
    opacity: 0.7;
    transition: all 0.2s ease;
}

.mytech-btn:hover svg {
    opacity: 1;
    stroke: #0088ff;
}

.mytech-btn:hover {
    background: linear-gradient(180deg, rgba(36,42,56,0.98) 0%, rgba(26,32,44,0.98) 100%);
    border-color: rgba(0,136,255,0.35);
    color: #e0e4ec;
    transform: translateY(-2px);
}

.mytech-btn.active {
    background: linear-gradient(180deg, #0088ff 0%, #0066cc 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 35px rgba(0,136,255,0.4);
}

.mytech-btn.active svg {
    stroke: #fff;
    opacity: 1;
}

.mytech-btn-nav svg {
    stroke: #0088ff;
    opacity: 0.9;
}

.mytech-btn-reset {
    margin-top: 16px;
    background: linear-gradient(180deg, rgba(40,20,20,0.9) 0%, rgba(30,15,15,0.9) 100%) !important;
    border-color: rgba(255,80,80,0.15) !important;
}

.mytech-btn-reset:hover {
    border-color: rgba(255,80,80,0.4) !important;
}

.mytech-btn-reset:hover svg {
    stroke: #ff6666 !important;
}

.mytech-list {
    max-height: 100px;
    overflow-y: auto;
    margin-top: 14px;
    font-size: 11px;
    background: rgba(0,0,0,0.25);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.03);
}

.mytech-list:empty { display: none; }

.mytech-list div {
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    color: #707888;
    font-size: 10px;
}

.mytech-list div:last-child { border-bottom: none; }

.mytech-list span {
    color: #505868;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.mytech-list span:hover {
    color: #ff4466;
    background: rgba(255,68,102,0.12);
}

.mytech-resizing {
    outline: 2px solid #0088ff !important;
    outline-offset: 2px !important;
}

.mytech-resize-handle {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #0088ff 0%, #0066cc 100%);
    color: #fff;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: nwse-resize;
    border-radius: 8px;
    z-index: 99998;
    box-shadow: 0 0 20px rgba(0,136,255,0.4);
}

.mytech-resize-handle:hover {
    transform: scale(1.1);
}

/* === SETTINGS === */
.mytech-settings {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.mytech-settings-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #505868;
    margin-bottom: 14px;
}

.mytech-settings-title svg {
    stroke: #0088ff;
    opacity: 0.7;
}

.mytech-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 0;
    font-size: 12px;
    color: #707888;
}

.mytech-setting label {
    flex: 1;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mytech-setting input[type="range"] {
    width: 100px;
    height: 8px;
    -webkit-appearance: none;
    background: linear-gradient(180deg, rgba(20,24,32,1) 0%, rgba(12,16,22,1) 100%);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 4px;
    cursor: pointer;
}

.mytech-setting input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: linear-gradient(180deg, #fff 0%, #e0e4ec 100%);
    border: 2px solid rgba(0,136,255,0.5);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(0,136,255,0.4);
}

.mytech-setting input[type="color"] {
    width: 36px;
    height: 28px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    padding: 0;
}

.mytech-setting input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 3px;
}

.mytech-setting input[type="color"]::-webkit-color-swatch {
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 5px;
}

.mytech-colors {
    display: flex;
    gap: 10px;
    align-items: center;
}

.mytech-angle-value {
    font-size: 12px;
    color: #0088ff;
    width: 40px;
    text-align: right;
    font-weight: 700;
    font-family: 'SF Mono', 'Menlo', monospace;
    text-shadow: 0 0 10px rgba(0,136,255,0.4);
}

/* === FIX: Inner containers transparent === */
.MuiBox-root .MuiBox-root,
.MuiPaper-root > div:not([class*="Mui"]),
.MuiCard-root > div:not([class*="Mui"]),
.MuiDrawer-paper > div:not([class*="Mui"]),
.MuiGrid-root,
.MuiGrid-item,
.MuiGrid-container,
.MuiStack-root,
.MuiContainer-root,
.MuiCardContent-root,
.MuiCardHeader-root,
.MuiDialogContent-root,
.MuiDialogTitle-root,
.MuiDialogActions-root,
.MuiAccordionSummary-root,
.MuiAccordionDetails-root,
.MuiTableContainer-root,
.MuiListItemText-root,
.MuiListItemIcon-root,
div[class*="css-"][class*="MuiBox"],
div[class^="css-"]:not(.MuiPaper-root):not(.MuiCard-root):not(.MuiDrawer-paper):not(.MuiAppBar-root):not(.MuiDialog-paper):not(.MuiMenu-paper):not(.MuiPopover-paper) {
    background: transparent !important;
    background-color: transparent !important;
}

/* Keep backdrop-filter only on main containers */
.MuiGrid-root,
.MuiGrid-item,
.MuiStack-root,
.MuiContainer-root,
.MuiCardContent-root,
.MuiListItemText-root {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* === DESIGN TEMPLATES === */
.mytech-templates {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.mytech-template-btn {
    aspect-ratio: 1;
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.mytech-template-btn:hover {
    border-color: rgba(255,255,255,0.2);
    transform: scale(1.05);
}

.mytech-template-btn.active {
    border-color: var(--mytech-accent);
    box-shadow: 0 0 15px rgba(var(--mytech-accent-rgb, 0,136,255), 0.4);
}

.mytech-template-btn::after {
    content: attr(data-name);
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    font-size: 8px;
    text-align: center;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Template Colors */
.mytech-template-btn[data-template="default"] { background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%); }
.mytech-template-btn[data-template="impulse"] { background: linear-gradient(135deg, #0a1628 0%, #1a0a28 100%); }
.mytech-template-btn[data-template="radiola"] { background: linear-gradient(160deg, #1a1008 0%, #0a0804 100%); }
.mytech-template-btn[data-template="dune"] { background: linear-gradient(180deg, #1a1610 0%, #0d0a06 100%); }
.mytech-template-btn[data-template="midnight"] { background: linear-gradient(135deg, #0a0a1a 0%, #000008 100%); }
.mytech-template-btn[data-template="forest"] { background: linear-gradient(150deg, #0a1a10 0%, #040a06 100%); }
.mytech-template-btn[data-template="ember"] { background: linear-gradient(135deg, #1a0a0a 0%, #0a0404 100%); }
.mytech-template-btn[data-template="aurora"] { background: linear-gradient(135deg, #0a1a1a 0%, #1a0a1a 100%); }

/* Accent dot indicator */
.mytech-template-btn::before {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.mytech-template-btn[data-template="default"]::before { background: #0088ff; }
.mytech-template-btn[data-template="impulse"]::before { background: #00ffff; }
.mytech-template-btn[data-template="radiola"]::before { background: #ff8800; }
.mytech-template-btn[data-template="dune"]::before { background: #d4a574; }
.mytech-template-btn[data-template="midnight"]::before { background: #6366f1; }
.mytech-template-btn[data-template="forest"]::before { background: #22c55e; }
.mytech-template-btn[data-template="ember"]::before { background: #ef4444; }
.mytech-template-btn[data-template="aurora"]::before { background: #a855f7; }

/* Use accent color for active elements */
.mytech-btn.active,
.mytech-header span {
    color: var(--mytech-accent) !important;
    text-shadow: 0 0 20px var(--mytech-accent);
}

/* === PRO THEME BUTTONS === */
.mytech-themes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.mytech-theme-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.3);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    color: #a0a8b8;
}

.mytech-theme-btn:hover {
    border-color: rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.4);
}

.mytech-theme-btn.active {
    border-color: var(--mytech-accent);
    box-shadow: 0 0 15px rgba(0,136,255,0.3);
}

.theme-preview {
    width: 40px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
}

.radiola-preview {
    background: linear-gradient(135deg, #1a0a08 0%, #0a0404 50%, #ff6b4a 100%);
    box-shadow: inset 0 0 10px rgba(255,107,74,0.5);
}

.impulse-preview {
    background: linear-gradient(135deg, #0a0a20 0%, #1a0a28 50%, #00ffff 100%);
    box-shadow: inset 0 0 10px rgba(0,255,255,0.5);
}

.dune-preview {
    background: linear-gradient(135deg, #2a2520 0%, #1a1510 50%, #d4a04a 100%);
    box-shadow: inset 0 0 10px rgba(212,160,74,0.5);
}

.widgets-preview {
    background: linear-gradient(135deg, #2e3136 0%, #1a1b1d 50%, #ff6b00 100%);
    box-shadow: inset 0 0 10px rgba(255,107,0,0.5);
}

/* ============================================
   RADIOLA PRO THEME
   Vintage radio style with copper/red accents
   ============================================ */

body.theme-radiola {
    --mytech-accent: #ff6b4a;
    background: radial-gradient(ellipse at center, #1a0a08 0%, #0a0404 100%) !important;
}

body.theme-radiola .MuiPaper-root,
body.theme-radiola .MuiCard-root {
    background: linear-gradient(180deg, rgba(30,15,12,0.95) 0%, rgba(15,8,6,0.95) 100%) !important;
    border: 1px solid rgba(255,107,74,0.15) !important;
    box-shadow: 0 0 30px rgba(255,107,74,0.1), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

body.theme-radiola .MuiButton-root,
body.theme-radiola .MuiIconButton-root,
body.theme-radiola button:not(.mytech-toggle):not(.mytech-btn) {
    background: linear-gradient(180deg, rgba(40,20,15,0.95) 0%, rgba(25,12,10,0.95) 100%) !important;
    border: 1px solid rgba(255,107,74,0.2) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

body.theme-radiola .MuiButton-root:hover,
body.theme-radiola button:not(.mytech-toggle):not(.mytech-btn):hover {
    border-color: rgba(255,107,74,0.5) !important;
    box-shadow: 0 0 20px rgba(255,107,74,0.3) !important;
}

body.theme-radiola .MuiSlider-track {
    background: linear-gradient(90deg, #8b4513 0%, #ff6b4a 100%) !important;
    box-shadow: 0 0 15px rgba(255,107,74,0.6) !important;
}

body.theme-radiola .MuiSlider-thumb {
    border-color: rgba(255,107,74,0.8) !important;
    box-shadow: 0 0 15px rgba(255,107,74,0.5) !important;
}

body.theme-radiola .MuiAppBar-root,
body.theme-radiola header {
    background: linear-gradient(180deg, rgba(25,12,10,0.95) 0%, rgba(15,8,6,0.95) 100%) !important;
    border-color: rgba(255,107,74,0.15) !important;
}

/* ============================================
   IMPULSE PRO THEME
   Futuristic neon sci-fi with cyan/magenta
   ============================================ */

body.theme-impulse {
    --mytech-accent: #00ffff;
    background: radial-gradient(ellipse at top, #0a0a25 0%, #1a0528 50%, #0a0a15 100%) !important;
}

body.theme-impulse .MuiPaper-root,
body.theme-impulse .MuiCard-root {
    background: linear-gradient(180deg, rgba(15,10,35,0.9) 0%, rgba(8,5,20,0.9) 100%) !important;
    border: 1px solid rgba(0,255,255,0.15) !important;
    box-shadow: 0 0 30px rgba(0,255,255,0.08), 0 0 60px rgba(255,0,255,0.05), inset 0 1px 0 rgba(0,255,255,0.1) !important;
}

body.theme-impulse .MuiButton-root,
body.theme-impulse .MuiIconButton-root,
body.theme-impulse button:not(.mytech-toggle):not(.mytech-btn) {
    background: linear-gradient(180deg, rgba(20,15,45,0.95) 0%, rgba(10,8,25,0.95) 100%) !important;
    border: 1px solid rgba(0,255,255,0.2) !important;
    box-shadow: 0 0 10px rgba(0,255,255,0.1), inset 0 1px 0 rgba(0,255,255,0.1) !important;
}

body.theme-impulse .MuiButton-root:hover,
body.theme-impulse button:not(.mytech-toggle):not(.mytech-btn):hover {
    border-color: rgba(0,255,255,0.6) !important;
    box-shadow: 0 0 25px rgba(0,255,255,0.4), 0 0 50px rgba(255,0,255,0.2) !important;
    color: #00ffff !important;
}

body.theme-impulse .MuiSlider-track {
    background: linear-gradient(90deg, #ff00ff 0%, #00ffff 100%) !important;
    box-shadow: 0 0 20px rgba(0,255,255,0.8), 0 0 40px rgba(255,0,255,0.4) !important;
}

body.theme-impulse .MuiSlider-thumb {
    border-color: rgba(0,255,255,0.8) !important;
    box-shadow: 0 0 20px rgba(0,255,255,0.6), 0 0 40px rgba(255,0,255,0.3) !important;
}

body.theme-impulse .MuiAppBar-root,
body.theme-impulse header {
    background: linear-gradient(180deg, rgba(10,8,30,0.95) 0%, rgba(5,3,15,0.95) 100%) !important;
    border-color: rgba(0,255,255,0.1) !important;
    box-shadow: 0 4px 30px rgba(0,255,255,0.1), 0 0 60px rgba(255,0,255,0.05) !important;
}

/* ============================================
   DUNE PRO THEME
   Desert/sand organic style with gold accents
   ============================================ */

body.theme-dune {
    --mytech-accent: #d4a04a;
    background: radial-gradient(ellipse at center, #2a2218 0%, #1a150c 50%, #0d0a06 100%) !important;
}

body.theme-dune .MuiPaper-root,
body.theme-dune .MuiCard-root {
    background: linear-gradient(180deg, rgba(45,38,30,0.9) 0%, rgba(25,20,15,0.9) 100%) !important;
    border: 1px solid rgba(212,160,74,0.15) !important;
    box-shadow: 0 0 30px rgba(212,160,74,0.08), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

body.theme-dune .MuiButton-root,
body.theme-dune .MuiIconButton-root,
body.theme-dune button:not(.mytech-toggle):not(.mytech-btn) {
    background: linear-gradient(180deg, rgba(55,45,35,0.95) 0%, rgba(35,28,22,0.95) 100%) !important;
    border: 1px solid rgba(212,160,74,0.2) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

body.theme-dune .MuiButton-root:hover,
body.theme-dune button:not(.mytech-toggle):not(.mytech-btn):hover {
    border-color: rgba(212,160,74,0.5) !important;
    box-shadow: 0 0 20px rgba(212,160,74,0.3) !important;
    color: #d4a04a !important;
}

body.theme-dune .MuiSlider-track {
    background: linear-gradient(90deg, #8b7355 0%, #d4a04a 100%) !important;
    box-shadow: 0 0 15px rgba(212,160,74,0.6) !important;
}

body.theme-dune .MuiSlider-thumb {
    border-color: rgba(212,160,74,0.8) !important;
    box-shadow: 0 0 15px rgba(212,160,74,0.5) !important;
}

body.theme-dune .MuiAppBar-root,
body.theme-dune header {
    background: linear-gradient(180deg, rgba(40,32,25,0.95) 0%, rgba(25,20,15,0.95) 100%) !important;
    border-color: rgba(212,160,74,0.12) !important;
}

/* ============================================
   WIDGETS PRO THEME
   Neumorphism console style with orange glow
   Based on Figma Design
   ============================================ */

body.theme-widgets {
    --mytech-accent: #ff6b00;
    background: #1a1b1d !important;
}

body.theme-widgets .MuiPaper-root,
body.theme-widgets .MuiCard-root {
    background: linear-gradient(180deg, rgba(46,49,54,0.98) 0%, rgba(26,27,29,0.98) 100%) !important;
    border: 1px solid rgba(80,85,95,0.4) !important;
    border-radius: 12px !important;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}

body.theme-widgets .MuiButton-root,
body.theme-widgets .MuiIconButton-root,
body.theme-widgets button:not(.mytech-toggle):not(.mytech-btn) {
    background: linear-gradient(180deg, rgba(50,54,62,0.95) 0%, rgba(35,38,44,0.95) 100%) !important;
    border: 1px solid rgba(80,85,95,0.5) !important;
    border-radius: 8px !important;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.15) !important;
    color: #888c94 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-weight: 600 !important;
}

body.theme-widgets .MuiButton-root:hover,
body.theme-widgets button:not(.mytech-toggle):not(.mytech-btn):hover {
    background: linear-gradient(180deg, rgba(60,65,75,0.98) 0%, rgba(45,50,58,0.98) 100%) !important;
    border-color: rgba(255,107,0,0.4) !important;
    color: #c8ccd4 !important;
}

/* Active/Selected State - Orange Glow */
body.theme-widgets .MuiButton-root.Mui-selected,
body.theme-widgets .MuiToggleButton-root.Mui-selected,
body.theme-widgets .MuiButton-contained,
body.theme-widgets .preset-btn.preset-active {
    background: linear-gradient(180deg, rgba(255,107,0,0.25) 0%, rgba(255,80,0,0.15) 100%) !important;
    border: 1px solid rgba(255,107,0,0.6) !important;
    color: #ff6b00 !important;
    box-shadow:
        0 0 30px rgba(255,107,0,0.4),
        0 0 60px rgba(255,107,0,0.2),
        inset 0 0 20px rgba(255,107,0,0.1) !important;
    text-shadow: 0 0 10px rgba(255,107,0,0.5) !important;
}

body.theme-widgets .MuiSlider-root {
    height: 10px !important;
}

body.theme-widgets .MuiSlider-rail {
    background: linear-gradient(180deg, #1a1b1d 0%, #252629 100%) !important;
    border: 1px solid rgba(80,85,95,0.3) !important;
    border-radius: 5px !important;
}

body.theme-widgets .MuiSlider-track {
    background: linear-gradient(90deg, #cc5500 0%, #ff6b00 100%) !important;
    box-shadow: 0 0 20px rgba(255,107,0,0.6), 0 0 40px rgba(255,107,0,0.3) !important;
    border-radius: 5px !important;
}

body.theme-widgets .MuiSlider-thumb {
    width: 22px !important;
    height: 22px !important;
    background: linear-gradient(180deg, #3a3d44 0%, #2a2c30 100%) !important;
    border: 2px solid rgba(255,107,0,0.8) !important;
    box-shadow:
        0 0 15px rgba(255,107,0,0.5),
        0 4px 8px rgba(0,0,0,0.4),
        inset 0 2px 4px rgba(255,255,255,0.1) !important;
}

body.theme-widgets .MuiSlider-thumb::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 4px !important;
    height: 4px !important;
    background: #ff6b00 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px #ff6b00 !important;
}

body.theme-widgets .MuiAppBar-root,
body.theme-widgets header {
    background: linear-gradient(180deg, rgba(35,38,44,0.98) 0%, rgba(26,27,29,0.98) 100%) !important;
    border-color: rgba(80,85,95,0.3) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}

body.theme-widgets .MuiDrawer-paper,
body.theme-widgets nav,
body.theme-widgets aside {
    background: linear-gradient(180deg, rgba(30,32,36,0.98) 0%, rgba(22,24,26,0.98) 100%) !important;
    border-color: rgba(80,85,95,0.3) !important;
}

/* Widgets Theme - MyTech Panel Override */
body.theme-widgets .mytech-panel {
    background: linear-gradient(180deg, rgba(46,49,54,0.98) 0%, rgba(26,27,29,0.98) 100%) !important;
    border: 1px solid rgba(80,85,95,0.5) !important;
    box-shadow:
        0 12px 40px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

body.theme-widgets .mytech-btn {
    background: linear-gradient(180deg, rgba(50,54,62,0.95) 0%, rgba(35,38,44,0.95) 100%) !important;
    border: 1px solid rgba(80,85,95,0.5) !important;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

body.theme-widgets .mytech-btn:hover {
    border-color: rgba(255,107,0,0.4) !important;
    box-shadow: 0 0 20px rgba(255,107,0,0.2) !important;
}

body.theme-widgets .mytech-btn.active {
    background: linear-gradient(180deg, rgba(255,107,0,0.2) 0%, rgba(255,80,0,0.1) 100%) !important;
    border: 1px solid rgba(255,107,0,0.6) !important;
    color: #ff6b00 !important;
    box-shadow:
        0 0 30px rgba(255,107,0,0.4),
        0 0 60px rgba(255,107,0,0.15),
        inset 0 0 15px rgba(255,107,0,0.1) !important;
    text-shadow: 0 0 10px rgba(255,107,0,0.5) !important;
}

body.theme-widgets .mytech-header span {
    color: #ff6b00 !important;
    text-shadow: 0 0 20px rgba(255,107,0,0.5) !important;
}

/* ============================================
   SLIDER DESIGN OPTIONS
   ============================================ */

/* Slider Button Styles */
.mytech-sliders {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.mytech-slider-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.3);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 11px;
    color: #a0a8b8;
}

.mytech-slider-btn:hover {
    border-color: rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.4);
}

.mytech-slider-btn.active {
    border-color: var(--mytech-accent);
    box-shadow: 0 0 12px rgba(0,136,255,0.25);
}

.slider-preview {
    width: 50px;
    height: 10px;
    border-radius: 5px;
    position: relative;
    background: rgba(20,24,32,1);
    overflow: hidden;
}

.slider-preview::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 60%;
    border-radius: 5px;
}

.slider-preview::before {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    z-index: 1;
}

.slider-preview-default::after { background: linear-gradient(90deg, #0066cc, #0088ff); box-shadow: 0 0 8px rgba(0,136,255,0.5); }
.slider-preview-classic::after { background: #666; }
.slider-preview-classic::before { background: #ccc; border: 2px solid #888; width: 6px; height: 6px; }
.slider-preview-neon::after { background: linear-gradient(90deg, #ff00ff, #00ffff); box-shadow: 0 0 10px #00ffff; }
.slider-preview-vintage::after { background: linear-gradient(90deg, #8b4513, #cd853f); }
.slider-preview-vintage::before { background: linear-gradient(180deg, #d4a574, #8b7355); }
.slider-preview-thin { height: 4px; }
.slider-preview-thin::after { background: var(--mytech-accent); }
.slider-preview-thin::before { width: 10px; height: 10px; top: 50%; }

/* Slider Color Picker UI */
.mytech-slider-colors {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.mytech-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.mytech-color-row label {
    flex: 1;
    font-size: 11px;
    color: #707888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mytech-color-row input[type="color"] {
    width: 32px;
    height: 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    padding: 0;
}

.mytech-color-row input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.mytech-color-row input[type="color"]::-webkit-color-swatch {
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 4px;
}

/* ============================================
   SLIDER DESIGN: CLASSIC
   Minimalistisches, einfaches Design
   ============================================ */

body.slider-classic .MuiSlider-root {
    height: 6px !important;
}

body.slider-classic .MuiSlider-rail {
    background: var(--slider-rail) !important;
    border: none !important;
}

body.slider-classic .MuiSlider-track {
    background: var(--slider-track) !important;
    box-shadow: none !important;
}

body.slider-classic .MuiSlider-thumb {
    width: 16px !important;
    height: 16px !important;
    background: var(--slider-thumb) !important;
    border: 2px solid var(--slider-track) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

body.slider-classic .MuiSlider-thumb:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}

/* ============================================
   SLIDER DESIGN: NEON
   Leuchtende Cyberpunk-Slider
   ============================================ */

body.slider-neon .MuiSlider-root {
    height: 10px !important;
}

body.slider-neon .MuiSlider-rail {
    background: var(--slider-rail) !important;
    border: 1px solid var(--slider-track) !important;
    border-opacity: 0.2;
}

body.slider-neon .MuiSlider-track {
    background: linear-gradient(90deg, var(--slider-track) 0%, var(--slider-track2) 100%) !important;
    box-shadow: 0 0 20px var(--slider-track), 0 0 40px var(--slider-track2) !important;
}

body.slider-neon .MuiSlider-thumb {
    width: 22px !important;
    height: 22px !important;
    background: radial-gradient(circle, var(--slider-thumb) 30%, var(--slider-track2) 100%) !important;
    border: 2px solid var(--slider-track2) !important;
    box-shadow: 0 0 20px var(--slider-track2), 0 0 40px var(--slider-track) !important;
}

body.slider-neon .MuiSlider-thumb:hover {
    box-shadow: 0 0 30px var(--slider-track2), 0 0 60px var(--slider-track) !important;
}

/* ============================================
   SLIDER DESIGN: VINTAGE
   Warmes, analoges Retro-Design
   ============================================ */

body.slider-vintage .MuiSlider-root {
    height: 12px !important;
}

body.slider-vintage .MuiSlider-rail {
    background: var(--slider-rail) !important;
    border: 1px solid var(--slider-track) !important;
    border-radius: 6px !important;
}

body.slider-vintage .MuiSlider-track {
    background: linear-gradient(90deg, var(--slider-track) 0%, var(--slider-track2) 100%) !important;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.2), 0 0 10px var(--slider-track) !important;
    border-radius: 6px !important;
}

body.slider-vintage .MuiSlider-thumb {
    width: 24px !important;
    height: 24px !important;
    background: linear-gradient(180deg, var(--slider-thumb) 0%, var(--slider-track) 100%) !important;
    border: 2px solid var(--slider-track) !important;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.3), 0 3px 8px rgba(0,0,0,0.4) !important;
}

body.slider-vintage .MuiSlider-thumb::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 8px !important;
    height: 8px !important;
    background: var(--slider-rail) !important;
    border-radius: 50% !important;
}

/* ============================================
   SLIDER DESIGN: THIN
   Schlankes, modernes Design
   ============================================ */

body.slider-thin .MuiSlider-root {
    height: 4px !important;
}

body.slider-thin .MuiSlider-rail {
    background: var(--slider-rail) !important;
    border: none !important;
    border-radius: 2px !important;
}

body.slider-thin .MuiSlider-track {
    background: var(--slider-track) !important;
    box-shadow: none !important;
    border-radius: 2px !important;
}

body.slider-thin .MuiSlider-thumb {
    width: 14px !important;
    height: 14px !important;
    background: var(--slider-thumb) !important;
    border: 2px solid var(--slider-track) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

body.slider-thin .MuiSlider-thumb:hover {
    box-shadow: 0 0 10px var(--slider-track), 0 2px 6px rgba(0,0,0,0.3) !important;
}

/* ============================================
   FX PANEL - Separate floating panel
   ============================================ */

.mytech-fx-panel {
    left: 16px;
    right: auto;
    top: 16px;
    min-width: 220px;
    max-width: 260px;
}

.mytech-fx-panel .mytech-header span {
    color: #00ff88;
    text-shadow: 0 0 20px rgba(0,255,136,0.4);
}

.mytech-fx-panel .mytech-content {
    padding: 14px 18px;
    max-height: calc(100vh - 80px);
}

/* ============================================
   FX CONTROLS
   Master controls for DMX effects
   ============================================ */

.mytech-fx {
    margin-top: 10px;
}

.mytech-fx-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    font-size: 11px;
}

.mytech-fx-row label {
    width: 55px;
    color: #707888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mytech-fx-row input[type="range"] {
    flex: 1;
    height: 8px;
    -webkit-appearance: none;
    background: linear-gradient(180deg, rgba(20,24,32,1) 0%, rgba(12,16,22,1) 100%);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 4px;
    cursor: pointer;
}

.mytech-fx-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: linear-gradient(180deg, #fff 0%, #e0e4ec 100%);
    border: 2px solid var(--mytech-accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px var(--mytech-accent);
}

.mytech-fx-row span {
    width: 40px;
    text-align: right;
    color: var(--mytech-accent);
    font-weight: 700;
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 11px;
}

.mytech-fx-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 10px 0;
}

.mytech-fx-btn {
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(26,30,40,0.95) 0%, rgba(18,22,30,0.95) 100%);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    color: #9098a8;
    cursor: pointer;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: all 0.2s ease;
}

.mytech-fx-btn:hover {
    background: linear-gradient(180deg, rgba(36,42,56,0.98) 0%, rgba(26,32,44,0.98) 100%);
    border-color: var(--mytech-accent);
    color: #e0e4ec;
    box-shadow: 0 0 15px rgba(0,136,255,0.2);
}

.mytech-fx-btn.active {
    background: linear-gradient(180deg, var(--mytech-accent) 0%, color-mix(in srgb, var(--mytech-accent) 70%, #000) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 20px var(--mytech-accent);
}

.mytech-fx-btn.strobe-active {
    animation: strobe-pulse 0.2s infinite alternate;
}

@keyframes strobe-pulse {
    0% { box-shadow: 0 0 10px var(--mytech-accent); }
    100% { box-shadow: 0 0 30px var(--mytech-accent), 0 0 50px var(--mytech-accent); }
}

/* Slider Selection Mode */
.mytech-fx-select-mode {
    margin: 12px 0;
    padding: 10px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
}

.mytech-fx-select-btn {
    width: 100%;
    padding: 10px;
    background: linear-gradient(180deg, rgba(30,35,48,0.95) 0%, rgba(20,25,35,0.95) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: #9098a8;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: all 0.2s ease;
}

.mytech-fx-select-btn:hover {
    border-color: rgba(0,255,136,0.5);
    color: #00ff88;
}

.mytech-fx-select-btn.active {
    background: linear-gradient(180deg, rgba(0,80,40,0.9) 0%, rgba(0,50,25,0.9) 100%);
    border-color: #00ff88;
    color: #00ff88;
    box-shadow: 0 0 15px rgba(0,255,136,0.3);
}

.mytech-fx-selected-count {
    margin-top: 8px;
    font-size: 10px;
    color: #606878;
    text-align: center;
}

.mytech-fx-selected-count strong {
    color: var(--mytech-accent);
}

/* Highlighted slider in selection mode */
.maestro-slider-selectable {
    outline: 2px dashed rgba(0,255,136,0.5) !important;
    outline-offset: 4px !important;
    cursor: pointer !important;
}

.maestro-slider-selectable:hover {
    outline-color: #00ff88 !important;
    box-shadow: 0 0 20px rgba(0,255,136,0.3) !important;
}

.maestro-slider-selected {
    outline: 2px solid #00ff88 !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 20px rgba(0,255,136,0.4) !important;
}

.maestro-slider-selected::after {
    content: '✓';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    background: #00ff88;
    color: #000;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 1000;
}

/* ============================================
   PRESET SYSTEM
   Custom effect buttons with press/release
   ============================================ */

.preset-edit-box {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(0,255,136,0.2);
    border-radius: 10px;
    padding: 14px;
}

.preset-edit-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    font-size: 11px;
}

.preset-edit-row label {
    width: 80px;
    color: #707888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.preset-edit-row input[type="text"],
.preset-edit-row input[type="number"],
.preset-edit-row select {
    flex: 1;
    padding: 8px 10px;
    background: rgba(20,24,32,0.95);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: #d0d4dc;
    font-size: 12px;
    outline: none;
}

.preset-edit-row input:focus,
.preset-edit-row select:focus {
    border-color: rgba(0,255,136,0.5);
    box-shadow: 0 0 10px rgba(0,255,136,0.2);
}

.preset-edit-row select {
    cursor: pointer;
}

.preset-edit-info {
    text-align: center;
    padding: 8px;
    background: rgba(0,255,136,0.1);
    border-radius: 6px;
    color: #00ff88;
    font-size: 11px;
    font-weight: 600;
    margin: 10px 0;
}

.preset-edit-hint {
    text-align: center;
    font-size: 10px;
    color: #505868;
    margin-bottom: 10px;
}

.preset-buttons-container {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preset-empty {
    text-align: center;
    padding: 16px;
    color: #505868;
    font-size: 11px;
    font-style: italic;
}

.preset-btn-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.preset-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(30,35,48,0.95) 0%, rgba(20,25,35,0.95) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
}

.preset-btn:hover {
    background: linear-gradient(180deg, rgba(40,48,65,0.98) 0%, rgba(30,38,52,0.98) 100%);
    border-color: rgba(0,255,136,0.4);
}

.preset-btn:active,
.preset-btn.preset-active {
    background: linear-gradient(180deg, rgba(0,100,50,0.9) 0%, rgba(0,70,35,0.9) 100%);
    border-color: #00ff88;
    box-shadow: 0 0 25px rgba(0,255,136,0.5);
    transform: scale(0.98);
}

.preset-icon {
    font-size: 16px;
}

.preset-name {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: #c8ccd4;
}

.preset-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.preset-actions span {
    font-size: 12px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    opacity: 0.5;
    transition: all 0.15s ease;
}

.preset-actions span:hover {
    opacity: 1;
    background: rgba(255,255,255,0.1);
}

/* ============================================
   HEADER PROGRESS BAR
   Always visible DMX progress indicator
   ============================================ */

.mytech-header-progress-container {
    position: absolute;
    right: 120px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
}

.mytech-header-progress-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.mytech-header-progress-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--mytech-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.mytech-header-progress {
    width: 100px;
    height: 6px;
    background: rgba(20,24,32,0.9);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.mytech-header-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--mytech-accent) 0%, color-mix(in srgb, var(--mytech-accent) 70%, #fff) 100%);
    border-radius: 3px;
    transition: transform 0.15s ease;
    box-shadow: 0 0 10px var(--mytech-accent);
}

.mytech-header-progress-value {
    font-size: 11px;
    font-weight: 700;
    color: #e0e4ec;
    font-family: 'SF Mono', 'Menlo', monospace;
    min-width: 32px;
    text-align: right;
}

/* Warning state at 100% */
.mytech-header-progress-wrapper.warning {
    border-color: rgba(255,60,60,0.5);
    box-shadow: 0 0 15px rgba(255,60,60,0.4);
    animation: warning-pulse 0.5s infinite alternate;
}

.mytech-header-progress-wrapper.warning .mytech-header-progress-label {
    color: #ff4444;
}

.mytech-header-progress-wrapper.warning .mytech-header-progress-value {
    color: #ff4444;
}

.mytech-header-progress-bar.warning {
    background: linear-gradient(90deg, #ff4444 0%, #ff6666 100%) !important;
    box-shadow: 0 0 15px rgba(255,68,68,0.8) !important;
}

@keyframes warning-pulse {
    0% { box-shadow: 0 0 10px rgba(255,60,60,0.3); }
    100% { box-shadow: 0 0 25px rgba(255,60,60,0.6); }
}

/* ============================================
   SWITCH SELECTION FOR PRESETS
   Styled like slider selection
   ============================================ */

.maestro-switch-selectable {
    outline: 2px dashed rgba(255,136,0,0.5) !important;
    outline-offset: 4px !important;
    cursor: pointer !important;
    border-radius: 20px;
}

.maestro-switch-selectable:hover {
    outline-color: #ff8800 !important;
    box-shadow: 0 0 20px rgba(255,136,0,0.3) !important;
}

.maestro-switch-selected {
    outline: 2px solid #ff8800 !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 20px rgba(255,136,0,0.4) !important;
}

.maestro-switch-selected::after {
    content: '✓';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    background: #ff8800;
    color: #000;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 1000;
}

/* ============================================
   MIDI LEARN SYSTEM
   ============================================ */

.midi-status-row {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.midi-status {
    font-size: 10px;
    padding: 4px 10px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    color: #707888;
}

.midi-status.connected {
    color: #00ff88;
    border-color: rgba(0,255,136,0.3);
    background: rgba(0,255,136,0.1);
}

.midi-learn-btn {
    opacity: 0.4;
    transition: all 0.15s ease;
}

.midi-learn-btn:hover {
    opacity: 1;
    background: rgba(138,43,226,0.2) !important;
}

.midi-learn-btn.has-mapping {
    opacity: 1;
    color: #8a2be2;
}

.midi-learn-btn.learning {
    opacity: 1;
    animation: midi-pulse 0.5s infinite alternate;
    background: rgba(138,43,226,0.3) !important;
}

@keyframes midi-pulse {
    0% { box-shadow: 0 0 5px rgba(138,43,226,0.5); }
    100% { box-shadow: 0 0 15px rgba(138,43,226,0.8); }
}

.preset-midi-label {
    font-size: 8px;
    padding: 2px 6px;
    background: rgba(138,43,226,0.3);
    border: 1px solid rgba(138,43,226,0.5);
    border-radius: 8px;
    color: #b388ff;
    font-family: 'SF Mono', 'Menlo', monospace;
    margin-left: auto;
}

/* === PRESET TEMPO SLIDER === */
.preset-tempo-container {
    background: linear-gradient(180deg, rgba(255,136,0,0.15) 0%, rgba(255,100,0,0.08) 100%);
    border: 1px solid rgba(255,136,0,0.3);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    animation: tempo-glow 1s ease-in-out infinite alternate;
}

@keyframes tempo-glow {
    0% { box-shadow: 0 0 8px rgba(255,136,0,0.2); }
    100% { box-shadow: 0 0 15px rgba(255,136,0,0.4); }
}

.preset-tempo-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.preset-tempo-label {
    font-size: 11px;
    font-weight: 600;
    color: #ff8800;
    min-width: 55px;
}

.preset-tempo-container input[type="range"] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0,0,0,0.4);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.preset-tempo-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: linear-gradient(180deg, #ff8800 0%, #ff6600 100%);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(255,136,0,0.5);
    transition: transform 0.15s ease;
}

.preset-tempo-container input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.preset-tempo-container input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: linear-gradient(180deg, #ff8800 0%, #ff6600 100%);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(255,136,0,0.5);
}

.preset-tempo-value {
    font-size: 11px;
    font-weight: 600;
    color: #ffaa44;
    font-family: 'SF Mono', 'Menlo', monospace;
    min-width: 50px;
    text-align: right;
}

.tempo-midi-btn {
    font-size: 12px;
    padding: 4px 8px;
    background: rgba(138,43,226,0.2);
    border: 1px solid rgba(138,43,226,0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: 8px;
}

.tempo-midi-btn:hover {
    background: rgba(138,43,226,0.4);
    border-color: rgba(138,43,226,0.6);
}

.tempo-midi-btn.has-mapping {
    background: rgba(138,43,226,0.4);
    border-color: rgba(138,43,226,0.6);
    color: #b388ff;
    font-size: 9px;
    font-family: 'SF Mono', 'Menlo', monospace;
}

.tempo-midi-btn.learning {
    animation: midi-pulse 0.5s infinite alternate;
    background: rgba(138,43,226,0.5);
}

/* === KEYBOARD LEARN SYSTEM === */
.key-learn-btn {
    opacity: 0.4;
    transition: all 0.15s ease;
}

.key-learn-btn:hover {
    opacity: 1;
    background: rgba(0,200,100,0.2) !important;
}

.key-learn-btn.has-mapping {
    opacity: 1;
    color: #00c864;
}

.key-learn-btn.learning {
    opacity: 1;
    animation: key-pulse 0.5s infinite alternate;
    background: rgba(0,200,100,0.3) !important;
}

@keyframes key-pulse {
    0% { box-shadow: 0 0 5px rgba(0,200,100,0.5); }
    100% { box-shadow: 0 0 15px rgba(0,200,100,0.8); }
}

.preset-key-label {
    font-size: 8px;
    padding: 2px 6px;
    background: rgba(0,200,100,0.3);
    border: 1px solid rgba(0,200,100,0.5);
    border-radius: 8px;
    color: #88ffaa;
    font-family: 'SF Mono', 'Menlo', monospace;
    margin-left: 4px;
}

/* === FIXTURE BROWSER === */
.fixture-browser {
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.fixture-browser-loading {
    color: #888;
    text-align: center;
    padding: 20px;
    font-size: 12px;
}

.fixture-item {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 8px;
}

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

/* Checkbox Styling */
.api-channel-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    border: 2px solid rgba(102, 126, 234, 0.5);
    border-radius: 4px;
    background: rgba(0,0,0,0.3);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.api-channel-checkbox:hover {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.2);
}

.api-channel-checkbox:checked {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
}

.api-channel-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}