html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #ff6b6b;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #2c3e50;
}

/* ===== NAVIGATION STYLES ===== */
.navbar-nav {
    flex-grow: 1;
    justify-content: center;
    text-align: center;
}

.collapse.navbar-collapse {
    justify-content: center;
}

.navbar-light {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%) !important;
    box-shadow: 0 4px 20px rgba(255, 154, 158, 0.3);
}

.navbar-brand {
    color: #2c3e50 !important;
    font-weight: 700;
    font-size: 1.5rem;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
}

.nav-link {
    color: #2c3e50 !important;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 20px;
    padding: 8px 16px !important;
    margin: 0 4px;
}

    .nav-link:hover {
        background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
        color: #2c3e50 !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(255, 234, 167, 0.4);
    }

    .nav-link.full-circle-animated {
        position: relative;
        color: #e17055;
        transition: color 0.3s ease;
    }

        .nav-link.full-circle-animated::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -4px;
            transform: translateX(-50%);
            width: 0%;
            height: 2px;
            background: linear-gradient(90deg, #fd79a8, #fdcb6e);
            transition: width 0.4s ease;
        }

        .nav-link.full-circle-animated:hover::after {
            width: 100%;
        }

        .nav-link.full-circle-animated:hover {
            color: #d63031;
        }

.navbar-nav .nav-item {
    margin-bottom: 0.5rem;
}

.navbar-collapse {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 207, 239, 0.9) 100%);
    padding: 1rem;
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes loading {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes matrixGlow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(253, 121, 168, 0.5), 0 0 30px rgba(255, 107, 107, 0.3);
    }

    50% {
        box-shadow: 0 0 25px rgba(253, 121, 168, 0.8), 0 0 50px rgba(255, 107, 107, 0.6);
    }
}

@keyframes rainbowGlow {
    0% {
        border-color: #ff6b6b;
        box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
    }

    16% {
        border-color: #feca57;
        box-shadow: 0 0 20px rgba(254, 202, 87, 0.5);
    }

    33% {
        border-color: #48dbfb;
        box-shadow: 0 0 20px rgba(72, 219, 251, 0.5);
    }

    50% {
        border-color: #ff9ff3;
        box-shadow: 0 0 20px rgba(255, 159, 243, 0.5);
    }

    66% {
        border-color: #54a0ff;
        box-shadow: 0 0 20px rgba(84, 160, 255, 0.5);
    }

    83% {
        border-color: #5f27cd;
        box-shadow: 0 0 20px rgba(95, 39, 205, 0.5);
    }

    100% {
        border-color: #ff6b6b;
        box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes bannerSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* NEW: Fractal System Animations */
@keyframes fractalPulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 4px 25px rgba(102, 126, 234, 0.6);
        transform: scale(1.02);
    }
}

@keyframes extremePulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
        filter: brightness(1);
    }

    50% {
        box-shadow: 0 4px 25px rgba(255, 107, 107, 0.7);
        filter: brightness(1.1);
    }
}

@keyframes syncPulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes hauntingPulse {
    0%, 100% {
        opacity: 0.6;
        text-shadow: 0 0 10px rgba(76, 205, 196, 0.3);
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 20px rgba(76, 205, 196, 0.6);
    }
}

@keyframes rotationIndicator {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ===== HOME PAGE STYLES ===== */
.photo-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.gallery-img {
    width: auto;
    max-width: 250px;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(255, 105, 135, 0.3);
    display: block;
    transition: all 0.3s ease;
    border: 3px solid transparent;
    background: linear-gradient(45deg, #ff9a9e, #fecfef) border-box;
}

    .gallery-img:hover {
        transform: scale(1.08) rotate(2deg);
        box-shadow: 0 15px 40px rgba(255, 105, 135, 0.5);
        border-color: #fd79a8;
    }

@media (max-width: 767px) {
    .gallery-img {
        max-width: 100%;
    }
}

.intro {
    text-align: center;
    padding: 3rem;
    animation: fadeSlideUp 1s ease-out forwards;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 207, 239, 0.2) 100%);
    border-radius: 25px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

    .intro h1,
    .intro p {
        opacity: 0;
        transform: translateY(30px);
        animation: fadeSlideUp 1s ease-out forwards;
    }

    .intro h1 {
        animation-delay: 0.2s;
        background: linear-gradient(135deg, #fd79a8 0%, #fdcb6e 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 700;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }

    .intro p {
        animation-delay: 0.6s;
        color: #2c3e50;
        font-weight: 500;
    }

/* ===== CREATIONS PAGE STYLES ===== */
.grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 20px;
    backdrop-filter: blur(15px);
}

@media (max-width: 768px) {
    .grid-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.canvas-wrapper {
    position: relative;
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

#matrixCanvas {
    width: 100%;
    height: 600px;
    background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
    border: 4px solid;
    border-image: linear-gradient(45deg, #fd79a8, #fdcb6e) 1;
    border-radius: 15px;
    display: block;
    margin-top: 20px;
    animation: rainbowGlow 4s infinite;
}

#OG {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    max-width: 80%;
    max-height: 80%;
    pointer-events: none;
    z-index: 10;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(253, 121, 168, 0.4);
}

    #OG.visible {
        opacity: 1;
    }

/* ===== PROJECTS PAGE STYLES ===== */
.projects-body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    overflow-x: hidden;
}

.projects-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 15px 50px 15px;
    position: relative;
}

.projects-header {
    text-align: center;
    margin-bottom: 40px;
    background: rgba(255, 255, 255, 0.95);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

    .projects-header h1,
    .projects-container h1 {
        background: linear-gradient(135deg, #fd79a8 0%, #fdcb6e 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 2.5rem;
        margin-bottom: 0.75rem;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        font-weight: 800;
    }

    .projects-header p,
    .projects-container > p {
        color: #7f8c8d;
        font-style: italic;
        margin-bottom: 1.5rem;
        font-size: 1.1rem;
        font-weight: 500;
        background: rgba(255, 255, 255, 0.9);
        padding: 12px 25px;
        border-radius: 25px;
        backdrop-filter: blur(10px);
    }

.projects-tool-section {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 207, 239, 0.95) 100%);
    border-radius: 20px;
    padding: 30px;
    margin: 30px 0;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    border: 2px solid rgba(253, 121, 168, 0.3);
    position: relative;
    overflow: visible;
    backdrop-filter: blur(15px);
}

    .projects-tool-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #fd79a8, #fdcb6e, #ff6b6b, #4834d4);
        border-radius: 20px 20px 0 0;
    }

    .projects-tool-section h2 {
        color: #2c3e50;
        border-bottom: 3px solid;
        border-image: linear-gradient(90deg, #fd79a8, #fdcb6e) 1;
        padding-bottom: 10px;
        margin-bottom: 20px;
        font-size: 1.8rem;
        font-weight: 700;
    }

.projects-controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 20px;
    align-items: start;
}

