/* Grundlegende Stile & Variablen - OPTIMIZED - Neumorphism Shadows Removed */
/* NDG CSS script version 021 (Preset Manager Styles Added) */

@font-face {
    font-family: 'Abel';
    src: url('font/Abel-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Improves loading performance */
}

:root {
    /* --- FARBPALETTE --- */
    --background-color: #2a2a2a; /* Haupt-Hintergrund */
    --element-bg-color: var(--background-color); /* Farbe für Controls, Tracks, Steps, Modals */
    --container-background-fallback: #1c1d20; /* Fallback */

    /* Schattenfarben (nicht mehr für Neumorphism verwendet, könnten für andere Effekte bleiben if needed) */
    --shadow-color-light: #3c3c3c;
    --shadow-color-dark: #181818;
    --inset-shadow-color-light: rgba(60, 60, 60, 0.5);
    --inset-shadow-color-dark: rgba(24, 24, 24, 0.8);

    --primary-accent-color: #f5d62bff; /* Main - school-bus-yellow */
    --secondary-accent-color: #e6c929ff;
    --text-color: #F5F5F5;              /* Photon Weiß */
    --secondary-text-color: #94a3b8;    /* Titan Grau */
    --border-color-subtle: #4a5568; /* Subtiler Rand */
    --error-color: #f56565;             /* Rötlicher Fehler */
    --success-color: #48bb78;           /* Grün für Erfolg */
    --info-color: #4299e1;              /* Blau für Info */

    /* Step Sequencer */
    --step-off-color: var(--element-bg-color);
    --step-active-color: #FFFFFF;
    --step-current-border: var(--primary-accent-color);
    --velocity-pattern-overlay-med: rgba(0, 0, 0, 0.15);
    --velocity-pattern-overlay-low: rgba(0, 0, 0, 0.3);

    /* Rating Stars */
    --rating-star-color: #f5d62bff;
    --rating-star-inactive-color: #5a5a5a;

    /* Track Color Placeholder */
    --track-highlight: var(--primary-accent-color);

    /* --- TYPOGRAFIE --- */
    --font-family: 'Abel', 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* --- LAYOUT & STIL --- */
    --border-radius-standard: 10px;
    --spacing-unit: 8px;
    --step-probability-opacity: 1.0;

    /* Neumorphism Schatten Variablen entfernt */
    /* --neumorphism-shadow-outset: none; */
    /* --neumorphism-shadow-inset: none; */


    /* Track Colors */
    --track0-color: #f5d62bff;
    --track1-color: #e6c929ff;
    --track2-color: #d6bc27ff;
    --track3-color: #c4ac23ff;
    --track4-color: #b39d20ff;
}

/* Performance Mode für Schatten ist nicht mehr relevant */


body {
    background-color: var(--background-color) !important;
	background-image: none !important;
    color: var(--text-color);
    font-family: var(--font-family);
    margin: 0;
    padding: calc(var(--spacing-unit) * 3);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    min-height: 100vh;
    box-sizing: border-box;
}
body.performance-mode-active div#background-pattern {
    display: none !important;
}
button {
	font-family: var(--font-family);
}

/* === BG Pattern Container === */
#background-pattern {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; background-color: var(--background-color); overflow: hidden;
	filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    /* Optimization Note: If pattern.js causes performance issues with animations,
       consider simplifying the JS or using a static, pre-rendered grayscale image.
       The filter itself also adds rendering overhead. */
}


h1 {
    color: var(--primary-accent-color);
    text-shadow: none;
    margin-bottom: calc(var(--spacing-unit) * 4);
    font-weight: 600;
    position: relative; z-index: 2;
}
.slogan{
    margin-right: 1em;
}
.fantasy-name-title{
    font-size: 1.5em;
    width: 30%;
}

/* --- Globale Kontrollen --- */

.sequencer-controls img{
    height: 10em;
    margin-right: 1em;
}
.sequencer-controls h1{
    display: none; /* Hide H1 if logo is present */
}

.sequencer-controls p {
    display: block;
    margin: 0;
}

.sequencer-controls {
    background-color: var(--element-bg-color);
    padding: calc(var(--spacing-unit) * 2.5);
    margin-bottom: calc(var(--spacing-unit) * 3);
    border-radius: var(--border-radius-standard);
    border: 1px solid var(--border-color-subtle); /* Added subtle border instead of shadow */
    /* box-shadow: none; */ /* Neumorphism shadow removed */
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    align-items: center;
    flex-wrap: wrap;
    width: 95%;
    max-width: 1300px;
    box-sizing: border-box;
    position: relative; z-index: 2;
    transition: background-color 0.2s ease;
}

