/* === RESET & VARS === */
*{margin:0;padding:0;box-sizing:border-box}
:root{
    --bg:#08060f;
    --surface:#0e0b1a;
    --surface2:#141025;
    --border:#1a1530;
    --border-hover:#2a2050;
    --cyan:#00e5ff;
    --purple:#a855f7;
    --lime:#39ff14;
    --pink:#ff2d95;
    --text:#e0dce8;
    --dim:#706889;
    --radius:10px;

    /* Category accent colors */
    --cat-weapons:#ff6b35;
    --cat-characters:#4e9fff;
    --cat-ui:#00e5ff;
    --cat-pickups:#ffd700;
    --cat-environment:#39ff14;
    --cat-magic:#a855f7;
    --cat-creatures:#ff2d55;
    --cat-movement:#20d6c7;

    --accent:var(--cyan);
}
html{scroll-behavior:smooth}
body{
    font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    min-height:100vh;
}

/* === GRID BG === */
.grid-bg{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:
        linear-gradient(rgba(168,85,247,0.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(168,85,247,0.03) 1px,transparent 1px);
    background-size:60px 60px;
}
.grid-bg::after{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(168,85,247,0.08),transparent 70%);
}
.scanlines{
    position:fixed;inset:0;z-index:9999;pointer-events:none;
    background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px);
}

/* === NAV === */
nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    height:52px;padding:0 20px;
    display:flex;align-items:center;justify-content:space-between;
    background:rgba(8,6,15,0.88);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
}
.nav-left{display:flex;align-items:center;gap:8px}
.nav-logo{
    font-size:15px;font-weight:800;letter-spacing:-0.5px;
    background:linear-gradient(135deg,var(--cyan),var(--purple));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;text-decoration:none;
}
.nav-sep{color:var(--dim);font-size:14px}
.nav-title{font-size:14px;font-weight:600;color:var(--text)}
.nav-right{display:flex;gap:8px;align-items:center}
.nav-btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 14px;border-radius:6px;
    font-size:12px;font-weight:600;
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--dim);cursor:pointer;
    transition:all 0.2s;text-decoration:none;
}
.nav-btn:hover{border-color:var(--purple);color:var(--text)}

/* === APP LAYOUT === */
.app-layout{
    display:flex;
    margin-top:52px;
    min-height:calc(100vh - 52px);
    position:relative;z-index:1;
}

/* === SIDEBAR === */
.sidebar{
    width:200px;min-width:200px;
    background:var(--surface);
    border-right:1px solid var(--border);
    padding:16px 10px;
    display:flex;flex-direction:column;gap:4px;
    position:sticky;top:52px;
    height:calc(100vh - 52px);
    overflow-y:auto;
}
.sidebar-label{
    font-size:10px;font-weight:700;
    text-transform:uppercase;letter-spacing:1.5px;
    color:var(--dim);
    padding:0 8px 10px;
}
.cat-btn{
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;
    border-radius:8px;
    border:1px solid transparent;
    background:transparent;
    color:var(--dim);
    font-size:13px;font-weight:600;
    cursor:pointer;transition:all 0.2s;
    text-align:left;width:100%;
}
.cat-btn:hover{
    background:var(--surface2);
    color:var(--text);
    border-color:var(--border);
}
.cat-btn.active{
    background:rgba(var(--accent-rgb),0.08);
    border-color:rgba(var(--accent-rgb),0.3);
    color:var(--accent);
}
.cat-btn .cat-emoji{
    font-size:18px;
    width:28px;height:28px;
    display:flex;align-items:center;justify-content:center;
    border-radius:6px;
    background:rgba(var(--accent-rgb),0.1);
    flex-shrink:0;
}
.cat-btn .cat-count{
    margin-left:auto;
    font-size:10px;font-weight:600;
    color:var(--dim);
    background:var(--surface2);
    padding:2px 6px;border-radius:10px;
}

/* === MAIN CONTENT === */
.main-content{
    flex:1;
    padding:24px 28px;
    overflow-y:auto;
}

/* === CATEGORY HEADER === */
.category-header{
    margin-bottom:24px;
}
.category-icon{
    font-size:32px;display:inline-block;margin-bottom:4px;
}
.category-header h1{
    font-size:28px;font-weight:800;letter-spacing:-0.5px;
    color:var(--accent);
    margin-bottom:4px;
}
.category-desc{
    font-size:14px;color:var(--dim);line-height:1.5;
}