@media (max-width: 768px) {
    .projects-controls-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.matrix-canvas-container {
    position: relative;
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    padding: 15px;
    border-radius: 20px;
    margin: 30px 0;
    border: 2px solid rgba(253, 121, 168, 0.5);
    box-shadow: 0 10px 30px rgba(253, 121, 168, 0.2);
    overflow: visible;
}

    .matrix-canvas-container::before {
        content: '🎨 Live Mathematical Visualization';
        position: absolute;
        top: -18px;
        left: 20px;
        background: linear-gradient(135deg, #fd79a8 0%, #fdcb6e 100%);
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: bold;
        box-shadow: 0 6px 20px rgba(253, 121, 168, 0.4);
        white-space: nowrap;
        z-index: 10;
        border: 2px solid rgba(255, 255, 255, 0.3);
    }

.projects-body #matrixCanvas {
    width: 100%;
    height: 400px;
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    border: 4px solid;
    border-image: linear-gradient(45deg, #fd79a8, #fdcb6e, #ff6b6b) 1;
    border-radius: 15px;
    margin: 15px 0;
    display: block;
    box-shadow: 0 15px 40px rgba(253, 121, 168, 0.3);
    transition: all 0.3s ease;
    position: relative;
}

    .projects-body #matrixCanvas:hover {
        animation: matrixGlow 2s infinite;
        transform: translateY(-3px);
    }

.projects-input-group {
    margin: 15px 0;
    position: relative;
}

    .projects-input-group label {
        display: block;
        font-weight: 700;
        margin-bottom: 8px;
        color: #2c3e50;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
    }

.projects-input {
    width: 100%;
    padding: 12px 15px;
    border: 3px solid rgba(253, 121, 168, 0.3);
    border-radius: 15px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
    font-family: 'Consolas', 'Monaco', monospace;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

    .projects-input:focus {
        outline: none;
        border-color: #fd79a8;
        box-shadow: 0 0 0 4px rgba(253, 121, 168, 0.2);
        background: #ffffff;
        transform: translateY(-2px);
    }

    .projects-input:hover {
        border-color: #fdcb6e;
        transform: translateY(-1px);
    }

.projects-button {
    background: linear-gradient(135deg, #fd79a8 0%, #fdcb6e 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    margin: 8px 6px;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(253, 121, 168, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

    .projects-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
        transition: left 0.6s ease;
    }

    .projects-button:hover::before {
        left: 100%;
    }

    .projects-button:hover {
        background: linear-gradient(135deg, #e84393 0%, #f39c12 100%);
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(253, 121, 168, 0.4);
    }

    .projects-button:active {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(253, 121, 168, 0.3);
    }

.projects-result-box {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 234, 167, 0.95) 100%);
    border: 3px solid rgba(253, 121, 168, 0.3);
    border-radius: 15px;
    padding: 30px 20px 20px 20px;
    margin: 30px 0;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    white-space: pre-wrap;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    position: relative;
    backdrop-filter: blur(10px);
    z-index: auto;
}

    .projects-result-box::before {
        content: '🔮 Transformation Results';
        position: absolute;
        top: -18px;
        left: 15px;
        background: linear-gradient(135deg, #55efc4 0%, #00b894 100%);
        color: white;
        padding: 6px 12px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: bold;
        font-family: Arial, sans-serif;
        box-shadow: 0 4px 15px rgba(85, 239, 196, 0.4);
        white-space: nowrap;
        z-index: 100;
        border: 1px solid rgba(255, 255, 255, 0.3);
        isolation: isolate;
    }

.projects-theoretical-note {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.6;
}

/* ===== FRACTAL PITCH SYSTEM STYLES ===== */

/* System Status Display */
.fractal-system-status {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 2px solid #667eea;
    border-radius: 12px;
    padding: 20px;
    margin: 15px 0;
    color: white;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
    backdrop-filter: blur(10px);
}

.fractal-status-inactive {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #ff6b6b;
    font-size: 16px;
}

    .fractal-status-inactive::before {
        content: '⚠️ ';
        margin-right: 8px;
        animation: pulse 2s infinite;
    }

.fractal-status-active {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #4ecdc4;
    font-size: 16px;
}

    .fractal-status-active::before {
        content: '✨ ';
        margin-right: 8px;
        animation: fractalPulse 2s infinite;
    }

.fractal-metrics {
    margin-top: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    font-size: 13px;
    font-family: 'Courier New', monospace;
}

    .fractal-metrics > div {
        background: rgba(255, 255, 255, 0.1);
        padding: 10px 12px;
        border-radius: 8px;
        border-left: 4px solid #667eea;
        transition: all 0.3s ease;
        position: relative;
    }

        .fractal-metrics > div:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: translateX(5px);
        }

        .fractal-metrics > div span {
            font-weight: bold;
            color: #4ecdc4;
            font-size: 14px;
        }

/* Enhanced P-Center Controls */
.fractal-pcenter-control {
    background: linear-gradient(135deg, #FF6B35, #F7931E);
    border: 3px solid rgba(255, 107, 53, 0.6);
    border-radius: 15px;
    padding: 20px;
    margin: 20px 0;
    color: white;
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
    position: relative;
    overflow: hidden;
}

    .fractal-pcenter-control::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #FFD700, #FF6B35, #F7931E);
        animation: rainbowGlow 3s infinite;
    }

    .fractal-pcenter-control label {
        display: block;
        margin-bottom: 12px;
        font-weight: bold;
        font-size: 15px;
        color: white;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }

.fractal-pcenter-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.fractal-pcenter-slider {
    flex: 1;
    height: 10px !important;
    background: linear-gradient(90deg, #FFD700, #FF6B35, #F7931E) !important;
    border-radius: 5px !important;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

    .fractal-pcenter-slider::-webkit-slider-thumb {
        appearance: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: white;
        cursor: pointer;
        border: 3px solid #FF6B35;
        box-shadow: 0 3px 8px rgba(0,0,0,0.4);
        transition: all 0.2s ease;
    }

        .fractal-pcenter-slider::-webkit-slider-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(255, 107, 53, 0.6);
        }

    .fractal-pcenter-slider::-moz-range-thumb {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: white;
        cursor: pointer;
        border: 3px solid #FF6B35;
        box-shadow: 0 3px 8px rgba(0,0,0,0.4);
        transition: all 0.2s ease;
    }

.fractal-pcenter-display {
    min-width: 90px;
    font-weight: bold;
    font-size: 18px;
    color: white;
    text-align: center;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    backdrop-filter: blur(5px);
    animation: syncPulse 3s infinite;
}

.fractal-pcenter-note {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    text-align: center;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 12px;
    border-radius: 20px;
    backdrop-filter: blur(5px);
}

/* MIDI Test Button */
.midi-test-button {
    display: block;
    width: 100%;
    margin-top: 15px !important;
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    font-weight: bold;
    animation: extremePulse 2s infinite;
}

/* Enhanced Button Styling for Fractal System */
.projects-button[onclick*="fractal"] {
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    text-transform: none;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

/* Specific Fractal Button Variations */
.projects-button[onclick*="activateFractalPitchSystem"] {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    animation: fractalPulse 3s infinite;
    font-weight: bold;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.projects-button[onclick*="deactivateFractalPitchSystem"] {
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    color: white;
}

.projects-button[onclick*="toggleFractalExtremeMode"] {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24) !important;
    animation: extremePulse 2s infinite;
    font-weight: bold;
}

.projects-button[onclick*="showFractalVisualization"] {
    background: linear-gradient(135deg, #3498db, #2980b9) !important;
    color: white;
}

.projects-button[onclick*="testDirectMIDI"] {
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    animation: extremePulse 1.5s infinite;
}

/* Fugue Composer Buttons */
.projects-button[onclick*="generateFractalFugue"] {
    background: linear-gradient(135deg, #8e24aa, #5e35b1) !important;
    font-weight: bold;
    box-shadow: 0 6px 20px rgba(142, 36, 170, 0.4);
}

.projects-button[onclick*="playFugueWithFractalSystem"] {
    background: linear-gradient(135deg, #4caf50, #388e3c) !important;
    animation: hauntingPulse 4s infinite;
}

.projects-button[onclick*="configureFugueAudioSettings"] {
    background: linear-gradient(135deg, #607d8b, #455a64) !important;
}

/* Export Grid Styling */
.export-buttons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.export-button-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.95));
    border: 2px solid rgba(253, 121, 168, 0.3);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

    .export-button-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 35px rgba(253, 121, 168, 0.2);
        border-color: rgba(253, 121, 168, 0.5);
    }

.export-button-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.export-icon {
    font-size: 24px;
}

.export-description {
    color: #666;
    font-size: 13px;
    margin-bottom: 15px;
    line-height: 1.4;
}

/* Advanced Tools Grid */
.advanced-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.tool-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.95));
    border: 2px solid rgba(102, 126, 234, 0.3);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

    .tool-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 35px rgba(102, 126, 234, 0.2);
        border-color: rgba(102, 126, 234, 0.5);
    }

    .tool-card h3 {
        color: #2c3e50;
        margin-bottom: 15px;
        font-size: 1.2rem;
        font-weight: 600;
    }

/* Pi Prediction Display */
.pi-prediction-display {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border: 2px solid rgba(253, 121, 168, 0.3);
    border-radius: 10px;
    padding: 20px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative;
}

    .pi-prediction-display::before {
        content: '🔢 π Predictions';
        position: absolute;
        top: -12px;
        left: 20px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        padding: 4px 12px;
        border-radius: 8px;
        font-size: 11px;
        font-weight: bold;
        font-family: Arial, sans-serif;
    }

/* ===== FRACTAL VISUALIZATION MODAL STYLES ===== */

.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: none;
    animation: fadeIn 0.3s ease-out;
}

.modal-dialog {
    margin: 1% auto;
    width: 95%;
    max-width: 1600px;
    height: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 3px solid #FF6B35;
    border-radius: 20px;
    height: 100%;
    box-shadow: 0 20px 60px rgba(255, 107, 53, 0.4);
    display: flex;
    flex-direction: column;
    color: white;
    overflow: hidden;
    animation: slideInScale 0.4s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInScale {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 20px 25px;
    border-radius: 17px 17px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #FF6B35;
    flex-shrink: 0;
}

.modal-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.modal-body {
    flex: 1;
    padding: 25px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Enhanced Fractal Controls */
.fractal-enhanced-controls {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.8), rgba(22, 33, 62, 0.8));
    border: 2px solid rgba(255, 107, 53, 0.6);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    color: white;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.fractal-control-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 25px;
    align-items: center;
}

.fractal-pcenter-modal-control {
    background: linear-gradient(135deg, #FF6B35, #F7931E);
    padding: 18px;
    border-radius: 12px;
    text-align: left;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

    .fractal-pcenter-modal-control label {
        display: block;
        margin-bottom: 10px;
        font-weight: bold;
        font-size: 14px;
        color: white;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }

.fractal-pcenter-modal-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.fractal-pcenter-modal-slider {
    flex: 1;
    height: 8px;
    background: linear-gradient(90deg, rgba(255,255,255,0.4), rgba(255,255,255,0.7));
    border-radius: 4px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

    .fractal-pcenter-modal-slider::-webkit-slider-thumb {
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: white;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0,0,0,0.4);
        transition: all 0.2s ease;
    }

        .fractal-pcenter-modal-slider::-webkit-slider-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 3px 8px rgba(0,0,0,0.5);
        }

.fractal-pcenter-modal-display {
    min-width: 60px;
    font-weight: bold;
    font-size: 16px;
    color: white;
    text-align: center;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
}

.fractal-sync-status {
    text-align: center;
    margin-top: 8px;
}

.sync-indicator {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.2);
    padding: 3px 8px;
    border-radius: 12px;
    animation: syncPulse 2s infinite;
    backdrop-filter: blur(5px);
}

/* Animation Control */
.fractal-animation-control {
    text-align: center;
    background: linear-gradient(135deg, rgba(76, 205, 196, 0.2), rgba(68, 189, 135, 0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgba(76, 205, 196, 0.4);
}

    .fractal-animation-control label {
        display: block;
        margin-bottom: 10px;
        font-weight: bold;
        font-size: 13px;
        color: #4ecdc4;
    }

.fractal-speed-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}

.fractal-speed-slider {
    width: 120px;
    height: 6px;
    background: linear-gradient(90deg, #4ecdc4, #44bd87);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

    .fractal-speed-slider::-webkit-slider-thumb {
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: white;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

.fractal-speed-display {
    min-width: 45px;
    font-weight: bold;
    font-size: 14px;
    color: #44bd87;
    text-align: center;
}

/* Canvas Container - Maximized */
.fractal-canvas-container {
    flex: 1;
    padding: 0;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: transparent;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(255, 107, 53, 0.3);
}

#fractalPitchCanvas {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: block;
    background: linear-gradient(135deg, #0f0f23, #1a1a2e);
    cursor: crosshair;
    border-radius: 10px;
}

/* Fractal Controls at Bottom */
.fractal-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.9));
    border-radius: 0 0 10px 10px;
    margin: 0;
    border-top: 1px solid rgba(102, 126, 234, 0.3);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.fractal-info {
    display: flex;
    gap: 25px;
    align-items: center;
}

.fractal-info-item {
    font-size: 14px;
    font-weight: 500;
    color: #4ecdc4;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .fractal-info-item span {
        font-weight: bold;
        color: white;
        background: rgba(76, 205, 196, 0.2);
        padding: 2px 8px;
        border-radius: 10px;
        font-family: 'Courier New', monospace;
    }

.fractal-controls > div:last-child {
    display: flex;
    gap: 12px;
}

.fractal-controls button {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

    .fractal-controls button:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        background: linear-gradient(135deg, #5a67d8, #6b46c1);
    }

    .fractal-controls button:active {
        transform: translateY(0);
    }

    /* Special Button States */
    .fractal-controls button[onclick*="playFractalPitchSet"] {
        background: linear-gradient(135deg, #27ae60, #2ecc71);
    }

        .fractal-controls button[onclick*="playFractalPitchSet"]:hover {
            background: linear-gradient(135deg, #229954, #28b463);
        }

    .fractal-controls button[onclick*="toggleFractalDrone"] {
        background: linear-gradient(135deg, #f39c12, #e67e22);
    }

        .fractal-controls button[onclick*="toggleFractalDrone"]:hover {
            background: linear-gradient(135deg, #e67e22, #d35400);
        }

    .fractal-controls button[onclick*="toggleFractalExtremeMode"] {
        background: linear-gradient(135deg, #e74c3c, #c0392b);
        animation: extremePulse 2s infinite;
    }

/* Close Button Enhancement */
.btn-close {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

    .btn-close:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

    .btn-close:active {
        transform: scale(0.95);
    }

/* Fugue Visualization */
.fugue-visualization-container {
    margin-top: 20px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border: 2px solid rgba(142, 36, 170, 0.3);
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

#fugueStructureCanvas {
    width: 100%;
    height: 200px;
    border: 2px solid rgba(142, 36, 170, 0.3);
    border-radius: 10px;
    background: white;
    display: block;
}

#fugueGenerationStatus {
    margin-top: 10px;
    font-style: italic;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-left: 3px solid #667eea;
}

/* Integration Display */
.projects-integration-display {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border: 2px solid rgba(102, 126, 234, 0.3);
    border-radius: 15px;
    padding: 25px;
    margin: 20px 0;
}

.integration-summary h3 {
    color: #667eea;
    margin-bottom: 15px;
    font-size: 1.4rem;
    font-weight: 600;
}

.integration-summary p {
    color: #666;
    font-style: italic;
    margin: 0;
}

/* Modal Responsiveness */
@media (max-width: 768px) {
    .modal-dialog {
        width: 98%;
        height: 98%;
        margin: 1% auto;
    }

    .fractal-control-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .fractal-info {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .fractal-controls {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

        .fractal-controls > div:last-child {
            justify-content: center;
        }

    .projects-controls-grid {
        grid-template-columns: 1fr;
    }
}

/* High Contrast Support */
@media (prefers-contrast: high) {
    .fractal-pcenter-control,
    .fractal-system-status {
        border-width: 3px;
    }

    .fractal-info-item {
        font-weight: bold;
    }

    #fractalPitchCanvas {
        border: 3px solid white;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print Styles */
@media print {
    .projects-button,
    .fractal-controls,
    .modal {
        display: none !important;
    }

    .projects-tool-section {
        break-inside: avoid;
        margin-bottom: 20px;
    }
}

/* Focus Styles for Accessibility */
.projects-button:focus,
.fractal-pcenter-slider:focus,
.fractal-speed-slider:focus {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

/* Error States */
.fractal-error {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    padding: 15px;
    border-radius: 8px;
    margin: 10px 0;
    font-weight: 500;
}

.fractal-warning {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    padding: 15px;
    border-radius: 8px;
    margin: 10px 0;
    font-weight: 500;
}

.fractal-success {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    padding: 15px;
    border-radius: 8px;
    margin: 10px 0;
    font-weight: 500;
}

/* Loading States */
.fractal-loading {
    position: relative;
    overflow: hidden;
}

    .fractal-loading::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        animation: loading 2s infinite;
    }

/* Tooltip Styles */
.fractal-tooltip {
    position: relative;
}

    .fractal-tooltip::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.8);
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 1000;
    }

    .fractal-tooltip:hover::after {
        opacity: 1;
    }

/* Enhanced Status Indicators */
.haunting-mode-indicator {
    color: #4ECDC4;
    font-weight: bold;
    animation: hauntingPulse 3s ease-in-out infinite;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .haunting-mode-indicator::before {
        content: '🌟';
        animation: rotationIndicator 4s linear infinite;
    }

.rotation-indicator {
    color: #FFD700;
    font-weight: bold;
    animation: rotationIndicator 2s linear infinite;
}

/* Triangulation Info Panel */
.triangulation-info {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #4ECDC4;
    border-radius: 10px;
    padding: 15px;
    color: white;
    font-size: 12px;
    min-width: 220px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

    .triangulation-info h4 {
        margin: 0 0 10px 0;
        color: #4ECDC4;
        font-size: 14px;
    }

/* ===== MUSICAL TRIANGULATION SYSTEM STYLES ===== */

.musical-triangulation-container {
    position: relative;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.9));
    border-radius: 15px;
    padding: 20px;
    margin: 15px 0;
    border: 2px solid rgba(76, 205, 196, 0.4);
    backdrop-filter: blur(10px);
}

.triangulation-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.triangulation-parameter {
    background: rgba(255, 255, 255, 0.1);
    padding: 12px;
    border-radius: 8px;
    border-left: 3px solid #4ECDC4;
}

    .triangulation-parameter label {
        display: block;
        font-weight: bold;
        font-size: 12px;
        color: #4ECDC4;
        margin-bottom: 5px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.triangulation-slider {
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #4ECDC4, #44bd87);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

    .triangulation-slider::-webkit-slider-thumb {
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: white;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        border: 2px solid #4ECDC4;
        transition: all 0.2s ease;
    }

        .triangulation-slider::-webkit-slider-thumb:hover {
            transform: scale(1.15);
            box-shadow: 0 3px 8px rgba(76, 205, 196, 0.5);
        }

.triangulation-value {
    font-size: 11px;
    color: white;
    text-align: center;
    margin-top: 3px;
    font-family: 'Courier New', monospace;
}

/* ===== ENHANCED AUDIO SYSTEM STYLES ===== */

.haunting-audio-panel {
    background: linear-gradient(135deg, #4ECDC4, #44bd87);
    border-radius: 12px;
    padding: 20px;
    margin: 15px 0;
    color: white;
    box-shadow: 0 8px 25px rgba(76, 205, 196, 0.3);
    position: relative;
    overflow: hidden;
}

    .haunting-audio-panel::before {
        content: '🌟';
        position: absolute;
        top: -5px;
        right: -5px;
        font-size: 24px;
        animation: hauntingPulse 3s infinite;
    }

    .haunting-audio-panel h3 {
        margin: 0 0 15px 0;
        font-size: 1.3rem;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        display: flex;
        align-items: center;
        gap: 10px;
    }

.haunting-controls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.haunting-control-item {
    background: rgba(255, 255, 255, 0.2);
    padding: 12px;
    border-radius: 8px;
    backdrop-filter: blur(5px);
}

    .haunting-control-item label {
        display: block;
        font-weight: bold;
        font-size: 12px;
        margin-bottom: 8px;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }

.haunting-slider {
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, rgba(255,255,255,0.4), rgba(255,255,255,0.7));
    border-radius: 4px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

    .haunting-slider::-webkit-slider-thumb {
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: white;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0,0,0,0.4);
        transition: all 0.2s ease;
    }

        .haunting-slider::-webkit-slider-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 3px 8px rgba(0,0,0,0.5);
        }

.haunting-value-display {
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    margin-top: 5px;
    background: rgba(255, 255, 255, 0.3);
    padding: 3px 8px;
    border-radius: 4px;
    backdrop-filter: blur(3px);
}

/* ===== MIDI INTEGRATION STYLES ===== */

.midi-integration-panel {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 12px;
    padding: 20px;
    margin: 15px 0;
    color: white;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

    .midi-integration-panel h4 {
        margin: 0 0 15px 0;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

.midi-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
}

.midi-status-active {
    background: rgba(76, 175, 80, 0.3);
    color: #4CAF50;
    animation: syncPulse 2s infinite;
}

.midi-status-inactive {
    background: rgba(244, 67, 54, 0.3);
    color: #f44336;
}

.midi-controls-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 15px;
}

.midi-toggle-button {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 3px 8px rgba(40, 167, 69, 0.3);
}

    .midi-toggle-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 12px rgba(40, 167, 69, 0.4);
    }

    .midi-toggle-button.inactive {
        background: linear-gradient(135deg, #6c757d, #5a6268);
        box-shadow: 0 3px 8px rgba(108, 117, 125, 0.3);
    }

/* ===== FUGUE AUDIO SETTINGS MODAL ===== */

.fugue-audio-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
}

    .fugue-audio-modal .modal-content {
        background: linear-gradient(135deg, #1a1a2e, #16213e);
        color: white;
        padding: 30px;
        border-radius: 15px;
        max-width: 600px;
        width: 90%;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        border: 2px solid #667eea;
        animation: slideInScale 0.4s ease-out;
    }

.fugue-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 2px solid rgba(102, 126, 234, 0.3);
    padding-bottom: 15px;
}

    .fugue-settings-header h3 {
        margin: 0;
        color: #4ecdc4;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.fugue-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.2s ease;
    backdrop-filter: blur(5px);
}

    .fugue-close-btn:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
    }

.fugue-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 20px;
}

.fugue-setting-group {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .fugue-setting-group h4 {
        margin: 0 0 15px 0;
        font-size: 1.1rem;
        color: #FF6B35;
        display: flex;
        align-items: center;
        gap: 8px;
    }

.fugue-slider-container {
    margin-bottom: 15px;
}

    .fugue-slider-container label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
        font-size: 13px;
        color: #e0e0e0;
    }

.fugue-slider {
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    margin-bottom: 5px;
}

    .fugue-slider::-webkit-slider-thumb {
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: white;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        border: 2px solid #667eea;
        transition: all 0.2s ease;
    }

        .fugue-slider::-webkit-slider-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 3px 8px rgba(102, 126, 234, 0.5);
        }

.fugue-value-display {
    font-size: 12px;
    color: #4ecdc4;
    font-weight: bold;
    text-align: center;
    background: rgba(76, 205, 196, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
}

.fugue-checkbox-container {
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 8px;
}

    .fugue-checkbox-container h4 {
        margin: 0 0 15px 0;
        color: #FFD700;
        font-size: 1.1rem;
    }

.fugue-checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.fugue-checkbox-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

    .fugue-checkbox-item:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .fugue-checkbox-item input[type="checkbox"] {
        margin-right: 8px;
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

    .fugue-checkbox-item span {
        font-weight: 500;
        font-size: 13px;
    }

.fugue-presets-container {
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

    .fugue-presets-container h4 {
        margin: 0 0 10px 0;
        color: #FF6B35;
        font-size: 1rem;
    }

.fugue-presets-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.fugue-preset-btn {
    background: linear-gradient(135deg, #4ECDC4, #44bd87);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 3px 8px rgba(76, 205, 196, 0.3);
}

    .fugue-preset-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 12px rgba(76, 205, 196, 0.4);
    }

    .fugue-preset-btn.haunting {
        background: linear-gradient(135deg, #4ECDC4, #44bd87);
    }

    .fugue-preset-btn.ethereal {
        background: linear-gradient(135deg, #667eea, #764ba2);
    }

    .fugue-preset-btn.fast {
        background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    }

    .fugue-preset-btn.meditative {
        background: linear-gradient(135deg, #48dbfb, #0abde3);
    }

.fugue-button-container {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.fugue-action-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    transition: all 0.3s ease;
    min-width: 100px;
}

    .fugue-action-btn.reset {
        background: linear-gradient(135deg, #6c757d, #5a6268);
        color: white;
    }

    .fugue-action-btn.test {
        background: linear-gradient(135deg, #28a745, #20c997);
        color: white;
    }

    .fugue-action-btn.done {
        background: linear-gradient(135deg, #4caf50, #45a049);
        color: white;
    }

    .fugue-action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

/* ===== ENHANCED P-CENTER ROTATION INDICATORS ===== */

.rotation-status-panel {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #FFD700;
    border-radius: 10px;
    padding: 15px;
    color: white;
    font-size: 12px;
    min-width: 180px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

    .rotation-status-panel h4 {
        margin: 0 0 10px 0;
        color: #FFD700;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 5px;
    }

.rotation-angle-display {
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: bold;
    color: #FF6B35;
    text-align: center;
    background: rgba(255, 107, 53, 0.1);
    padding: 8px;
    border-radius: 6px;
    margin: 8px 0;
}

.rotation-indicator {
    width: 40px;
    height: 40px;
    border: 3px solid #FFD700;
    border-radius: 50%;
    position: relative;
    margin: 10px auto;
}

.rotation-pointer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 18px;
    background: #FF6B35;
    transform-origin: bottom center;
    transform: translate(-50%, -100%);
    border-radius: 2px;
    transition: transform 0.3s ease;
}

.rotation-speed-indicator {
    font-size: 11px;
    text-align: center;
    color: #4ECDC4;
    margin-top: 5px;
}

/* ===== ENHANCED NOTIFICATION SYSTEM ===== */

.fractal-notification {
    position: fixed;
    top: 60px;
    right: 20px;
    z-index: 10000;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    max-width: 400px;
    animation: slideInRight 0.3s ease-out;
}

    .fractal-notification.success {
        background: linear-gradient(135deg, #4CAF50, #45a049);
    }

    .fractal-notification.error {
        background: linear-gradient(135deg, #f44336, #d32f2f);
    }

    .fractal-notification.warning {
        background: linear-gradient(135deg, #FF9800, #F57C00);
    }

    .fractal-notification.info {
        background: linear-gradient(135deg, #2196F3, #1976D2);
    }

.notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.notification-icon {
    font-size: 18px;
    margin-right: 8px;
}

.notification-close {
    background: rgba(255,255,255,0.3);
    border: none;
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.notification-details {
    font-size: 12px;
    font-weight: normal;
    opacity: 0.9;
    line-height: 1.4;
}

/* ===== ENHANCED DEBUG AND INFO PANELS ===== */

.debug-panel {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #4ECDC4;
    border-radius: 8px;
    padding: 15px;
    color: white;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    max-width: 300px;
    max-height: 200px;
    overflow-y: auto;
    backdrop-filter: blur(10px);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

    .debug-panel:hover {
        opacity: 1;
    }

    .debug-panel h5 {
        margin: 0 0 10px 0;
        color: #4ECDC4;
        font-size: 12px;
        font-weight: bold;
    }

.debug-metric {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
}

.debug-metric-name {
    color: #e0e0e0;
}

.debug-metric-value {
    color: #FFD700;
    font-weight: bold;
}

/* ===== ENHANCED KEYBOARD SHORTCUT DISPLAY ===== */

.shortcuts-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid #667eea;
    border-radius: 15px;
    padding: 30px;
    color: white;
    z-index: 15000;
    max-width: 500px;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

    .shortcuts-overlay h3 {
        margin: 0 0 20px 0;
        color: #4ECDC4;
        text-align: center;
        font-size: 1.5rem;
    }

.shortcuts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.shortcut-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.shortcut-key {
    background: #667eea;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
}

.shortcut-action {
    font-size: 12px;
    color: #e0e0e0;
}

/* ===== RESPONSIVE ENHANCEMENTS ===== */

@media (max-width: 768px) {
    .fugue-settings-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .fugue-checkbox-grid {
        grid-template-columns: 1fr;
    }

    .fugue-presets-grid {
        justify-content: center;
    }

    .haunting-controls-grid {
        grid-template-columns: 1fr;
    }

    .triangulation-controls {
        grid-template-columns: 1fr;
    }

    .midi-controls-row {
        flex-direction: column;
        align-items: stretch;
    }

    .rotation-status-panel {
        position: relative;
        margin: 15px auto;
        max-width: 280px;
    }

    .shortcuts-grid {
        grid-template-columns: 1fr;
    }

    .fractal-notification {
        left: 10px;
        right: 10px;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .fugue-audio-modal .modal-content {
        padding: 20px;
        margin: 10px;
    }

    .fugue-settings-header h3 {
        font-size: 1.2rem;
    }

    .fugue-button-container {
        flex-direction: column;
    }

    .fugue-action-btn {
        width: 100%;
    }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

@media (prefers-reduced-motion: reduce) {
    .haunting-audio-panel::before,
    .rotation-pointer,
    .fractal-notification {
        animation: none !important;
    }

    .fugue-preset-btn:hover,
    .fugue-action-btn:hover,
    .midi-toggle-button:hover {
        transform: none !important;
    }
}

@media (prefers-contrast: high) {
    .fugue-audio-modal .modal-content,
    .haunting-audio-panel,
    .midi-integration-panel {
        border-width: 3px;
        box-shadow: none;
    }

    .fugue-slider::-webkit-slider-thumb,
    .haunting-slider::-webkit-slider-thumb,
    .triangulation-slider::-webkit-slider-thumb {
        border-width: 3px;
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    .fugue-audio-modal,
    .fractal-notification,
    .debug-panel,
    .shortcuts-overlay,
    .rotation-status-panel {
        display: none !important;
    }

    .haunting-audio-panel,
    .midi-integration-panel,
    .musical-triangulation-container {
        break-inside: avoid;
        background: white !important;
        color: black !important;
        border: 2px solid black !important;
    }
}

/* ===== FINAL PERFORMANCE OPTIMIZATIONS ===== */

.fractal-system-container * {
    will-change: auto;
}

    .fractal-system-container *:hover {
        will-change: transform;
    }

/* Enable hardware acceleration for key elements */
.fugue-preset-btn,
.fugue-action-btn,
.midi-toggle-button,
.rotation-pointer,
.fractal-notification {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimize animations for 60fps */
@keyframes optimizedSlideIn {
    from {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.fractal-notification {
    animation: optimizedSlideIn 0.3s ease-out;
}

/* ===== FINAL TOUCH: ENHANCED FOCUS STYLES FOR ACCESSIBILITY ===== */

.fugue-slider:focus,
.haunting-slider:focus,
.triangulation-slider:focus {
    outline: 3px solid #FFD700;
    outline-offset: 2px;
}

.fugue-preset-btn:focus,
.fugue-action-btn:focus,
.midi-toggle-button:focus,
.fugue-close-btn:focus {
    outline: 2px solid #4ECDC4;
    outline-offset: 2px;
}

.fugue-checkbox-item:focus-within {
    background: rgba(255, 255, 255, 0.2);
    outline: 2px solid #FFD700;
    border-radius: 6px;
}

/* Ensure all interactive elements have visible focus states */
button:focus,
input:focus,
select:focus {
    outline: 2px solid #4ECDC4;
    outline-offset: 2px;
}

/* ===== END OF FINAL CSS PART ===== */

/* ===== FIXED CUSTOM SCROLLBAR FOR MODAL CONTENT ===== */

.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transition: background 0.2s ease;
}

    .modal-body::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.5);
    }

/* ===== ENHANCED SCROLLBAR STYLES FOR ALL MODALS ===== */

/* Apply to all modal scrollbars */
.modal::-webkit-scrollbar,
.fugue-audio-modal::-webkit-scrollbar,
.projects-result-box::-webkit-scrollbar {
    width: 8px;
}

.modal::-webkit-scrollbar-track,
.fugue-audio-modal::-webkit-scrollbar-track,
.projects-result-box::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.modal::-webkit-scrollbar-thumb,
.fugue-audio-modal::-webkit-scrollbar-thumb,
.projects-result-box::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transition: background 0.2s ease;
}

    .modal::-webkit-scrollbar-thumb:hover,
    .fugue-audio-modal::-webkit-scrollbar-thumb:hover,
    .projects-result-box::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.5);
    }

/* Dark theme scrollbars for specific containers */
.projects-tool-section::-webkit-scrollbar {
    width: 6px;
}

.projects-tool-section::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.projects-tool-section::-webkit-scrollbar-thumb {
    background: rgba(253, 121, 168, 0.4);
    border-radius: 3px;
    transition: background 0.2s ease;
}

    .projects-tool-section::-webkit-scrollbar-thumb:hover {
        background: rgba(253, 121, 168, 0.6);
    }

/* Fractal system specific scrollbars */
.fractal-system-container::-webkit-scrollbar {
    width: 10px;
}

.fractal-system-container::-webkit-scrollbar-track {
    background: rgba(102, 126, 234, 0.1);
    border-radius: 5px;
}

.fractal-system-container::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.4);
    border-radius: 5px;
    transition: background 0.2s ease;
}

    .fractal-system-container::-webkit-scrollbar-thumb:hover {
        background: rgba(102, 126, 234, 0.6);
    }

/* Triangulation info scrollbars */
.triangulation-info::-webkit-scrollbar {
    width: 4px;
}

.triangulation-info::-webkit-scrollbar-track {
    background: rgba(76, 205, 196, 0.1);
    border-radius: 2px;
}

.triangulation-info::-webkit-scrollbar-thumb {
    background: rgba(76, 205, 196, 0.4);
    border-radius: 2px;
    transition: background 0.2s ease;
}

    .triangulation-info::-webkit-scrollbar-thumb:hover {
        background: rgba(76, 205, 196, 0.6);
    }

/* Firefox scrollbar support */
.modal-body,
.modal,
.fugue-audio-modal,
.projects-result-box,
.projects-tool-section,
.fractal-system-container,
.triangulation-info {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
}

/* Mobile scrollbar adjustments */
@media (max-width: 768px) {
    .modal-body::-webkit-scrollbar,
    .modal::-webkit-scrollbar,
    .fugue-audio-modal::-webkit-scrollbar {
        width: 4px;
    }

    .projects-tool-section::-webkit-scrollbar {
        width: 3px;
    }

    .fractal-system-container::-webkit-scrollbar {
        width: 6px;
    }
}

/* ===== MODERN CSS ENHANCEMENTS TO APPEND ===== */

/* CSS Custom Properties (Variables) for Better Maintainability */
:root {
    /* Color Palette */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    --accent-gradient: linear-gradient(135deg, #fd79a8 0%, #fdcb6e 100%);
    --success-gradient: linear-gradient(135deg, #4ecdc4 0%, #44bd87 100%);
    --warning-gradient: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    --error-gradient: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    /* Text Colors */
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --text-light: #ecf0f1;
    --text-accent: #fd79a8;
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 25px;
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 15px rgba(0,0,0,0.15);
    --shadow-lg: 0 8px 25px rgba(0,0,0,0.2);
    --shadow-xl: 0 15px 40px rgba(0,0,0,0.25);
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    /* Z-indexes */
    --z-dropdown: 1000;
    --z-modal: 9999;
    --z-notification: 10000;
    --z-debug: 15000;
}

/* ===== IMPROVED ACCESSIBILITY ===== */

/* Focus management for better keyboard navigation */
.focus-trap {
    outline: 3px solid var(--accent-gradient);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Skip to content link for screen readers */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--text-primary);
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: var(--radius-sm);
    z-index: var(--z-notification);
    transition: top var(--transition-fast);
}

    .skip-to-content:focus {
        top: 6px;
    }

/* Improved focus states for all interactive elements */
*:focus-visible {
    outline: 3px solid #4ecdc4;
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ===== MODERN CONTAINER QUERIES SUPPORT ===== */

@container (max-width: 768px) {
    .projects-controls-grid {
        grid-template-columns: 1fr;
    }

    .fractal-controls {
        flex-direction: column;
        gap: var(--spacing-md);
    }
}

/* ===== IMPROVED GRID LAYOUTS ===== */

.modern-grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.modern-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

/* ===== ENHANCED BUTTON SYSTEM ===== */

.btn-modern {
    position: relative;
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all var(--transition-normal);
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
}

    .btn-modern::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
        transition: left 0.6s ease;
    }

    .btn-modern:hover::before {
        left: 100%;
    }

    .btn-modern:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
    }

    .btn-modern:active {
        transform: translateY(-1px);
    }

.btn-modern--primary {
    background: var(--accent-gradient);
    color: white;
}

.btn-modern--success {
    background: var(--success-gradient);
    color: white;
}

.btn-modern--warning {
    background: var(--warning-gradient);
    color: white;
}

.btn-modern--error {
    background: var(--error-gradient);
    color: white;
}

/* ===== IMPROVED FORM CONTROLS ===== */

.form-control-modern {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba(253, 121, 168, 0.3);
    border-radius: var(--radius-md);
    font-size: 14px;
    transition: all var(--transition-normal);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    box-shadow: var(--shadow-sm);
}

    .form-control-modern:focus {
        outline: none;
        border-color: #fd79a8;
        box-shadow: 0 0 0 4px rgba(253, 121, 168, 0.2);
        background: #ffffff;
        transform: translateY(-2px);
    }

    .form-control-modern:hover {
        border-color: #fdcb6e;
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

/* Enhanced slider components */
.slider-modern {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: var(--radius-sm);
    background: var(--accent-gradient);
    outline: none;
    cursor: pointer;
    transition: all var(--transition-normal);
}

    .slider-modern::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: white;
        cursor: pointer;
        border: 3px solid #fd79a8;
        box-shadow: var(--shadow-md);
        transition: all var(--transition-normal);
    }

        .slider-modern::-webkit-slider-thumb:hover {
            transform: scale(1.15);
            box-shadow: var(--shadow-lg);
        }

    .slider-modern::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: white;
        cursor: pointer;
        border: 3px solid #fd79a8;
        box-shadow: var(--shadow-md);
        transition: all var(--transition-normal);
    }

/* ===== ENHANCED MODAL SYSTEM ===== */

.modal-modern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

    .modal-modern.show {
        opacity: 1;
        visibility: visible;
    }

.modal-modern__content {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 3px solid #ff6b35;
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    color: white;
    box-shadow: var(--shadow-xl);
    transform: scale(0.9) translateY(-20px);
    transition: all var(--transition-normal);
}

.modal-modern.show .modal-modern__content {
    transform: scale(1) translateY(0);
}

/* ===== IMPROVED NOTIFICATION SYSTEM ===== */

.notification-modern {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: var(--z-notification);
    background: var(--primary-gradient);
    color: white;
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-width: 400px;
    transform: translateX(100%);
    transition: transform var(--transition-normal);
    backdrop-filter: blur(10px);
}

    .notification-modern.show {
        transform: translateX(0);
    }

.notification-modern--success {
    background: var(--success-gradient);
}

.notification-modern--error {
    background: var(--error-gradient);
}

.notification-modern--warning {
    background: var(--warning-gradient);
}

/* ===== ENHANCED LOADING STATES ===== */

.loading-modern {
    position: relative;
    overflow: hidden;
}

    .loading-modern::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        animation: loading-sweep 2s infinite;
    }

@keyframes loading-sweep {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.spinner-modern {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255,255,255,0.3);
    border-top: 4px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ===== IMPROVED RESPONSIVE DESIGN ===== */

/* Mobile-first approach with better breakpoints */
@media (min-width: 480px) {
    .projects-controls-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (min-width: 768px) {
    .projects-controls-grid {
        grid-template-columns: 1fr 1fr;
    }

    .fractal-controls {
        flex-direction: row;
        justify-content: space-between;
    }
}

@media (min-width: 1024px) {
    .projects-controls-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1440px) {
    .projects-controls-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== DARK MODE SUPPORT ===== */

@media (prefers-color-scheme: dark) {
    :root {
        --text-primary: #ecf0f1;
        --text-secondary: #bdc3c7;
    }

    .form-control-modern {
        background: rgba(0, 0, 0, 0.6);
        color: white;
        border-color: rgba(255, 255, 255, 0.3);
    }

        .form-control-modern:focus {
            background: rgba(0, 0, 0, 0.8);
            border-color: #4ecdc4;
        }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Will-change for animated elements */
.projects-button,
.btn-modern,
.slider-modern::-webkit-slider-thumb,
.modal-modern__content,
.notification-modern {
    will-change: transform;
}

/* Hardware acceleration */
.modal-modern,
.notification-modern,
.spinner-modern {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ===== UTILITY CLASSES ===== */

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-flex {
    display: flex;
}

.d-grid {
    display: grid;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.align-center {
    align-items: center;
}

.align-start {
    align-items: flex-start;
}

.align-end {
    align-items: flex-end;
}

.gap-xs {
    gap: var(--spacing-xs);
}

.gap-sm {
    gap: var(--spacing-sm);
}

.gap-md {
    gap: var(--spacing-md);
}

.gap-lg {
    gap: var(--spacing-lg);
}

.gap-xl {
    gap: var(--spacing-xl);
}

.p-xs {
    padding: var(--spacing-xs);
}

.p-sm {
    padding: var(--spacing-sm);
}

.p-md {
    padding: var(--spacing-md);
}

.p-lg {
    padding: var(--spacing-lg);
}

.p-xl {
    padding: var(--spacing-xl);
}

.m-xs {
    margin: var(--spacing-xs);
}

.m-sm {
    margin: var(--spacing-sm);
}

.m-md {
    margin: var(--spacing-md);
}

.m-lg {
    margin: var(--spacing-lg);
}

.m-xl {
    margin: var(--spacing-xl);
}

.rounded-sm {
    border-radius: var(--radius-sm);
}

.rounded-md {
    border-radius: var(--radius-md);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-xl {
    border-radius: var(--radius-xl);
}

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-xl {
    box-shadow: var(--shadow-xl);
}

/* ===== ENHANCED PRINT STYLES ===== */

@media print {
    :root {
        color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .no-print {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

    .modal-modern,
    .notification-modern {
        display: none !important;
    }

    .projects-tool-section {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ===== ENHANCED HIGH CONTRAST MODE ===== */

@media (prefers-contrast: high) {
    :root {
        --shadow-sm: 0 2px 8px rgba(0,0,0,0.5);
        --shadow-md: 0 4px 15px rgba(0,0,0,0.6);
        --shadow-lg: 0 8px 25px rgba(0,0,0,0.7);
        --shadow-xl: 0 15px 40px rgba(0,0,0,0.8);
    }

    .btn-modern,
    .form-control-modern,
    .modal-modern__content {
        border-width: 3px;
    }

    .slider-modern::-webkit-slider-thumb {
        border-width: 4px;
    }
}

/* ===== REDUCED MOTION SUPPORT ===== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .spinner-modern {
        animation: none;
        border-top-color: transparent;
    }
}

/* ===== MODERN FOCUS MANAGEMENT ===== */

.focus-visible {
    outline: 3px solid #4ecdc4;
    outline-offset: 2px;
}

/* Only show focus outline when keyboard navigating */
.js-focus-visible .focus-visible:not(.focus-visible) {
    outline: none;
}

/* ===== ENHANCED SCROLLBAR STYLING ===== */

/* Modern scrollbar for webkit browsers */
*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

*::-webkit-scrollbar-thumb {
    background: var(--accent-gradient);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: all var(--transition-normal);
}

    *::-webkit-scrollbar-thumb:hover {
        background: var(--warning-gradient);
        background-clip: content-box;
    }

*::-webkit-scrollbar-corner {
    background: rgba(255, 255, 255, 0.1);
}

/* Firefox scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(253, 121, 168, 0.6) rgba(255, 255, 255, 0.1);
}

/* ===== CSS CUSTOM PROPERTIES FOR DYNAMIC THEMING ===== */

[data-theme="dark"] {
    --text-primary: #ecf0f1;
    --text-secondary: #bdc3c7;
    --text-light: #2c3e50;
}

[data-theme="high-contrast"] {
    --primary-gradient: linear-gradient(135deg, #000000 0%, #ffffff 100%);
    --accent-gradient: linear-gradient(135deg, #ffffff 0%, #000000 100%);
}

/* ===== MODERN CONTAINER LAYOUT ===== */

.container-modern {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    position: relative;
}

@media (min-width: 1400px) {
    .container-modern {
        max-width: 1320px;
    }
}

/* ===== ENHANCED ANIMATION LIBRARY ===== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation utility classes */
.animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out;
}

.animate-fadeInDown {
    animation: fadeInDown 0.6s ease-out;
}

.animate-fadeInLeft {
    animation: fadeInLeft 0.6s ease-out;
}

.animate-fadeInRight {
    animation: fadeInRight 0.6s ease-out;
}

.animate-scaleIn {
    animation: scaleIn 0.4s ease-out;
}

.animate-bounceIn {
    animation: bounceIn 0.8s ease-out;
}

/* Delay classes */
.animate-delay-100 {
    animation-delay: 100ms;
}

.animate-delay-200 {
    animation-delay: 200ms;
}

.animate-delay-300 {
    animation-delay: 300ms;
}

.animate-delay-400 {
    animation-delay: 400ms;
}

.animate-delay-500 {
    animation-delay: 500ms;
}

/* ===== END OF ENHANCEMENTS ===== */

/* ===== MISSING CSS IMPLEMENTATIONS TO APPEND ===== */

/* Visualization Modal Components (referenced in JavaScript) */
#visualizationModal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: none;
    animation: fadeIn 0.3s ease-out;
}

#visualizationContent {
    margin: 2% auto;
    width: 95%;
    max-width: 1400px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border: 3px solid #667eea;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.4);
    color: #2c3e50;
    max-height: 90vh;
    overflow-y: auto;
}

/* Interactive Visualization Container */
.interactive-viz-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
}

@media (max-width: 768px) {
    .interactive-viz-container {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
    }
}

/* Visualization Panels */
.viz-panel {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    background: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

    .viz-panel:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .viz-panel h4 {
        margin: 0 0 15px 0;
        color: #333;
        font-size: 1.1rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
    }

/* Visualization Canvas Elements */
.viz-canvas {
    display: block;
    margin: 10px auto;
    border: 3px solid rgba(253, 121, 168, 0.3);
    border-radius: 15px;
    background: white;
    transition: all 0.3s ease;
}

    .viz-canvas:hover {
        border-color: rgba(253, 121, 168, 0.6);
        box-shadow: 0 4px 15px rgba(253, 121, 168, 0.2);
    }

/* Canvas-specific styling */
#viz3DCanvas,
#vizNetworkCanvas,
#vizTemporalCanvas,
#vizPhiCanvas {
    width: 300px;
    height: 280px;
}

#displacementCanvas {
    width: 100%;
    height: 200px;
    background: white;
    border-radius: 5px;
    border: 2px solid rgba(142, 36, 170, 0.3);
}

#fugueStructureCanvas {
    width: 100%;
    height: 200px;
    border: 2px solid rgba(142, 36, 170, 0.3);
    border-radius: 10px;
    background: white;
    display: block;
}

/* Visualization Controls */
.viz-controls {
    text-align: center;
    margin-top: 10px;
    display: flex;
    gap: 5px;
    justify-content: center;
    flex-wrap: wrap;
}

.viz-control-button {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .viz-control-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    .viz-control-button:active {
        transform: translateY(0);
    }

/* Visualization Metrics */
.viz-metrics {
    font-size: 12px;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.5);
    padding: 10px;
    border-radius: 5px;
    line-height: 1.4;
}

    .viz-metrics div {
        margin-bottom: 3px;
    }

    .viz-metrics strong {
        color: #667eea;
        font-weight: 600;
    }

/* Linear Displacement Analysis */
.linear-displacement-analysis {
    padding: 20px;
    font-family: Arial, sans-serif;
}

    .linear-displacement-analysis h2 {
        text-align: center;
        color: #333;
        margin-bottom: 20px;
        font-size: 1.8rem;
    }

.analysis-section {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    background: #f8f9fa;
    margin-bottom: 15px;
}

    .analysis-section h3 {
        margin: 0 0 15px 0;
        font-size: 1.2rem;
        font-weight: 600;
    }

    .analysis-section p {
        margin: 8px 0;
        line-height: 1.4;
    }

    .analysis-section div[style*="monospace"] {
        font-family: 'Courier New', monospace;
        background: white;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #e0e0e0;
        font-size: 13px;
    }

/* Integration Summary */
.integration-summary {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #ddd;
}

    .integration-summary h3 {
        text-align: center;
        color: #333;
        margin-bottom: 20px;
        font-size: 1.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

.metric-card {
    background: white;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

    .metric-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .metric-card h4 {
        margin: 0 0 10px 0;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .metric-card p {
        margin: 5px 0;
        font-size: 14px;
        line-height: 1.3;
    }

/* Sync Status Content */
.sync-status-content {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(67, 160, 71, 0.1));
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #4CAF50;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.4;
}

    .sync-status-content strong {
        color: #2e7d32;
        font-size: 14px;
    }

/* Error Notification */
.error-notification {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 10001;
    background: linear-gradient(135deg, #f44336, #d32f2f);
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    max-width: 400px;
    font-family: Arial, sans-serif;
    animation: slideInRight 0.3s ease-out;
}

    .error-notification .notification-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }

    .error-notification .notification-details {
        font-size: 12px;
        font-weight: normal;
        opacity: 0.9;
        line-height: 1.4;
    }

/* Fugue Generation Status */
#fugueGenerationStatus {
    margin-top: 10px;
    font-style: italic;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-left: 3px solid #667eea;
    font-size: 13px;
}

/* Pi Prediction Display */
#piPrediction {
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 8px;
    border: 2px solid rgba(253, 121, 168, 0.3);
    margin: 10px 0;
    font-family: 'Courier New', monospace;
}

/* Phi Relation Text */
#phiRelationText {
    background: rgba(255, 234, 167, 0.3);
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 4px solid #f39c12;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #e67e22;
    font-weight: 500;
}

/* Form Controls Styling */
#pSlider {
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

    #pSlider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: white;
        cursor: pointer;
        border: 3px solid #667eea;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        transition: all 0.2s ease;
    }

        #pSlider::-webkit-slider-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 3px 8px rgba(102, 126, 234, 0.5);
        }

#pValue {
    font-weight: bold;
    font-size: 16px;
    color: #667eea;
    text-align: center;
    background: rgba(102, 126, 234, 0.1);
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid rgba(102, 126, 234, 0.3);
}

#functionSelect,
#presetSets,
#inputArray {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid rgba(253, 121, 168, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    transition: all 0.3s ease;
}

    #functionSelect:focus,
    #presetSets:focus,
    #inputArray:focus {
        outline: none;
        border-color: #fd79a8;
        box-shadow: 0 0 0 3px rgba(253, 121, 168, 0.2);
        background: white;
    }

#result {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(253, 121, 168, 0.3);
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.4;
    max-height: 200px;
    overflow-y: auto;
}

/* Fractal System Status */
#fractalSystemStatus {
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
    margin: 10px 0;
    transition: all 0.3s ease;
}

#fractalMetrics {
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    display: none;
}

/* Slideshow/Animation keyframes for dynamic notifications */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Enhanced Focus States for dynamically created elements */
.viz-control-button:focus,
#pSlider:focus,
#functionSelect:focus,
#presetSets:focus {
    outline: 3px solid #4ecdc4;
    outline-offset: 2px;
}

/* Loading states for dynamic content */
.loading-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 2s infinite;
}

@keyframes loading-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Grid Layout Enhancements for Analysis Sections */
.analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.integration-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .integration-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .analysis-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* Ensure proper stacking context for modals */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* Typography enhancements for data display */
.monospace-data {
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    line-height: 1.4;
    background: rgba(255, 255, 255, 0.8);
    padding: 8px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Button state enhancements */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

    button:disabled:hover {
        transform: none !important;
        box-shadow: none !important;
    }

/* Print-friendly styles for analysis */
@media print {
    .viz-controls,
    .error-notification,
    #fractalSystemStatus {
        display: none !important;
    }

    .viz-panel,
    .analysis-section,
    .metric-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .integration-summary {
        page-break-before: always;
    }
}

/* ===== FRACTAL PITCH SYSTEM CSS - MISSING ELEMENTS ===== */

/* Fractal Visualization Modal */
#fractalVisualizationModal {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    display: none;
    animation: fadeInModal 0.3s ease-out;
}

@keyframes fadeInModal {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(10px);
    }
}

/* Fractal Canvas */
#fractalPitchCanvas {
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(135deg, #0f0f23, #1a1a2e);
    border: 2px solid rgba(255, 107, 53, 0.3);
    border-radius: 10px;
    cursor: crosshair;
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.2);
    transition: all 0.3s ease;
}

    #fractalPitchCanvas:hover {
        border-color: rgba(255, 107, 53, 0.6);
        box-shadow: 0 20px 50px rgba(255, 107, 53, 0.3);
    }

/* Fractal System Status */
.fractal-status-active {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #4ECDC4;
    font-size: 16px;
    background: linear-gradient(135deg, rgba(76, 205, 196, 0.1), rgba(68, 189, 135, 0.1));
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 4px solid #4ECDC4;
    animation: fractalStatusPulse 2s infinite;
}

    .fractal-status-active::before {
        content: '🌀 ';
        margin-right: 8px;
        animation: rotationIndicator 4s linear infinite;
    }

.fractal-status-inactive {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #ff6b6b;
    font-size: 16px;
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(238, 90, 36, 0.1));
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 4px solid #ff6b6b;
}

    .fractal-status-inactive::before {
        content: '⚠️ ';
        margin-right: 8px;
        animation: pulse 2s infinite;
    }

@keyframes fractalStatusPulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(76, 205, 196, 0.3);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 4px 25px rgba(76, 205, 196, 0.6);
        transform: scale(1.02);
    }
}

/* Fractal Metrics Display */
#fractalMetrics {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border: 2px solid rgba(102, 126, 234, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin: 15px 0;
    color: white;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
    display: none;
    backdrop-filter: blur(10px);
}

    #fractalMetrics h4 {
        margin: 0 0 15px 0;
        color: #667eea;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

.fractal-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.fractal-metric-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 12px 15px;
    border-radius: 8px;
    border-left: 4px solid #667eea;
    transition: all 0.3s ease;
}

    .fractal-metric-item:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: translateX(5px);
    }

    .fractal-metric-item label {
        display: block;
        font-weight: bold;
        font-size: 11px;
        color: #4ecdc4;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 5px;
    }

.fractal-metric-value {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    color: white;
}

/* Fractal P-Center Controls */
.fractal-pcenter-control {
    background: linear-gradient(135deg, #FF6B35, #F7931E);
    border: 3px solid rgba(255, 107, 53, 0.6);
    border-radius: 15px;
    padding: 20px;
    margin: 20px 0;
    color: white;
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
    position: relative;
    overflow: hidden;
}

    .fractal-pcenter-control::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #FFD700, #FF6B35, #F7931E);
        animation: rainbowGlow 3s infinite;
    }

    .fractal-pcenter-control label {
        display: block;
        margin-bottom: 12px;
        font-weight: bold;
        font-size: 15px;
        color: white;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }

.fractal-pcenter-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

/* Fractal P-Center Slider */
.fractal-pcenter-slider,
#fractalPSlider,
#modalFractalPSlider {
    flex: 1;
    height: 10px !important;
    background: linear-gradient(90deg, #FFD700, #FF6B35, #F7931E) !important;
    border-radius: 5px !important;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

    .fractal-pcenter-slider::-webkit-slider-thumb,
    #fractalPSlider::-webkit-slider-thumb,
    #modalFractalPSlider::-webkit-slider-thumb {
        appearance: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: white;
        cursor: pointer;
        border: 3px solid #FF6B35;
        box-shadow: 0 3px 8px rgba(0,0,0,0.4);
        transition: all 0.2s ease;
    }

        .fractal-pcenter-slider::-webkit-slider-thumb:hover,
        #fractalPSlider::-webkit-slider-thumb:hover,
        #modalFractalPSlider::-webkit-slider-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(255, 107, 53, 0.6);
        }

    .fractal-pcenter-slider::-moz-range-thumb,
    #fractalPSlider::-moz-range-thumb,
    #modalFractalPSlider::-moz-range-thumb {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: white;
        cursor: pointer;
        border: 3px solid #FF6B35;
        box-shadow: 0 3px 8px rgba(0,0,0,0.4);
        transition: all 0.2s ease;
    }

/* Fractal P-Center Display */
.fractal-pcenter-display,
#fractalPValue,
#modalFractalPValue {
    min-width: 90px;
    font-weight: bold;
    font-size: 18px;
    color: white;
    text-align: center;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    backdrop-filter: blur(5px);
    animation: syncPulse 3s infinite;
}

@keyframes syncPulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* Fractal Pitch Center Elements */
#fractalPitchCenter {
    font-weight: bold;
    font-size: 16px;
    color: #FF6B35;
    background: rgba(255, 107, 53, 0.1);
    padding: 6px 12px;
    border-radius: 6px;
    border: 2px solid rgba(255, 107, 53, 0.3);
    text-align: center;
    display: inline-block;
    min-width: 60px;
}