.sequencer-controls h2 { margin: 0; font-size: 1.2em; font-weight: 500; color: var(--text-color); }
.sequencer-controls label { color: var(--secondary-text-color); font-size: 0.9em; }
.sequencer-controls input[type="number"] {
    width: 60px;
    background-color: var(--element-bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color-subtle); /* Added subtle border */
    border-radius: calc(var(--border-radius-standard) - 4px);
    padding: var(--spacing-unit);
    text-align: center;
    /* box-shadow: none; */ /* Neumorphism shadow removed */
}
.sequencer-controls input[type="range"] {
    cursor: pointer; vertical-align: middle; accent-color: var(--primary-accent-color); min-width: 100px;
}

/* --- Button Styles --- */
.sequencer-controls button,
.modal-content button, 
.sequencer-controls a {
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
    border-radius: var(--border-radius-standard);
    cursor: pointer; font-weight: 600; font-size: 0.95em;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    border: 1px solid var(--border-color-subtle); /* Added subtle border */
    line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--spacing-unit) / 2);
    background-color: var(--element-bg-color);
    color: var(--secondary-text-color);
    /* box-shadow: none; */ /* Neumorphism shadow removed */
    text-align: center;
    will-change: transform;
}


.sequencer-controls button:hover,
.modal-content button:hover:not(.close-modal-button),
.sequencer-controls a:hover {
    color: var(--text-color);
    background-color: color-mix(in srgb, var(--element-bg-color) 80%, var(--text-color)); /* Subtle hover */
    transform: translateY(-1px);
}


.sequencer-controls button:active,
.modal-content button:active:not(.close-modal-button),
.sequencer-controls a:active {
    /* box-shadow: none; */ /* Neumorphism shadow removed */
    transform: scale(0.98);
    color: var(--primary-accent-color);
    background-color: color-mix(in srgb, var(--element-bg-color) 90%, var(--shadow-color-dark)); /* Darker active state */
}

/* Spezifische Button-Farben */
.sequencer-controls button#play-pause-button { color: var(--success-color); }
.sequencer-controls button#randomize-all-button { color: var(--secondary-accent-color); }
.sequencer-controls button#open-preset-manager-button { color: var(--info-color); }
.sequencer-controls button i { font-size: 1.1em; line-height: 1; }

/* --- Tracks --- */
#sequencer-container { display: flex; flex-direction: column; gap: calc(var(--spacing-unit) * 2); width: 95%; max-width: 1300px; position: relative; z-index: 2; padding-bottom:1em; }
.track {
    background-color: var(--element-bg-color);
    border: 1px solid var(--border-color-subtle); /* Added subtle border */
    border-radius: var(--border-radius-standard);
    padding: calc(var(--spacing-unit) * 2);
    display: flex; flex-direction: column; gap: calc(var(--spacing-unit) * 1.5);
    /* box-shadow: none; */ /* Neumorphism shadow removed */
    transition: border-left-color 0.3s ease;
    contain: content;
}


/* Track specific border colors */
#track-0 { border-left: 4px solid var(--track0-color); --track-highlight: var(--track0-color); }
#track-1 { border-left: 4px solid var(--track1-color); --track-highlight: var(--track1-color); }
#track-2 { border-left: 4px solid var(--track2-color); --track-highlight: var(--track2-color); }
#track-3 { border-left: 4px solid var(--track3-color); --track-highlight: var(--track3-color); }
#track-4 { border-left: 4px solid var(--track4-color); --track-highlight: var(--track4-color); }

.track-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: calc(var(--spacing-unit) * 1.5); border-bottom: 1px solid var(--border-color-subtle); padding-bottom: calc(var(--spacing-unit) * 1.5); }
.track-name { font-weight: 600; font-size: 1.2em; color: var(--track-highlight); min-width: 100px; }
.track-controls { display: flex; align-items: center; gap: calc(var(--spacing-unit) * 1.5); flex-wrap: wrap; }
.track-controls label { font-size: 0.85em; color: var(--secondary-text-color); display: flex; align-items: center; gap: calc(var(--spacing-unit) / 2); }
.track-controls input[type="range"] { width: 80px; cursor: pointer; vertical-align: middle; accent-color: var(--track-highlight); transition: accent-color 0.3s ease; }
.track-controls input[type="number"] { width: 50px; background-color: var(--element-bg-color); color: var(--text-color); border: 1px solid var(--border-color-subtle); border-radius: calc(var(--border-radius-standard) - 4px); padding: calc(var(--spacing-unit) / 2); font-size: 0.9em; /* box-shadow: none; */ }
.track-controls select { background-color: var(--element-bg-color); color: var(--text-color); border: 1px solid var(--border-color-subtle); border-radius: calc(var(--border-radius-standard) - 2px); padding: calc(var(--spacing-unit) / 2) var(--spacing-unit); font-size: 0.85em; /* box-shadow: none; */ -webkit-appearance: none; appearance: none; }
.track-controls button {
    background-color: var(--element-bg-color);
    color: var(--secondary-text-color);
    border: 1px solid var(--border-color-subtle); padding: calc(var(--spacing-unit) / 2) var(--spacing-unit);
    border-radius: calc(var(--border-radius-standard) - 2px);
    cursor: pointer; font-size: 0.85em;
    transition: color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    /* box-shadow: none; */
    will-change: transform;
}
.track-controls button:hover {
    color: var(--track-highlight);
    transform: translateY(-1px);
    background-color: color-mix(in srgb, var(--element-bg-color) 80%, var(--text-color));
}
.track-controls button:active { /* box-shadow: none; */ transform: scale(0.98); background-color: color-mix(in srgb, var(--element-bg-color) 90%, var(--shadow-color-dark));}
.track-controls span[class$="-display"], .step-submenu span[class$="-display"] { display: inline-block; min-width: 40px; padding: calc(var(--spacing-unit) / 3) calc(var(--spacing-unit) / 2); background-color: var(--element-bg-color); color: var(--secondary-text-color); border: 1px solid var(--border-color-subtle); border-radius: calc(var(--border-radius-standard) - 4px); font-size: 0.8em; text-align: center; font-family: monospace; /* box-shadow: none; */ }