/* === SOUND GRID === */
.sound-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:10px;
    margin-bottom:24px;
}
.sound-card{
    position:relative;
    background:var(--surface2);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:16px 12px;
    text-align:center;
    cursor:pointer;
    transition:all 0.2s;
    user-select:none;
}
.sound-card:hover{
    border-color:var(--border-hover);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,0.3);
}
.sound-card.selected{
    border-color:var(--accent);
    background:rgba(var(--accent-rgb),0.06);
    box-shadow:0 0 20px rgba(var(--accent-rgb),0.1);
}
.sound-card.playing .sound-emoji{
    animation:sound-pulse 0.4s ease-out;
}
@keyframes sound-pulse{
    0%{transform:scale(1)}
    50%{transform:scale(1.3)}
    100%{transform:scale(1)}
}
.sound-emoji{
    font-size:28px;
    display:block;margin-bottom:8px;
    transition:transform 0.15s;
}
.sound-name{
    font-size:12px;font-weight:600;
    color:var(--text);
    line-height:1.3;
}

/* === TWEAK PANEL === */
.tweak-panel{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    animation:slideUp 0.25s ease-out;
}
.tweak-panel.hidden{display:none}
@keyframes slideUp{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
}
.tweak-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 20px;
    background:rgba(0,0,0,0.2);
    border-bottom:1px solid var(--border);
    flex-wrap:wrap;gap:10px;
}
.tweak-title-row{
    display:flex;align-items:center;gap:10px;
}
.tweak-icon{font-size:24px}
.tweak-header h2{
    font-size:18px;font-weight:700;
    color:var(--accent);
}
.tweak-actions{
    display:flex;gap:8px;flex-wrap:wrap;
}
.tweak-btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:8px 14px;border-radius:8px;
    font-size:12px;font-weight:600;
    border:1px solid var(--border);
    background:var(--surface2);
    color:var(--dim);cursor:pointer;
    transition:all 0.2s;
}
.tweak-btn:hover{border-color:var(--border-hover);color:var(--text)}
.tweak-btn-play{
    background:rgba(var(--accent-rgb),0.1);
    border-color:rgba(var(--accent-rgb),0.3);
    color:var(--accent);
    border-radius:50%;
    width:40px;height:40px;
    padding:0;display:flex;align-items:center;justify-content:center;
}
.tweak-btn-play:hover{
    box-shadow:0 0 16px rgba(var(--accent-rgb),0.2);
    border-color:var(--accent);
}
.tweak-btn-play.playing{
    background:rgba(var(--accent-rgb),0.2);
    box-shadow:0 0 16px rgba(var(--accent-rgb),0.3);
}
.tweak-btn-download{
    background:linear-gradient(135deg,rgba(57,255,20,0.08),rgba(0,229,255,0.08));
    border-color:rgba(57,255,20,0.3);
    color:var(--lime);
}
.tweak-btn-download:hover{
    border-color:var(--lime);
    box-shadow:0 0 12px rgba(57,255,20,0.15);
}
.tweak-btn-advanced{
    border-color:rgba(168,85,247,0.3);
    color:var(--purple);
}
.tweak-btn-advanced:hover{
    border-color:var(--purple);
    box-shadow:0 0 12px rgba(168,85,247,0.15);
}

