/* Free Bounce — Neumorphic Design System
   Site-wide utility classes for a physical, 3D hardware texture.
   
   USAGE: <link rel="stylesheet" href="css/neumorphic.css">
   (or from tools subfolder: href="../../css/neumorphic.css")
   
   The core secret: element background MUST match the canvas background.
   The 3D effect is two box-shadows — one light (top-left highlight)
   and one dark (bottom-right cast shadow).
   
   Batches:
     1. DNA (variables + body base)
     2. Extruded panel (.neu-panel)
     3. Recessed well (.neu-pressed)
     4. Hardware buttons (.neu-btn, .neu-btn-accent)
     5. LED-knob sliders
     6. Drop zone (.neu-drop)
     7. Scrollbar
     8. Cards (.neu-card)
     9. Tabs (.neu-tab)
    10. Accent export button (.neu-export-btn)
   ========================================================= */

/* ─── 1. DNA: Variables + Body Base ─── */
:root {
    --neu-base: #141414;
    --neu-shadow-d: #0a0a0a;
    --neu-shadow-l: #2a2a2a;
    --neu-accent: #3b82f6;
    --neu-accent-glow: 59, 130, 246;
    --neu-text: #e4e4e7;
    --neu-text-dim: #71717a;
    --neu-text-muted: #525252;
    --neu-border: #2a2a2a;
    --neu-surface: #1a1a1a;
    --neu-radius: 0.75rem;
    --neu-radius-lg: 1rem;
    --neu-transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── 2. Extruded Panel ─── */
.neu-panel {
    background: var(--neu-base);
    box-shadow:
        8px 8px 16px var(--neu-shadow-d),
       -8px -8px 16px var(--neu-shadow-l);
    border-radius: var(--neu-radius-lg);
}

.neu-panel-sm {
    background: var(--neu-base);
    box-shadow:
        5px 5px 10px var(--neu-shadow-d),
       -5px -5px 10px var(--neu-shadow-l);
    border-radius: var(--neu-radius);
}

/* ─── 3. Recessed Well ─── */
.neu-pressed {
    background: var(--neu-base);
    box-shadow:
        inset 5px 5px 10px var(--neu-shadow-d),
        inset -5px -5px 10px var(--neu-shadow-l);
    border-radius: var(--neu-radius);
}

.neu-pressed-deep {
    background: var(--neu-base);
    box-shadow:
        inset 8px 8px 16px var(--neu-shadow-d),
        inset -8px -8px 16px var(--neu-shadow-l);
    border-radius: var(--neu-radius);
}

/* ─── 4. Hardware Buttons ─── */
.neu-btn {
    background: var(--neu-base);
    box-shadow:
        4px 4px 8px var(--neu-shadow-d),
       -4px -4px 8px var(--neu-shadow-l);
    color: var(--neu-text);
    transition: var(--neu-transition);
    border: 1px solid transparent;
    cursor: pointer;
}
.neu-btn:hover:not(:disabled) {
    color: var(--neu-accent);
}
.neu-btn:active:not(:disabled) {
    box-shadow:
        inset 3px 3px 6px var(--neu-shadow-d),
        inset -3px -3px 6px var(--neu-shadow-l);
}
.neu-btn:disabled {
    color: var(--neu-text-dim);
    box-shadow:
        2px 2px 4px var(--neu-shadow-d),
       -2px -2px 4px var(--neu-shadow-l);
    opacity: 0.5;
    cursor: not-allowed;
}

/* Accent filled button */
.neu-btn-accent {
    background: var(--neu-accent);
    box-shadow:
        5px 5px 10px rgba(0,0,0,0.35),
       -5px -5px 10px rgba(255,255,255,0.04);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: var(--neu-transition);
    border: none;
    cursor: pointer;
}
.neu-btn-accent:hover:not(:disabled) {
    filter: brightness(1.1);
}
.neu-btn-accent:active:not(:disabled) {
    box-shadow:
        inset 3px 3px 8px rgba(0,0,0,0.3),
        inset -3px -3px 8px rgba(255,255,255,0.08);
}

/* ─── 5. LED-Knob Sliders ─── */
.neu-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    height: 32px;
    cursor: pointer;
}
.neu-slider:focus { outline: none; }

.neu-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: var(--neu-base);
    border-radius: 4px;
    box-shadow:
        inset 3px 3px 6px var(--neu-shadow-d),
        inset -3px -3px 6px var(--neu-shadow-l);
}

.neu-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    background: var(--neu-base);
    background-image: radial-gradient(circle at center, var(--neu-accent) 15%, transparent 20%);
    box-shadow:
        3px 3px 6px var(--neu-shadow-d),
       -3px -3px 6px var(--neu-shadow-l);
    margin-top: -7px;
    transition: transform 0.1s ease;
    border: 1px solid var(--neu-shadow-l);
}
.neu-slider:active::-webkit-slider-thumb { transform: scale(1.1); }