/* --- Track Actions (Buttons angepasst) --- */
.track-actions { display: flex; gap: var(--spacing-unit); padding: var(--spacing-unit) 0; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.button-groups-container { display: flex; flex-direction: column; gap: var(--spacing-unit); }
.button-group { display: flex; align-items: center; gap: var(--spacing-unit); flex-wrap: wrap; }
.button-group-label { color: var(--secondary-text-color); font-size: 0.85em; opacity: 0.9; width: 6em; text-align: right; flex-shrink: 0; }
.buttons-row { display: flex; gap: calc(var(--spacing-unit) * 1); flex-wrap: wrap; align-items: center; }
.random-buttons button, .reset-buttons button {
    background-color: var(--element-bg-color);
    color: var(--secondary-text-color);
    border: 1px solid var(--border-color-subtle); padding: calc(var(--spacing-unit) / 2) var(--spacing-unit);
    border-radius: calc(var(--border-radius-standard) - 2px);
    cursor: pointer; font-size: 1em; white-space: nowrap;
    transition: color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    /* box-shadow: none; */
    will-change: transform;
}

.random-buttons button:hover, .reset-buttons button:hover {
    color: var(--track-highlight);
    transform: translateY(-1px);
    background-color: color-mix(in srgb, var(--element-bg-color) 80%, var(--text-color));
}

.random-buttons button:active, .reset-buttons button:active { transform: scale(0.95); /* box-shadow: none; */ background-color: color-mix(in srgb, var(--element-bg-color) 90%, var(--shadow-color-dark));}
.random-all-button, .reset-all-button { color: var(--track-highlight) !important; font-weight: bold; min-width: 4em; text-align: center; }
.clear-track-button {
    background-color: var(--element-bg-color); color: var(--error-color);
    border: 1px solid var(--error-color); padding: calc(var(--spacing-unit) * 0.8) calc(var(--spacing-unit) * 1.5);
    border-radius: var(--border-radius-standard); cursor: pointer; font-size: 0.9em;
    display: flex; align-items: center; gap: var(--spacing-unit);
    transition: transform 0.2s ease, background-color 0.2s ease; margin-left: auto;
    /* box-shadow: none; */
    will-change: transform;
}
.clear-track-button:hover {
    transform: scale(1.03) translateY(-1px);
    background-color: color-mix(in srgb, var(--element-bg-color) 80%, var(--error-color));
}
.clear-track-button:active { /* box-shadow: none; */ transform: scale(0.98); background-color: color-mix(in srgb, var(--element-bg-color) 90%, var(--shadow-color-dark));}
.trash-icon { font-size: 1.2em; }


/* === STEPS === */
.steps-container { display: grid; gap: 6px; width: 100%; padding: var(--spacing-unit) 0; box-sizing: border-box; }

.step {
    position: relative;
    background-color: var(--element-bg-color);
    border: 1px solid var(--border-color-subtle); /* Added subtle border */
    border-radius: calc(var(--border-radius-standard) - 2px);
    height: 50px;
    cursor: pointer;
    display: flex;
    overflow: hidden;
    opacity: var(--step-probability-opacity, 1.0);
    /* box-shadow: none; */ /* Neumorphism shadow removed */
    transition: background 0.1s ease, opacity 0.2s ease, border-color 0.1s ease;
    background-size: auto;
    background-repeat: repeat;
}


/* Aktive Steps */
.step.active {
    background: var(--track-highlight, var(--primary-accent-color));
    opacity: var(--step-probability-opacity, 1.0);
    border-color: var(--track-highlight, var(--primary-accent-color)); /* Match border to active color */
    /* box-shadow: none; */ /* Neumorphism shadow removed */
}

/* Velocity Patterns */
.step.active.velocity-med {
    background:
        repeating-linear-gradient( 45deg, transparent, transparent 0.4em, var(--velocity-pattern-overlay-med) 0.41em, var(--velocity-pattern-overlay-med) 0.8em ),
        var(--track-highlight, var(--primary-accent-color));
    opacity: var(--step-probability-opacity, 1.0);
    /* box-shadow: none; */
}
.step.active.velocity-low {
    background:
        repeating-linear-gradient( 45deg, transparent, transparent 0.3em, var(--velocity-pattern-overlay-low) 0.31em, var(--velocity-pattern-overlay-low) 0.7em ),
        var(--track-highlight, var(--primary-accent-color));
    opacity: var(--step-probability-opacity, 1.0);
    /* box-shadow: none; */
}


/* Indikatoren in Steps - Sichtbarkeit */
.step:not(.active) .step-left-bar > div,
.step:not(.active) .step-divider-indicator,
.step:not(.active) .step-sample-box,
.step:not(.active) .step-decay-bar,
.step:not(.active) .step-decay-text { visibility: hidden; opacity: 0; transition: visibility 0s linear 0.1s, opacity 0.1s ease; }
.step.active .step-left-bar > div,
.step.active .step-divider-indicator,
.step.active .step-sample-box,
.step.active .step-decay-bar,
.step.active .step-decay-text { visibility: visible; opacity: 1; transition: opacity 0.1s ease; }

/* --- Indikatoren innerhalb der Steps --- */
.step-left-bar { position: relative; width: 6px; flex-shrink: 0; background-color: rgba(0,0,0,0.1); border-right: none; overflow: hidden; border-radius: 3px 0 0 3px; }
.step-pitch-top { position: absolute; left: 0; width: 100%; height: 0; bottom: 50%; background-color: var(--primary-accent-color); }
.step-pitch-bottom { position: absolute; left: 0; width: 100%; height: 0; top: 50%; background-color: var(--secondary-accent-color); }
.step-right-section { flex-grow: 1; display: flex; flex-direction: column; position: relative; }
.step-main-content { flex-grow: 1; position: relative; display: flex; justify-content: center; align-items: center; min-height: 20px; }
.step-divider-indicator { font-size: 1.8em; font-weight: bold; position: absolute; left: 38%; top: 33%; transform: translate(-50%, -50%); color: rgba(0,0,0,0.4); text-shadow: none; pointer-events: none; }
.step-sample-box { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 14px; background-color: rgba(0,0,0,0.2); border: none; border-radius: 2px; display: flex; justify-content: center; align-items: center; }
.step-sample-text { font-size: 0.7em; font-weight: bold; color: var(--text-color); opacity: 0.8; }
.step-decay-bar { position: absolute; bottom: 3px; left: 8px; height: 3px; width: 0; background-color: var(--background-color); border-radius: 2px; transition: width 0.1s ease; opacity: 0.7; }
.step-decay-text { position: absolute; bottom: 6px; left: 9px; font-size: 0.6em; color: var(--background-color); opacity: 0.7; text-transform: uppercase; white-space: nowrap; pointer-events: none; }

/* Current Step Highlight */
.step.current {
    /* box-shadow: none !important; */ /* Neumorphism shadow removed, glow also removed */
    border: 2px solid var(--step-current-border) !important; /* Emphasized border */
    z-index: 2;
    opacity: 1.0 !important;
    will-change: opacity, border;
}


/* Hidden Steps */
.step-hidden { opacity: 0.2 !important; pointer-events: none; background-color: color-mix(in srgb, var(--step-off-color) 50%, var(--background-color)) !important; border-color: transparent !important; /* box-shadow: none !important; */ }
.step-hidden .step-left-bar > div, .step-hidden .step-divider-indicator, .step-hidden .step-sample-box, .step-hidden .step-decay-text, .step-hidden .step-decay-bar { visibility: hidden; }
.step-hidden.current { opacity: 0.4 !important; border: 1px dashed var(--secondary-text-color) !important; background-color: var(--step-off-color) !important; /* box-shadow: none !important; */ }


/* === STEP SUBMENU === */
.step-submenu {
    background-color: var(--element-bg-color);
    border: 1px solid var(--border-color-subtle); padding: calc(var(--spacing-unit) * 2.5);
    border-radius: var(--border-radius-standard);
    /* box-shadow: none; */ /* Neumorphism shadow removed */
    z-index: 100; min-width: 320px; color: var(--text-color);
    contain: content;
}
.step-submenu h4 { margin-top: 0; margin-bottom: calc(var(--spacing-unit) * 2); color: var(--primary-accent-color); text-align: center; font-weight: 500; }
.step-submenu hr { border: none; height: 1px; background-color: var(--border-color-subtle); margin: var(--spacing-unit) 0; } /* Simpler separator */
.step-submenu label { display: inline-block; width: 90px; font-size: 0.9em; color: var(--secondary-text-color); margin-bottom: var(--spacing-unit); vertical-align: middle; }
.step-submenu input[type="range"] { width: 130px; vertical-align: middle; cursor: pointer; accent-color: var(--primary-accent-color); }
.step-submenu select { background-color: var(--element-bg-color); color: var(--text-color); border: 1px solid var(--border-color-subtle); border-radius: calc(var(--border-radius-standard) - 2px); padding: calc(var(--spacing-unit) / 2) var(--spacing-unit); margin-left: var(--spacing-unit); vertical-align: middle; /* box-shadow: none; */ -webkit-appearance: none; appearance: none; }
.step-submenu button.reset-pitch {
    background-color: var(--element-bg-color); color: var(--secondary-text-color);
    border: 1px solid var(--border-color-subtle); border-radius: 50%; padding: 2px 6px; margin-left: var(--spacing-unit);
    font-size: 0.8em; line-height: 1; cursor: pointer; vertical-align: middle;
    /* box-shadow: none; */
    transition: color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    will-change: transform;
}
.step-submenu button.reset-pitch:hover {
    color: var(--text-color);
    transform: translateY(-1px);
    background-color: color-mix(in srgb, var(--element-bg-color) 80%, var(--text-color));
}
.step-submenu button.reset-pitch:active { /* box-shadow: none; */ background-color: color-mix(in srgb, var(--element-bg-color) 90%, var(--shadow-color-dark));}
.waveform-canvas { border: 1px solid var(--border-color-subtle); background-color: var(--background-color); border-radius: calc(var(--border-radius-standard) - 4px); display: block; margin-bottom: var(--spacing-unit); /* box-shadow: none; */ }
.waveform-labels { font-size: 0.75em; color: var(--secondary-text-color); opacity: 0.8; display: flex; justify-content: space-between; }
.submenu-actions { margin-top: calc(var(--spacing-unit) * 2); text-align: right; }
.submenu-actions button {
    background-color: var(--element-bg-color); color: var(--text-color);
    border: 1px solid var(--border-color-subtle); border-radius: var(--border-radius-standard);
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
    margin-left: var(--spacing-unit); cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    font-weight: 500; /* box-shadow: none; */
    will-change: transform;
}
.submenu-actions button:hover {
    transform: translateY(-1px);
    background-color: color-mix(in srgb, var(--element-bg-color) 80%, var(--text-color));
}
.submenu-actions button:active { /* box-shadow: none; */ transform: scale(0.98); background-color: color-mix(in srgb, var(--element-bg-color) 90%, var(--shadow-color-dark));}
.submenu-actions button.close-submenu { background-color: var(--primary-accent-color); color: var(--background-color); font-weight: 600; border-color: var(--primary-accent-color); }
.submenu-actions button.close-submenu:hover { background-color: color-mix(in srgb, var(--primary-accent-color) 90%, #fff); }


/* === MODALS (Allgemein) === */
.modal {
    display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(42, 42, 42, 0.8);
    z-index: 1000; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    padding: var(--spacing-unit); box-sizing: border-box;
}
.modal:not(.hidden) { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s linear 0s; }
.modal.hidden { display: none; }
.modal-content {
    background-color: var(--element-bg-color);
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 5);
    border-radius: var(--border-radius-standard); border: 1px solid var(--border-color-subtle); /* Added subtle border */
    /* box-shadow: none; */ /* Neumorphism shadow removed */
    max-width: 600px; width: 90%; position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    max-height: 90vh; display: flex; flex-direction: column;
    will-change: transform, opacity;
    contain: content;
}

.modal:not(.hidden) .modal-content { transform: scale(1.0); }
.modal-content h2 { color: var(--primary-accent-color); margin-top: 0; margin-bottom: calc(var(--spacing-unit) * 3); text-align: center; font-weight: 600; flex-shrink: 0; }
.modal-body { color: var(--text-color); line-height: 1.6; overflow-y: auto; padding-right: var(--spacing-unit); flex-grow: 1; }
.modal-body ol, .modal-body ul { margin: var(--spacing-unit) 0; padding-left: calc(var(--spacing-unit) * 3); } .modal-body li { margin: var(--spacing-unit) 0; }
#start-sequencer{
	display: flex;
	margin-bottom: 1em;
}
.preset-label{
	font-size: 0.6em;
}
.preset-author, .preset-rating{
	font-size: 0.8em;
}

.primary-button {
	background-color: var(--primary-accent-color);
	color: var(--background-color);
	border: 1px solid var(--primary-accent-color); /* Adjusted border */
	padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3); border-radius: var(--border-radius-standard);
	font-size: 1.1em;
	font-weight: 600;
	cursor: pointer;
	display: block;
	margin: calc(var(--spacing-unit) * 3) auto 0;
	transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
	/* box-shadow: none; */ /* Neumorphism shadow removed */
	flex-shrink: 0;
    will-change: transform;
}