#fractalActiveSet,
#fractalCurrentSet,
#modalFractalActiveSet,
#modalFractalCurrentSet {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    backdrop-filter: blur(5px);
}

/* Fractal Sync Indicator */
#fractalSyncIndicator {
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 12px;
    background: rgba(76, 205, 196, 0.2);
    color: #4ecdc4;
    border: 1px solid rgba(76, 205, 196, 0.3);
    display: inline-block;
    margin-left: 10px;
    transition: all 0.3s ease;
}

/* Fractal System Container */
.fractal-system-container {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 2px solid #667eea;
    border-radius: 15px;
    padding: 25px;
    margin: 20px 0;
    color: white;
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.2);
    position: relative;
    overflow: visible;
    backdrop-filter: blur(15px);
}

    .fractal-system-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #667eea, #764ba2, #ff6b6b, #4834d4);
        border-radius: 15px 15px 0 0;
        animation: rainbowGlow 4s infinite;
    }

    .fractal-system-container h3 {
        margin: 0 0 20px 0;
        color: #4ecdc4;
        font-size: 1.4rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

/* Enhanced Modal for Fractal Visualization */
.fractal-enhanced-controls {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.8), rgba(22, 33, 62, 0.8));
    border: 2px solid rgba(255, 107, 53, 0.6);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    color: white;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.fractal-control-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 25px;
    align-items: center;
}