/* ─── 6. Drop Zone ─── */
.neu-drop {
    background: var(--neu-base);
    box-shadow:
        inset 5px 5px 10px var(--neu-shadow-d),
        inset -5px -5px 10px var(--neu-shadow-l);
    border: 2px dashed var(--neu-border);
    border-radius: var(--neu-radius);
    transition: var(--neu-transition);
}
.neu-drop.dragover,
.neu-drop:hover {
    border-color: var(--neu-accent);
    box-shadow:
        inset 6px 6px 12px var(--neu-shadow-d),
        inset -6px -6px 12px var(--neu-shadow-l);
}

/* ─── 7. Scrollbar ─── */
.neu-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.neu-scroll::-webkit-scrollbar-track {
    background: var(--neu-base);
    box-shadow: inset 2px 2px 4px var(--neu-shadow-d);
}
.neu-scroll::-webkit-scrollbar-thumb {
    background: #3f3f46;
    border-radius: 3px;
}

/* ─── 8. Cards ─── */
.neu-card {
    background: var(--neu-base);
    box-shadow:
        6px 6px 12px var(--neu-shadow-d),
       -6px -6px 12px var(--neu-shadow-l);
    border-radius: var(--neu-radius-lg);
    transition: var(--neu-transition);
    position: relative;
    overflow: hidden;
}
.neu-card:hover {
    box-shadow:
        8px 8px 16px var(--neu-shadow-d),
       -8px -8px 16px var(--neu-shadow-l);
    transform: translateY(-2px);
}

/* Card with accent highlight on hover */
.neu-card-accent:hover {
    box-shadow:
        8px 8px 16px var(--neu-shadow-d),
       -8px -8px 16px var(--neu-shadow-l),
        0 0 0 1px rgba(var(--neu-accent-glow), 0.2);
}

/* Featured card — permanent accent glow */
.neu-card-featured {
    box-shadow:
        6px 6px 12px var(--neu-shadow-d),
       -6px -6px 12px var(--neu-shadow-l),
        0 0 0 1px rgba(var(--neu-accent-glow), 0.15);
}
.neu-card-featured:hover {
    box-shadow:
        8px 8px 16px var(--neu-shadow-d),
       -8px -8px 16px var(--neu-shadow-l),
        0 0 0 1px rgba(var(--neu-accent-glow), 0.35),
        0 0 20px rgba(var(--neu-accent-glow), 0.06);
}

/* ─── 9. Tabs ─── */
.neu-tab {
    background: var(--neu-base);
    box-shadow:
        3px 3px 6px var(--neu-shadow-d),
       -3px -3px 6px var(--neu-shadow-l);
    border-radius: var(--neu-radius);
    color: var(--neu-text-dim);
    transition: var(--neu-transition);
    cursor: pointer;
    border: 1px solid transparent;
}
.neu-tab:hover { color: var(--neu-text); }
.neu-tab.active {
    box-shadow:
        inset 3px 3px 6px var(--neu-shadow-d),
        inset -3px -3px 6px var(--neu-shadow-l);
    color: var(--neu-accent);
    border-color: rgba(var(--neu-accent-glow), 0.15);
}

/* ─── 10. Export / CTA Button ─── */
.neu-export-btn { transition: var(--neu-transition); }
.neu-export-btn:not(:disabled) {
    background: var(--neu-accent);
    box-shadow:
        5px 5px 10px rgba(0,0,0,0.35),
       -5px -5px 10px rgba(255,255,255,0.04);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.neu-export-btn:not(:disabled):active {
    box-shadow:
        inset 3px 3px 8px rgba(0,0,0,0.3),
        inset -3px -3px 8px rgba(255,255,255,0.08);
}
.neu-export-btn:disabled {
    background: var(--neu-base);
    box-shadow:
        inset 3px 3px 6px var(--neu-shadow-d),
        inset -3px -3px 6px var(--neu-shadow-l);
    color: var(--neu-text-dim);
    cursor: not-allowed;
}

/* ─── Utility: Neumorphic Icon Well ─── */
.neu-icon-well {
    background: var(--neu-base);
    box-shadow:
        inset 3px 3px 6px var(--neu-shadow-d),
        inset -3px -3px 6px var(--neu-shadow-l);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neu-text-muted);
    transition: var(--neu-transition);
}

/* ─── Utility: Neumorphic Divider ─── */
.neu-divider {
    height: 1px;
    background: linear-gradient(90deg,
        var(--neu-shadow-d),
        var(--neu-shadow-l) 50%,
        var(--neu-shadow-d)
    );
    border: none;
    margin: 1.5rem 0;
}