.primary-button:hover {
	color: var(--background-color) !important; /* Ensure text stays dark on hover */
	background-color: color-mix(in srgb, var(--primary-accent-color) 85%, #fff);
	transform: translateY(-2px);
}
.primary-button:active{ /* box-shadow: none; */ transform: scale(0.98); background-color: color-mix(in srgb, var(--primary-accent-color) 70%, #000); }

.secondary-button {
    background-color: var(--element-bg-color);
    color: var(--secondary-text-color);
    border: 1px solid var(--border-color-subtle);
    padding: calc(var(--spacing-unit) * 1.2) calc(var(--spacing-unit) * 2.5);
    border-radius: var(--border-radius-standard);
    font-size: 1.0em;
    font-weight: 500;
    cursor: pointer;
    display: block;
    margin: calc(var(--spacing-unit) * 2) auto 0;
    transition: color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    /* box-shadow: none; */ /* Neumorphism shadow removed */
    width: fit-content;
    flex-shrink: 0;
    will-change: transform;
}

.secondary-button:hover {
    color: var(--text-color);
    transform: translateY(-1px);
    background-color: color-mix(in srgb, var(--element-bg-color) 80%, var(--text-color));
}
 .secondary-button:active{
    /* box-shadow: none; */ /* Neumorphism shadow removed */
    transform: scale(0.98);
    background-color: color-mix(in srgb, var(--element-bg-color) 90%, var(--shadow-color-dark));
}
.close-modal-button {
    position: absolute; top: calc(var(--spacing-unit) * 1.5); right: calc(var(--spacing-unit) * 2);
    background: none; border: none; font-size: 2em; color: var(--secondary-text-color);
    cursor: pointer; opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
    line-height: 1; padding: 0; /* box-shadow: none; */
    will-change: transform, opacity;
}
.close-modal-button:hover { opacity: 1; transform: scale(1.1); color: var(--text-color); /* box-shadow: none; */ }
.close-modal-button:active { transform: scale(1.0); /* box-shadow: none; */ }


/* --- Notification Modal (Toast) --- */
#notification-modal {
    position: fixed; left: 50%; top: calc(var(--spacing-unit) * 4);
    min-width: 300px; max-width: 90%;
    background-color: var(--element-bg-color); color: var(--text-color);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
    border-radius: var(--border-radius-standard); border: 1px solid var(--border-color-subtle); /* Added subtle border */
    /* box-shadow: none; */ /* Neumorphism shadow removed */
    text-align: center; z-index: 1050; opacity: 0; visibility: hidden;
    transform: translate(-50%, -20px);
    transition: opacity 0.4s ease, visibility 0s linear 0.4s, transform 0.4s ease;
    display: flex; align-items: center; justify-content: center; gap: var(--spacing-unit);
    will-change: transform, opacity;
}
#notification-modal.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.4s ease, visibility 0s linear 0s, transform 0.4s ease; }
#notification-modal .icon { font-size: 1.3em; }
#notification-modal span:first-child[class="icon"] { color: var(--info-color); }
#notification-modal.success .icon { color: var(--success-color); }
#notification-modal.error .icon { color: var(--error-color); }
#notification-modal:not(.show) { display: none; }


/* --- Share Modal Specific Styles --- */
.share-modal-content { text-align: left; }
.share-link-container { display: flex; margin: calc(var(--spacing-unit) * 2.5) 0; }
.share-url-input { flex-grow: 1; padding: var(--spacing-unit); background-color: var(--element-bg-color); color: var(--text-color); border: 1px solid var(--border-color-subtle); border-right:none; border-radius: var(--border-radius-standard) 0 0 var(--border-radius-standard); font-size: 0.95em; overflow-x: hidden; /* box-shadow: none; */ }
.copy-link-button {
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
    background-color: var(--primary-accent-color); color: var(--background-color);
    border: 1px solid var(--primary-accent-color); border-left:none; border-radius: 0 var(--border-radius-standard) var(--border-radius-standard) 0;
    cursor: pointer; font-size: 1em;
    transition: background-color 0.2s ease, transform 0.2s ease;
    display: flex; align-items: center; gap: calc(var(--spacing-unit) / 2);
    /* box-shadow: none; */
    will-change: transform;
}
.copy-link-button:hover {
    background-color: color-mix(in srgb, var(--primary-accent-color) 90%, #fff);
    transform: translateY(-1px);
}
.copy-link-button:active { /* box-shadow: none; */ transform: scale(0.98); background-color: color-mix(in srgb, var(--primary-accent-color) 70%, #000);}
#copy-status { font-size: 0.8em; color: var(--secondary-text-color); margin-left: var(--spacing-unit); }
.share-info { font-size: 0.85em; color: var(--secondary-text-color); margin-bottom: calc(var(--spacing-unit) * 2.5); }
.social-share-buttons { display: flex; justify-content: center; gap: var(--spacing-unit); flex-wrap: wrap; margin-bottom: var(--spacing-unit) * 2; }
.social-button {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--spacing-unit); padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
    border-radius: var(--border-radius-standard); color: white !important; text-decoration: none;
    font-weight: 500; font-size: 0.9em; text-align: center; min-width: 110px;
    transition: transform 0.2s ease, background-color 0.2s ease;
    border: none; /* Social buttons often don't have borders or use their bg color */
    /* box-shadow: none; */
    will-change: transform;
}

.social-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.1); /* Slight brightness increase on hover */
}
.social-button:active { /* box-shadow: none; */ transform: scale(0.98); filter: brightness(0.9); }
/* Social Button Colors */
.social-button.twitter { background-color: #1DA1F2; } .social-button.facebook { background-color: #1877F2; } .social-button.whatsapp { background-color: #25D366; } .social-button.telegram { background-color: #0088cc; } .social-button.email { background-color: #7f8c8d; }
.screenshot-info { font-size: 0.8em; text-align: center; color: var(--secondary-text-color); margin-top: var(--spacing-unit) * 2; }


/* === Preset Manager Modal (NEU) === */
#preset-manager-modal .modal-content {
    max-width: 750px;
    width: 95%;
}
.preset-manager-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.preset-manager-toolbar {
    display: flex;
    gap: var(--spacing-unit);
    margin-bottom: calc(var(--spacing-unit) * 2);
    padding-bottom: var(--spacing-unit);
    border-bottom: 1px solid var(--border-color-subtle);
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.preset-manager-toolbar label {
    color: var(--secondary-text-color);
    font-size: 0.9em;
    margin-right: calc(var(--spacing-unit) / 2);
}
.preset-manager-toolbar select,
.preset-manager-toolbar input[type="text"] {
    padding: calc(var(--spacing-unit) * 0.75) var(--spacing-unit);
    background-color: var(--element-bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color-subtle);
    border-radius: calc(var(--border-radius-standard) - 4px);
    font-size: 0.9em;
    /* box-shadow: none; */ /* Neumorphism shadow removed */
    flex-grow: 1;
    min-width: 150px;
}
.preset-manager-toolbar select {
    flex-grow: 0;
    min-width: 120px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.414l-4.707-4.707a1 1 0 011.414-1.414L8 8.586l3.293-3.293a1 1 0 111.414 1.414L8 11.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-unit) center;
    background-size: 1em;
    padding-right: calc(var(--spacing-unit) * 3);
}
.preset-manager-toolbar input[type="text"] {
    max-width: 300px;
}


#preset-manager-list-container {
    flex-grow: 1;
    overflow-y: auto;
    margin-top: 0;
    border: none;
    padding: 0;
    background-color: transparent;
    scrollbar-width: thin;
    scrollbar-color: var(--secondary-text-color) var(--background-color);
}
#preset-manager-list-container::-webkit-scrollbar { width: 8px; }
#preset-manager-list-container::-webkit-scrollbar-track { background: var(--background-color); border-radius: 4px; }
#preset-manager-list-container::-webkit-scrollbar-thumb { background-color: var(--secondary-text-color); border-radius: 4px; border: 2px solid var(--background-color); }


#preset-manager-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#preset-manager-list li {
    padding: calc(var(--spacing-unit) * 1.2) var(--spacing-unit);
    border-bottom: 1px solid var(--border-color-subtle);
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: var(--text-color);
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    flex-wrap: nowrap;
}