@media (max-width: 768px) {
    .fractal-control-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* Fractal Canvas Container for Modal */
.fractal-canvas-container {
    flex: 1;
    padding: 0;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: transparent;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(255, 107, 53, 0.3);
}

/* Fractal Controls at Bottom of Modal */
.fractal-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.9));
    border-radius: 0 0 10px 10px;
    margin: 0;
    border-top: 1px solid rgba(102, 126, 234, 0.3);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.fractal-info {
    display: flex;
    gap: 25px;
    align-items: center;
}

.fractal-info-item {
    font-size: 14px;
    font-weight: 500;
    color: #4ecdc4;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .fractal-info-item span {
        font-weight: bold;
        color: white;
        background: rgba(76, 205, 196, 0.2);
        padding: 2px 8px;
        border-radius: 10px;
        font-family: 'Courier New', monospace;
    }

.fractal-controls button {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

    .fractal-controls button:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        background: linear-gradient(135deg, #5a67d8, #6b46c1);
    }

    .fractal-controls button:active {
        transform: translateY(0);
    }

    /* Special Button States for Fractal Controls */
    .fractal-controls button[onclick*="playFractalPitchSet"] {
        background: linear-gradient(135deg, #27ae60, #2ecc71);
    }

        .fractal-controls button[onclick*="playFractalPitchSet"]:hover {
            background: linear-gradient(135deg, #229954, #28b463);
        }

    .fractal-controls button[onclick*="toggleFractalDrone"] {
        background: linear-gradient(135deg, #f39c12, #e67e22);
    }

        .fractal-controls button[onclick*="toggleFractalDrone"]:hover {
            background: linear-gradient(135deg, #e67e22, #d35400);
        }

    .fractal-controls button[onclick*="toggleFractalExtremeMode"] {
        background: linear-gradient(135deg, #e74c3c, #c0392b);
        animation: extremePulse 2s infinite;
    }

@keyframes extremePulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
        filter: brightness(1);
    }

    50% {
        box-shadow: 0 4px 25px rgba(231, 76, 60, 0.7);
        filter: brightness(1.1);
    }
}

/* Fractal System Buttons */
.projects-button[onclick*="fractal"] {
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    text-transform: none;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

.projects-button[onclick*="activateFractalPitchSystem"] {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    animation: fractalPulse 3s infinite;
    font-weight: bold;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.projects-button[onclick*="deactivateFractalPitchSystem"] {
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    color: white;
}

.projects-button[onclick*="toggleFractalExtremeMode"] {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24) !important;
    animation: extremePulse 2s infinite;
    font-weight: bold;
}

.projects-button[onclick*="showFractalVisualization"] {
    background: linear-gradient(135deg, #3498db, #2980b9) !important;
    color: white;
}

.projects-button[onclick*="testDirectMIDI"] {
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    animation: extremePulse 1.5s infinite;
}

/* MIDI Test Button Special Styling */
.midi-test-button {
    display: block;
    width: 100%;
    margin-top: 15px !important;
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    font-weight: bold;
    animation: extremePulse 2s infinite;
    font-size: 14px;
    transition: all 0.3s ease;
}

    .midi-test-button:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
    }

/* Fugue Generation Status */
#fugueGenerationStatus {
    margin-top: 10px;
    font-style: italic;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-left: 3px solid #667eea;
    font-size: 13px;
    color: #e0e0e0;
    backdrop-filter: blur(5px);
}

/* Fugue Audio Modal */
.fugue-audio-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
}

    .fugue-audio-modal .modal-content {
        background: linear-gradient(135deg, #1a1a2e, #16213e);
        color: white;
        padding: 30px;
        border-radius: 15px;
        max-width: 600px;
        width: 90%;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        border: 2px solid #667eea;
        animation: slideInScale 0.4s ease-out;
    }

@keyframes slideInScale {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Haunting Mode Indicators */
.haunting-mode-indicator {
    color: #4ECDC4;
    font-weight: bold;
    animation: hauntingPulse 3s ease-in-out infinite;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .haunting-mode-indicator::before {
        content: '🌟';
        animation: rotationIndicator 4s linear infinite;
    }

@keyframes hauntingPulse {
    0%, 100% {
        opacity: 0.6;
        text-shadow: 0 0 10px rgba(76, 205, 196, 0.3);
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 20px rgba(76, 205, 196, 0.6);
    }
}

@keyframes rotationIndicator {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Error Notifications for Fractal System */
.fractal-notification {
    position: fixed;
    top: 60px;
    right: 20px;
    z-index: 10000;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    max-width: 400px;
    animation: slideInRight 0.3s ease-out;
}

    .fractal-notification.success {
        background: linear-gradient(135deg, #4CAF50, #45a049);
    }

    .fractal-notification.error {
        background: linear-gradient(135deg, #f44336, #d32f2f);
    }

    .fractal-notification.warning {
        background: linear-gradient(135deg, #FF9800, #F57C00);
    }

    .fractal-notification.info {
        background: linear-gradient(135deg, #2196F3, #1976D2);
    }

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Focus States for Fractal System Elements */
.fractal-pcenter-slider:focus,
#fractalPSlider:focus,
#modalFractalPSlider:focus {
    outline: 3px solid #FFD700;
    outline-offset: 2px;
}

.projects-button[onclick*="fractal"]:focus {
    outline: 2px solid #4ECDC4;
    outline-offset: 2px;
}

/* Responsive Adjustments for Fractal System */
@media (max-width: 768px) {
    .fractal-controls {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

        .fractal-controls > div:last-child {
            justify-content: center;
        }

    .fractal-info {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .fractal-pcenter-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .fractal-pcenter-display {
        text-align: center;
        min-width: auto;
    }

    .fractal-system-container {
        padding: 15px;
        margin: 10px 0;
    }

    #fractalVisualizationModal .modal-dialog {
        width: 98%;
        height: 98%;
        margin: 1% auto;
    }
}

@media (max-width: 480px) {
    .fractal-pcenter-control {
        padding: 15px;
    }

    .fractal-metrics-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .fractal-controls button {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* High Contrast Support for Fractal System */
@media (prefers-contrast: high) {
    .fractal-system-container,
    .fractal-pcenter-control {
        border-width: 3px;
        box-shadow: none;
    }

    .fractal-pcenter-slider::-webkit-slider-thumb,
    #fractalPSlider::-webkit-slider-thumb,
    #modalFractalPSlider::-webkit-slider-thumb {
        border-width: 3px;
    }

    #fractalPitchCanvas {
        border: 3px solid white;
    }
}

/* Reduced Motion Support for Fractal System */
@media (prefers-reduced-motion: reduce) {
    .fractal-status-active::before,
    .haunting-mode-indicator::before,
    .fractal-notification {
        animation: none !important;
    }

    .projects-button[onclick*="fractal"]:hover,
    .fractal-controls button:hover {
        transform: none !important;
    }

    .fractal-pcenter-display {
        animation: none !important;
    }
}

/* Print Styles for Fractal System */
@media print {
    #fractalVisualizationModal,
    .fractal-notification,
    .fugue-audio-modal {
        display: none !important;
    }

    .fractal-system-container {
        break-inside: avoid;
        page-break-inside: avoid;
        background: white !important;
        color: black !important;
        border: 2px solid black !important;
    }
}

/* Custom Scrollbars for Fractal Modals */
.fugue-audio-modal::-webkit-scrollbar,
#fractalVisualizationModal::-webkit-scrollbar {
    width: 8px;
}

.fugue-audio-modal::-webkit-scrollbar-track,
#fractalVisualizationModal::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.fugue-audio-modal::-webkit-scrollbar-thumb,
#fractalVisualizationModal::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.6);
    border-radius: 4px;
    transition: background 0.2s ease;
}

    .fugue-audio-modal::-webkit-scrollbar-thumb:hover,
    #fractalVisualizationModal::-webkit-scrollbar-thumb:hover {
        background: rgba(102, 126, 234, 0.8);
    }

/* Final Performance Optimizations */
.fractal-system-container *,
.fractal-pcenter-control *,
#fractalPitchCanvas {
    will-change: auto;
}

    .fractal-system-container *:hover,
    .fractal-pcenter-control *:hover {
        will-change: transform;
    }

/* Hardware acceleration for fractal elements */
.projects-button[onclick*="fractal"],
.fractal-notification,
.fractal-pcenter-slider::-webkit-slider-thumb,
#fractalPSlider::-webkit-slider-thumb,
#modalFractalPSlider::-webkit-slider-thumb {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* End of Fractal Pitch System CSS */

/* ===== FRACTAL FUGUE COMPOSER CSS - FINAL COMPLETION ===== */

/* Enhanced File Loading Interface */
.file-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .file-loading-overlay.active {
        opacity: 1;
        visibility: visible;
    }

.file-loading-content {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: white;
    padding: 40px;
    border-radius: 15px;
    text-align: center;
    border: 2px solid #ff9800;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    max-width: 400px;
    width: 90%;
}

    .file-loading-content h3 {
        margin: 0 0 20px 0;
        color: #ff9800;
        font-size: 1.3rem;
    }

.file-loading-progress {
    width: 100%;
    height: 8px;
    background: rgba(255, 152, 0, 0.2);
    border-radius: 4px;
    overflow: hidden;
    margin: 20px 0;
}

.file-loading-bar {
    height: 100%;
    background: linear-gradient(90deg, #ff9800, #f57c00);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 4px;
}

.file-format-detection {
    margin-top: 15px;
    padding: 10px;
    background: rgba(255, 152, 0, 0.1);
    border-radius: 6px;
    font-size: 12px;
    color: #ffcc80;
}

/* Enhanced MIDI Playback Controls */
.midi-playback-panel {
    background: linear-gradient(135deg, #9c27b0, #673ab7);
    border-radius: 15px;
    padding: 20px;
    margin: 20px 0;
    color: white;
    box-shadow: 0 8px 25px rgba(156, 39, 176, 0.3);
    position: relative;
    overflow: hidden;
}

    .midi-playback-panel::before {
        content: '🎹';
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 24px;
        animation: midiPulse 3s infinite;
    }

@keyframes midiPulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.midi-playback-panel h4 {
    margin: 0 0 15px 0;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.midi-track-display {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 15px 0;
}

.midi-track-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .midi-track-card:hover {
        background: rgba(255, 255, 255, 0.15);
        transform: translateY(-2px);
    }

    .midi-track-card.muted {
        opacity: 0.5;
        background: rgba(244, 67, 54, 0.1);
    }

.midi-track-name {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 5px;
    color: white;
}

.midi-track-info {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.3;
}

.midi-playback-timeline {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 15px;
    margin: 15px 0;
}

.timeline-progress {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;
    margin: 10px 0;
    cursor: pointer;
}

.timeline-bar {
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #81c784);
    width: 0%;
    transition: width 0.1s ease;
    border-radius: 3px;
}

.timeline-markers {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 5px;
}

/* Advanced Fugue Technique Indicators */
.technique-analysis-panel {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(63, 81, 181, 0.3);
    border-radius: 15px;
    padding: 25px;
    margin: 20px 0;
    position: relative;
}

    .technique-analysis-panel::before {
        content: '🎼 Fugal Techniques Analysis';
        position: absolute;
        top: -12px;
        left: 20px;
        background: linear-gradient(135deg, #3f51b5, #303f9f);
        color: white;
        padding: 6px 16px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: bold;
        box-shadow: 0 4px 15px rgba(63, 81, 181, 0.4);
    }

.technique-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.technique-category {
    background: rgba(63, 81, 181, 0.05);
    border: 1px solid rgba(63, 81, 181, 0.1);
    border-radius: 10px;
    padding: 15px;
}

    .technique-category h5 {
        margin: 0 0 12px 0;
        color: #3f51b5;
        font-size: 14px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
    }

.technique-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.technique-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

    .technique-item.detected {
        border-left-color: #4caf50;
        background: rgba(76, 175, 80, 0.1);
    }

    .technique-item.not-detected {
        border-left-color: #e0e0e0;
        opacity: 0.6;
    }

.technique-name {
    font-size: 12px;
    font-weight: 500;
    color: #333;
}

.technique-status {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

    .technique-status.active {
        background: rgba(76, 175, 80, 0.2);
        color: #2e7d32;
    }

    .technique-status.inactive {
        background: rgba(158, 158, 158, 0.2);
        color: #666;
    }

/* Enhanced Complexity Visualization */
.complexity-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.complexity-aspect {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(103, 58, 183, 0.2);
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
}

    .complexity-aspect:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(103, 58, 183, 0.15);
        border-color: rgba(103, 58, 183, 0.4);
    }

.aspect-name {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    font-weight: 600;
}

.aspect-meter {
    width: 100%;
    height: 8px;
    background: rgba(103, 58, 183, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.aspect-fill {
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #ff9800, #f44336);
    width: 0%;
    transition: width 1s ease;
    border-radius: 4px;
}

.aspect-value {
    font-size: 14px;
    font-weight: bold;
    color: #673ab7;
    font-family: 'Courier New', monospace;
}

/* Enhanced Pitch Center Rotation Display */
.rotation-visualization {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.1));
    border: 2px solid rgba(255, 193, 7, 0.3);
    border-radius: 15px;
    padding: 20px;
    margin: 20px 0;
    position: relative;
    text-align: center;
}

    .rotation-visualization::before {
        content: '🌀 P-Center Rotation';
        position: absolute;
        top: -12px;
        left: 20px;
        background: linear-gradient(135deg, #ffc107, #ff9800);
        color: white;
        padding: 6px 16px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: bold;
        box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
    }

.rotation-wheel {
    width: 120px;
    height: 120px;
    border: 4px solid rgba(255, 193, 7, 0.3);
    border-radius: 50%;
    position: relative;
    margin: 20px auto;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.2));
}

.rotation-pointer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 50px;
    background: linear-gradient(180deg, #ff6b35, #ffc107);
    transform-origin: bottom center;
    transform: translate(-50%, -100%);
    border-radius: 2px;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.rotation-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.rotation-metric {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.rotation-metric-label {
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    font-weight: 600;
}

.rotation-metric-value {
    font-size: 16px;
    font-weight: bold;
    color: #ff9800;
    font-family: 'Courier New', monospace;
}

/* Audio Engine Status Display */
.audio-engine-status {
    background: linear-gradient(135deg, #607d8b, #455a64);
    border-radius: 15px;
    padding: 20px;
    margin: 20px 0;
    color: white;
    box-shadow: 0 8px 25px rgba(96, 125, 139, 0.3);
    position: relative;
}

    .audio-engine-status h4 {
        margin: 0 0 15px 0;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

.audio-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.audio-status-item {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.audio-status-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    font-weight: 600;
}

.audio-status-value {
    font-size: 14px;
    font-weight: bold;
    color: white;
    font-family: 'Courier New', monospace;
}

    .audio-status-value.good {
        color: #4caf50;
    }

    .audio-status-value.warning {
        color: #ff9800;
    }

    .audio-status-value.error {
        color: #f44336;
    }

/* Performance Metrics Display */
.performance-metrics {
    position: fixed;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid #4ecdc4;
    border-radius: 8px;
    padding: 12px;
    color: white;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    max-width: 250px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .performance-metrics.visible {
        opacity: 0.9;
        visibility: visible;
    }

    .performance-metrics:hover {
        opacity: 1;
    }

    .performance-metrics h6 {
        margin: 0 0 8px 0;
        color: #4ecdc4;
        font-size: 11px;
        font-weight: bold;
    }

.metric-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    padding: 1px 0;
}

.metric-label {
    color: #e0e0e0;
}

.metric-value {
    color: #4ecdc4;
    font-weight: bold;
}

    .metric-value.warning {
        color: #ff9800;
    }

    .metric-value.critical {
        color: #f44336;
    }

/* Enhanced Keyboard Shortcuts Display */
.keyboard-shortcuts-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #263238, #37474f);
    border: 2px solid #4ecdc4;
    border-radius: 15px;
    padding: 30px;
    color: white;
    z-index: 15000;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

    .keyboard-shortcuts-panel.visible {
        opacity: 1;
        visibility: visible;
    }

.shortcuts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 2px solid rgba(76, 205, 196, 0.3);
    padding-bottom: 15px;
}

    .shortcuts-header h3 {
        margin: 0;
        color: #4ecdc4;
        font-size: 1.4rem;
    }

.shortcuts-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.2s ease;
}

    .shortcuts-close:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
    }

.shortcuts-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.shortcuts-category {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 15px;
}

    .shortcuts-category h4 {
        margin: 0 0 15px 0;
        color: #ff9800;
        font-size: 1.1rem;
    }

.shortcut-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shortcut-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .shortcut-row:last-child {
        border-bottom: none;
    }

.shortcut-keys {
    display: flex;
    gap: 4px;
}

.shortcut-key {
    background: #4ecdc4;
    color: #263238;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
}

.shortcut-description {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    text-align: right;
    flex: 1;
    margin-left: 15px;
}

/* Enhanced Error Handling and Validation */
.validation-feedback {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    display: none;
}

    .validation-feedback.error {
        background: rgba(244, 67, 54, 0.1);
        border: 1px solid rgba(244, 67, 54, 0.3);
        color: #d32f2f;
        display: block;
    }

    .validation-feedback.warning {
        background: rgba(255, 152, 0, 0.1);
        border: 1px solid rgba(255, 152, 0, 0.3);
        color: #f57c00;
        display: block;
    }

    .validation-feedback.success {
        background: rgba(76, 175, 80, 0.1);
        border: 1px solid rgba(76, 175, 80, 0.3);
        color: #388e3c;
        display: block;
    }

.input-error {
    border-color: #f44336 !important;
    box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.2) !important;
}

.input-warning {
    border-color: #ff9800 !important;
    box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2) !important;
}

.input-success {
    border-color: #4caf50 !important;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2) !important;
}

/* Final Touch: Advanced Animations and Transitions */
@keyframes dataFlow {
    0% {
        transform: translateX(-100%) scaleX(0);
    }

    50% {
        transform: translateX(0%) scaleX(1);
    }

    100% {
        transform: translateX(100%) scaleX(0);
    }
}

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes typewriter {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(76, 205, 196, 0.3);
    }

    50% {
        box-shadow: 0 0 20px rgba(76, 205, 196, 0.8), 0 0 30px rgba(76, 205, 196, 0.4);
    }
}

/* Active Data Processing Animation */
.data-processing {
    position: relative;
    overflow: hidden;
}

    .data-processing::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, transparent, #4ecdc4, transparent);
        animation: dataFlow 2s infinite;
    }

/* Heartbeat for critical elements */
.critical-status {
    animation: heartbeat 2s infinite;
}

/* Glow effect for important notifications */
.glow-effect {
    animation: glowPulse 3s infinite;
}

/* Typewriter effect for status messages */
.typewriter-effect {
    overflow: hidden;
    white-space: nowrap;
    animation: typewriter 2s steps(40, end);
}

/* Enhanced Focus Management */
.focus-ring {
    outline: 3px solid #4ecdc4;
    outline-offset: 2px;
    border-radius: 6px;
}

.focus-ring-inset {
    box-shadow: inset 0 0 0 3px #4ecdc4;
}

/* Final Utility Classes */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

.slide-up {
    animation: slideUp 0.5s ease-out;
}

.scale-in {
    animation: scaleIn 0.3s ease-out;
}

.bounce-in {
    animation: bounceIn 0.6s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Mobile-First Responsive Final Adjustments */
@media (max-width: 320px) {
    .keyboard-shortcuts-panel {
        padding: 20px;
    }

    .shortcuts-categories {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .rotation-wheel {
        width: 80px;
        height: 80px;
    }

    .rotation-info {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .performance-metrics {
        position: relative;
        top: auto;
        left: auto;
        margin: 10px 0;
        max-width: none;
    }
}

/* Final Print Optimization */
@media print {
    .file-loading-overlay,
    .keyboard-shortcuts-panel,
    .performance-metrics,
    .audio-engine-status {
        display: none !important;
    }

    .technique-analysis-panel,
    .complexity-breakdown,
    .rotation-visualization {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    * {
        animation: none !important;
        transition: none !important;
    }
}

/* High Contrast Final Adjustments */
@media (prefers-contrast: high) {
    .rotation-wheel,
    .audio-status-item,
    .technique-item {
        border-width: 3px;
    }

    .focus-ring {
        outline-width: 4px;
    }

    .validation-feedback {
        border-width: 2px;
    }
}

/* Reduced Motion Final */
@media (prefers-reduced-motion: reduce) {
    .data-processing::after,
    .critical-status,
    .glow-effect,
    .typewriter-effect {
        animation: none !important;
    }

    .rotation-pointer {
        transition: none !important;
    }

    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark Theme Final Support */
@media (prefers-color-scheme: dark) {
    .technique-analysis-panel,
    .complexity-meter-container,
    .export-options-panel {
        background: rgba(30, 30, 30, 0.95);
        color: #e0e0e0;
    }

    .technique-item,
    .complexity-aspect,
    .export-format-card {
        background: rgba(50, 50, 50, 0.9);
        color: #e0e0e0;
    }
}

/* CSS Custom Properties for Dynamic Theming */
.fugue-theme-light {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: #2c3e50;
    --text-secondary: #666666;
    --accent-primary: #8e24aa;
    --accent-secondary: #5e35b1;
}

.fugue-theme-dark {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --accent-primary: #bb86fc;
    --accent-secondary: #3700b3;
}

/* Performance Optimizations */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

/* Container Queries Support (Future-proofing) */
@supports (container-type: inline-size) {
    .fugue-container {
        container-type: inline-size;
    }

    @container (max-width: 600px) {
        .fugue-actions-grid {
            grid-template-columns: 1fr;
        }
    }
}

/* END OF FRACTAL FUGUE COMPOSER CSS */