/* === NAV BUTTONS (Prev/Next) === */
.tweak-nav-btn{
    background:var(--surface2);
    border:1px solid var(--border);
    color:var(--dim);
    font-size:14px;
    width:32px;height:32px;
    border-radius:6px;
    cursor:pointer;
    transition:all 0.2s;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.tweak-nav-btn:hover{
    border-color:var(--accent);
    color:var(--accent);
    box-shadow:0 0 8px rgba(var(--accent-rgb),0.15);
}

/* === RESET BUTTON === */
.tweak-btn-reset{
    border-color:rgba(255,255,255,0.15);
    color:var(--dim);
}
.tweak-btn-reset:hover{
    border-color:var(--text);
    color:var(--text);
}

/* === RANDOMIZE BUTTON === */
.tweak-btn-random{
    border-color:rgba(255,45,149,0.3);
    color:var(--pink);
}
.tweak-btn-random:hover{
    border-color:var(--pink);
    box-shadow:0 0 12px rgba(255,45,149,0.15);
}

/* === FAVORITE BUTTON === */
.tweak-btn-fav{
    border-color:rgba(255,215,0,0.3);
    color:#ffd700;
    font-size:13px;
}
.tweak-btn-fav:hover{
    border-color:#ffd700;
    box-shadow:0 0 12px rgba(255,215,0,0.15);
}
.tweak-btn-fav.saved{
    background:rgba(255,215,0,0.15);
    border-color:#ffd700;
    color:#ffd700;
}

/* === FAVORITES SIDEBAR === */
.cat-btn-fav .cat-emoji{
    background:rgba(255,215,0,0.15) !important;
}
.sidebar-divider{
    height:1px;
    background:var(--border);
    margin:6px 8px;
}

/* === FAVORITES GRID DELETE BUTTON === */
.sound-card .fav-delete{
    position:absolute;
    top:4px;right:4px;
    width:20px;height:20px;
    border-radius:50%;
    background:rgba(255,45,85,0.2);
    border:1px solid rgba(255,45,85,0.3);
    color:#ff2d55;
    font-size:11px;
    cursor:pointer;
    display:none;
    align-items:center;justify-content:center;
    transition:all 0.15s;
    line-height:1;
}
.sound-card:hover .fav-delete{display:flex}
.sound-card .fav-delete:hover{
    background:rgba(255,45,85,0.4);
    border-color:#ff2d55;
}

/* === LAYER BAR === */
.layer-bar{
    display:flex;align-items:center;gap:8px;
    padding:8px 20px;
    background:rgba(0,0,0,0.15);
    border-bottom:1px solid var(--border);
    flex-wrap:wrap;
}
.layer-bar.hidden{display:none}
.layer-pills{
    display:flex;gap:6px;
    flex-wrap:wrap;
}
.layer-pill{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 10px;
    border-radius:20px;
    border:1px solid var(--border);
    background:var(--surface2);
    color:var(--dim);
    font-size:12px;font-weight:600;
    cursor:pointer;
    transition:all 0.2s;
}
.layer-pill:hover{
    border-color:var(--border-hover);
    color:var(--text);
}
.layer-pill.active{
    border-color:var(--accent);
    color:var(--accent);
    background:rgba(var(--accent-rgb),0.08);
}
.layer-pill .layer-remove{
    width:16px;height:16px;
    border-radius:50%;
    background:rgba(255,45,85,0.15);
    border:none;
    color:#ff2d55;
    font-size:10px;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all 0.15s;
    padding:0;
}
.layer-pill .layer-remove:hover{
    background:rgba(255,45,85,0.35);
}
.layer-add-btn{
    display:inline-flex;align-items:center;
    padding:5px 12px;
    border-radius:20px;
    border:1px dashed var(--border);
    background:transparent;
    color:var(--dim);
    font-size:12px;font-weight:600;
    cursor:pointer;
    transition:all 0.2s;
}
.layer-add-btn:hover{
    border-color:var(--accent);
    color:var(--accent);
}

/* === TWEAK BODY === */
.tweak-body{
    display:flex;gap:20px;
    padding:16px 20px;
    align-items:flex-start;
}
.tweak-viz{
    width:200px;min-width:200px;
    height:120px;
    background:rgba(0,0,0,0.25);
    border:1px solid var(--border);
    border-radius:8px;
    overflow:hidden;
}
.tweak-viz canvas{
    width:100%;height:100%;display:block;
}
.tweak-sliders{
    flex:1;
    display:flex;flex-direction:column;gap:10px;
}

/* === EASY SLIDER === */
.easy-slider{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:0;
}
.easy-slider-label{
    font-size:13px;font-weight:600;
    color:var(--text);
    margin-bottom:4px;
    grid-column:1/-1;
}
.slider-lock{
    background:none;border:none;cursor:pointer;
    font-size:13px;padding:0 4px;
    opacity:0.4;transition:opacity 0.15s;
    margin-left:6px;
}
.slider-lock:hover{opacity:0.8;}
.slider-lock.locked{opacity:1;}
.easy-slider-left{
    font-size:11px;color:var(--dim);
    text-align:right;padding-right:10px;
}
.easy-slider-right{
    font-size:11px;color:var(--dim);
    text-align:left;padding-left:10px;
}
.easy-slider input[type="range"]{
    -webkit-appearance:none;appearance:none;
    width:100%;height:6px;
    background:var(--border);
    border-radius:3px;outline:none;
    cursor:pointer;
    min-width:200px;
}
.easy-slider input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:18px;height:18px;
    border-radius:50%;
    background:var(--accent);
    border:3px solid var(--surface);
    box-shadow:0 0 8px rgba(var(--accent-rgb),0.4);
    cursor:pointer;
    transition:box-shadow 0.15s;
}
.easy-slider input[type="range"]::-webkit-slider-thumb:hover{
    box-shadow:0 0 14px rgba(var(--accent-rgb),0.6);
    transform:scale(1.1);
}
.easy-slider input[type="range"]::-moz-range-thumb{
    width:18px;height:18px;
    border-radius:50%;
    background:var(--accent);
    border:3px solid var(--surface);
    box-shadow:0 0 8px rgba(var(--accent-rgb),0.4);
    cursor:pointer;
}

/* === HIDDEN UTILITY === */
.hidden{display:none!important}

/* === SCROLLBAR === */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}

/* === RESPONSIVE === */
@media(max-width:700px){
    .app-layout{flex-direction:column}
    .sidebar{
        width:100%;min-width:0;
        height:auto;position:static;
        flex-direction:row;flex-wrap:wrap;
        padding:10px;gap:6px;
        border-right:none;border-bottom:1px solid var(--border);
    }
    .sidebar-label{display:none}
    .cat-btn{width:auto;padding:8px 12px;font-size:12px}
    .cat-btn .cat-count{display:none}
    .main-content{padding:16px}
    .sound-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
    .tweak-body{flex-direction:column}
    .tweak-viz{width:100%;min-width:0;height:80px}
    .tweak-actions{width:100%}
}