#preset-manager-list li:last-child {
    border-bottom: none;
}

#preset-manager-list li:hover {
    background-color: var(--border-color-subtle);
}

.preset-rating-container {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    align-items: center;
    margin-right: var(--spacing-unit);
}
.rating-star {
    font-size: 1.2em;
    cursor: pointer;
    color: var(--rating-star-inactive-color);
    transition: color 0.1s ease, transform 0.1s ease;
    line-height: 1;
    will-change: transform;
}
.rating-star:hover {
    transform: scale(1.2);
    color: var(--rating-star-color);
}
.rating-star.filled {
    color: var(--rating-star-color);
}

.preset-name-author {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
    text-align: left;
    gap: 2px;
}
.preset-entry-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-color);
}
.preset-entry-author {
    color: var(--secondary-text-color);
    font-size: 0.85em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preset-info-container {
    display: flex;
    gap: var(--spacing-unit);
    flex-shrink: 0;
    align-items: center;
    text-align: right;
    margin-left: auto;
}
.preset-entry-info {
    color: var(--secondary-text-color);
    font-size: 0.8em;
    white-space: nowrap;
    opacity: 0.8;
}
.preset-entry-info.rating-count { }
.preset-entry-info.load-count { }


#preset-manager-list li.loading,
#preset-manager-list-container p {
    color: var(--secondary-text-color);
    font-style: italic;
    text-align: center;
    padding: calc(var(--spacing-unit) * 2);
    border-bottom: none;
    cursor: default;
}
#preset-manager-list li.loading:hover,
#preset-manager-list-container p:hover {
    background-color: transparent;
}

.error-message {
    color: var(--error-color);
    margin: var(--spacing-unit);
    padding: var(--spacing-unit);
    border: 1px solid var(--error-color);
    border-radius: var(--border-radius-standard);
    background-color: color-mix(in srgb, var(--error-color) 10%, transparent);
    text-align: center;
    font-size: 0.9em;
    flex-shrink: 0;
}


/* === Save Server Modal === */
#save-server-preset-modal .modal-content {
    max-width: 450px;
}
#save-server-preset-modal .form-group {
    margin-bottom: calc(var(--spacing-unit) * 2);
}
#save-server-preset-modal label {
    display: block;
    margin-bottom: calc(var(--spacing-unit) / 2);
    color: var(--secondary-text-color);
    font-size: 0.9em;
    font-weight: 500;
}
#save-server-preset-modal input[type="text"] {
    width: 100%;
    padding: var(--spacing-unit);
    background-color: var(--element-bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color-subtle);
    border-radius: calc(var(--border-radius-standard) - 2px);
    box-sizing: border-box;
    font-size: 1em;
    /* box-shadow: none; */ /* Neumorphism shadow removed */
}
#save-server-preset-modal input[type="text"]:focus {
    outline: 2px solid var(--primary-accent-color); /* Standard outline focus */
    outline-offset: 2px;
    border-color: var(--primary-accent-color); /* Optional: change border color on focus */
    /* box-shadow: none; */ /* Neumorphism shadow removed */
}
#save-server-preset-modal small {
    display: block;
    margin-top: calc(var(--spacing-unit) / 2);
    font-size: 0.8em;
    color: var(--secondary-text-color);
    opacity: 0.8;
}
#save-server-preset-modal .primary-button {
    margin-top: calc(var(--spacing-unit) * 2);
    width: 100%;
}

/* --- Responsiveness --- */
@media (max-width: 768px) {
    body { padding: var(--spacing-unit); }
    h1 { font-size: 1.8em; margin-bottom: calc(var(--spacing-unit) * 2); }
    .sequencer-controls { gap: var(--spacing-unit); padding: var(--spacing-unit) * 1.5; }
    #sequencer-container {gap: var(--spacing-unit); }
    .track { padding: var(--spacing-unit); }
    .track-header, .track-controls { gap: var(--spacing-unit); }
    .steps-container { gap: 4px; }
    .step { height: 45px; }
    .modal-content { padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 2); max-height: 95vh; }

    #preset-manager-modal .modal-content { max-width: 95%; }
    .preset-manager-toolbar { gap: calc(var(--spacing-unit) * 0.75); }
    .preset-manager-toolbar select,
    .preset-manager-toolbar input[type="text"] { min-width: 100px; }

    #preset-manager-list li {
        flex-wrap: wrap;
        gap: var(--spacing-unit);
        padding: var(--spacing-unit);
    }
    .preset-rating-container { order: 1; width: 100%; justify-content: center; margin-bottom: calc(var(--spacing-unit)/2); margin-right: 0; }
    .preset-name-author { order: 2; width: 100%; text-align: center; }
    .preset-info-container { order: 3; width: 100%; justify-content: center; margin-left: 0; gap: var(--spacing-unit) * 2; }

    .step-submenu { min-width: 280px; width: 90%; left: 5% !important; }
    .step-submenu input[type="range"] { width: calc(100% - 130px); }
}

@media (max-width: 480px) {
    body { padding: calc(var(--spacing-unit) / 2); }
    .sequencer-controls { flex-direction: column; align-items: stretch; }
    .sequencer-controls img { height: 6em; margin: 0 auto var(--spacing-unit); }
    .slogan { margin: 0 0 var(--spacing-unit); text-align: center; }
    .fantasy-name-title { width: 100%; text-align: center; font-size: 1.2em; margin-bottom: var(--spacing-unit); }
    .steps-container { gap: 3px; }
    .step { height: 40px; border-radius: calc(var(--border-radius-standard) - 4px); }
    .track-actions { flex-direction: column; align-items: stretch; }
    .button-groups-container { width: 100%; }
    .button-group { justify-content: center; }
    .clear-track-button { margin-left: 0; width: 100%; justify-content: center; }
    .preset-manager-toolbar { justify-content: center; }
    .preset-manager-toolbar select,
    .preset-manager-toolbar input[type="text"] { width: 100%; max-width: none; }
}