:root {
    --bg: #0d0f14;
    --bg-soft: #11141b;

    --surface: #161a22;
    --surface-raised: #1c212b;
    --surface-hover: #232936;

    --border: #292f3b;
    --border-hover: #3b4352;

    --text: #f4f5f7;
    --text-muted: #949baa;
    --text-soft: #c4c8d0;

    --accent: #7c8cff;
    --accent-hover: #929fff;

    --accent-soft:
        rgba(
            124,
            140,
            255,
            0.12
        );

    --accent-border:
        rgba(
            124,
            140,
            255,
            0.38
        );

    --success: #4ade80;
    --warning: #facc15;
    --danger: #f87171;

    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 18px;

    --shadow-small:
        0 6px 20px
        rgba(
            0,
            0,
            0,
            0.16
        );

    --shadow-large:
        0 18px 50px
        rgba(
            0,
            0,
            0,
            0.28
        );

    --transition:
        0.18s ease;
}


/* =====================================================
   Base
===================================================== */

* {
    box-sizing:
        border-box;
}


html {
    color-scheme:
        dark;
}


body {
    margin:
        0;

    min-height:
        100vh;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(
                124,
                140,
                255,
                0.08
            ),
            transparent 32rem
        ),
        var(--bg);

    color:
        var(--text);
}


button,
input,
select,
a {
    font:
        inherit;
}


button,
a {
    -webkit-tap-highlight-color:
        transparent;
}


button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline:
        2px solid
        var(--accent);

    outline-offset:
        2px;
}


/* =====================================================
   Header
===================================================== */

.page-header {
    padding:
        58px 24px
        38px;

    text-align:
        center;
}


.header-icon {
    width:
        48px;

    height:
        48px;

    margin:
        0 auto
        16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--accent-border);

    border-radius:
        14px;

    background:
        var(--accent-soft);

    color:
        var(--accent);
}


.header-icon svg {
    width:
        25px;

    height:
        25px;
}


.page-header h1 {
    margin:
        0;

    font-size:
        clamp(
            32px,
            5vw,
            42px
        );

    line-height:
        1.1;

    letter-spacing:
        -0.035em;
}


.page-header p {
    margin:
        10px 0 0;

    color:
        var(--text-muted);

    font-size:
        15px;
}


/* =====================================================
   Main
===================================================== */

main {
    width:
        min(
            1120px,
            calc(
                100%
                - 40px
            )
        );

    margin:
        0 auto
        70px;
}


/* =====================================================
   Menu Button
===================================================== */

.menu-button {
    position:
        fixed;

    top:
        20px;

    left:
        20px;

    z-index:
        1100;

    width:
        44px;

    height:
        44px;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    background:
        rgba(
            22,
            26,
            34,
            0.94
        );

    color:
        var(--text);

    box-shadow:
        var(--shadow-small);

    cursor:
        pointer;

    transition:
        background
        var(--transition),

        border-color
        var(--transition),

        transform
        var(--transition);
}


.menu-button svg {
    width:
        21px;

    height:
        21px;
}


.menu-button:hover {
    background:
        var(--surface-hover);

    border-color:
        var(--border-hover);
}


.menu-button:active {
    transform:
        scale(0.95);
}


/* =====================================================
   Side Menu
===================================================== */

.side-menu {
    position:
        fixed;

    top:
        0;

    left:
        -300px;

    z-index:
        1000;

    width:
        280px;

    height:
        100vh;

    padding:
        78px 18px
        22px;

    background:
        rgba(
            18,
            21,
            28,
            0.98
        );

    border-right:
        1px solid
        var(--border);

    box-shadow:
        var(--shadow-large);

    transition:
        left
        0.22s ease;
}


.side-menu.open {
    left:
        0;
}


/* -------------------------
   Menu User
------------------------- */

.menu-user {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        22px;

    padding:
        12px 10px;

    border-bottom:
        1px solid
        var(--border);
}


.menu-user-icon {
    width:
        36px;

    height:
        36px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        var(--accent-soft);

    color:
        var(--accent);
}


.menu-user-icon svg {
    width:
        19px;

    height:
        19px;
}


.menu-user > div {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;
}


.menu-user strong {
    overflow:
        hidden;

    color:
        var(--text);

    font-size:
        14px;

    font-weight:
        700;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.menu-user span:not(
    .menu-user-icon
) {
    margin-top:
        2px;

    color:
        var(--accent);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.055em;

    text-transform:
        uppercase;
}


/* -------------------------
   Menu Links
------------------------- */

.menu-links {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.menu-link,
.menu-form-button {
    width:
        100%;

    display:
        grid;

    grid-template-columns:
        26px 1fr;

    align-items:
        center;

    gap:
        10px;

    padding:
        11px 12px;

    border:
        1px solid
        transparent;

    border-radius:
        10px;

    background:
        transparent;

    color:
        var(--text-soft);

    text-align:
        left;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        background
        var(--transition),

        color
        var(--transition),

        border-color
        var(--transition);
}


.menu-link:hover,
.menu-form-button:hover {
    background:
        var(--surface-raised);

    color:
        var(--text);
}


.menu-link.active {
    border-color:
        var(--accent-border);

    background:
        var(--accent-soft);

    color:
        var(--accent-hover);
}


.menu-icon {
    width:
        26px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.menu-icon svg {
    width:
        18px;

    height:
        18px;
}


.menu-text {
    text-align:
        left;

    font-size:
        14px;
}


.menu-form {
    margin:
        0;
}



/* =====================================================
   Soundboard Server Selector
===================================================== */

.soundboard-server-control {
    min-width: 0;
}

.soundboard-server-select {
    min-width: 180px;
    max-width: 240px;
    height: 38px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-raised);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition:
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.soundboard-server-select:hover {
    border-color: var(--border-hover);
}

.soundboard-server-select:focus {
    border-color: var(--accent-border);
    box-shadow: 0 0 0 3px rgba(124, 140, 255, 0.07);
}

.soundboard-server-empty {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--accent-border);
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-hover);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 850px) {
    .soundboard-server-control {
        width: 100%;
        justify-content: space-between;
    }

    .soundboard-server-form {
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }

    .soundboard-server-select {
        width: min(260px, 100%);
    }
}


/* =====================================================
   Control Panel
===================================================== */

.control-panel {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        24px;

    margin-bottom:
        48px;

    padding:
        16px 20px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-large);

    background:
        rgba(
            22,
            26,
            34,
            0.86
        );

    box-shadow:
        var(--shadow-small);
}


.control-group {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}


.control-label {
    color:
        var(--text-muted);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        0.055em;

    text-transform:
        uppercase;
}


.control-divider {
    width:
        1px;

    height:
        34px;

    flex-shrink:
        0;

    background:
        var(--border);
}


/* =====================================================
   Playback Selector
===================================================== */

.playback-options {
    display:
        flex;

    gap:
        4px;

    padding:
        4px;

    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    background:
        var(--bg);
}


.mode-button {
    min-height:
        36px;

    padding:
        8px 12px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border:
        1px solid
        transparent;

    border-radius:
        8px;

    background:
        transparent;

    color:
        var(--text-muted);

    font-size:
        13px;

    font-weight:
        650;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        background
        var(--transition),

        color
        var(--transition),

        border-color
        var(--transition),

        transform
        var(--transition);
}


.mode-button svg {
    width:
        16px;

    height:
        16px;
}


.mode-button:hover {
    color:
        var(--text);
}


.mode-button.active {
    border-color:
        var(--accent-border);

    background:
        var(--accent-soft);

    color:
        var(--accent-hover);
}


.mode-button:active {
    transform:
        scale(0.97);
}


.discord-locked {
    opacity:
        0.6;
}


.discord-locked:hover {
    opacity:
        1;

    background:
        var(--surface-raised);
}


.playback-lock {
    width:
        13px !important;

    height:
        13px !important;
}


/* =====================================================
   Volume
===================================================== */

.volume-control {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.volume-control > svg {
    width:
        18px;

    height:
        18px;

    color:
        var(--text-muted);
}


#volume-slider {
    width:
        170px;

    accent-color:
        var(--accent);

    cursor:
        pointer;
}


#volume-value {
    width:
        38px;

    color:
        var(--text-soft);

    font-size:
        13px;

    font-weight:
        650;

    text-align:
        right;
}


/* =====================================================
   Discord Status
===================================================== */

.discord-status {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.status-dot {
    width:
        8px;

    height:
        8px;

    flex-shrink:
        0;

    border-radius:
        50%;
}


.discord-status.connected
.status-dot {
    background:
        var(--success);

    box-shadow:
        0 0 10px
        rgba(
            74,
            222,
            128,
            0.45
        );
}


.discord-status.disconnected
.status-dot {
    background:
        #667080;
}


#discord-status-text {
    font-size:
        12px;

    font-weight:
        700;
}


.discord-channel {
    margin-top:
        2px;

    color:
        var(--text-muted);

    font-size:
        11px;
}


/* =====================================================
   Sound Sections
===================================================== */

.sound-section {
    margin-bottom:
        52px;
}


.section-heading {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        18px;
}


.section-heading > div {
    min-width:
        0;
}


.section-eyebrow {
    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--accent);

    font-size:
        11px;

    font-weight:
        750;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.section-heading h2 {
    margin:
        0;

    font-size:
        clamp(
            21px,
            4vw,
            26px
        );

    letter-spacing:
        -0.025em;
}


.section-heading-icon {
    width:
        38px;

    height:
        38px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    background:
        var(--surface);

    color:
        var(--text-muted);
}


.section-heading-icon svg {
    width:
        18px;

    height:
        18px;
}


.empty-message {
    margin:
        0 0 18px;

    padding:
        18px;

    border:
        1px dashed
        var(--border);

    border-radius:
        var(--radius-medium);

    color:
        var(--text-muted);

    text-align:
        center;

    font-size:
        14px;
}


/* =====================================================
   Sound Grid
===================================================== */

.sound-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                170px,
                1fr
            )
        );

    gap:
        16px;
}


/* =====================================================
   Sound Cards
===================================================== */

.sound-card {
    position:
        relative;

    min-width:
        0;

    min-height:
        158px;

    perspective:
        700px;
}


.sound-button {
    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    width:
        100%;

    height:
        100%;

    min-height:
        158px;

    padding:
        29px 18px
        22px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            var(
                --sound-accent-rgb,
                124,
                140,
                255
            ),
            0.20
        );

    border-radius:
        var(--radius-large);

    background:
        linear-gradient(
            155deg,
            rgba(
                31,
                36,
                47,
                0.98
            ),
            rgba(
                20,
                24,
                31,
                0.98
            )
        );

    color:
        var(--text);

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.035
        ),
        inset 0 -18px 35px
        rgba(
            0,
            0,
            0,
            0.12
        ),
        0 7px 20px
        rgba(
            0,
            0,
            0,
            0.17
        );

    cursor:
        pointer;

    transition:
        transform
        0.22s ease,

        border-color
        0.22s ease,

        box-shadow
        0.22s ease;
}


.sound-button::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    border-radius:
        inherit;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(
                var(
                    --sound-accent-rgb,
                    124,
                    140,
                    255
                ),
                0.11
            ),
            transparent 55%
        );

    opacity:
        0.35;

    pointer-events:
        none;

    transition:
        opacity
        0.25s ease;
}


.sound-button:hover {
    border-color:
        rgba(
            var(
                --sound-accent-rgb,
                124,
                140,
                255
            ),
            0.62
        );

    transform:
        translateY(-5px);

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.045
        ),
        0 16px 34px
        rgba(
            0,
            0,
            0,
            0.28
        ),
        0 0 26px
        rgba(
            var(
                --sound-accent-rgb,
                124,
                140,
                255
            ),
            0.11
        );
}


.sound-button:hover::after {
    opacity:
        0.8;
}


/* =====================================================
   Sound Icons
===================================================== */

.sound-icon {
    position:
        relative;

    z-index:
        2;

    width:
        58px;

    height:
        58px;

    margin-bottom:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            var(
                --sound-accent-rgb,
                124,
                140,
                255
            ),
            0.34
        );

    border-radius:
        15px;

    background:
        rgba(
            var(
                --sound-accent-rgb,
                124,
                140,
                255
            ),
            0.10
        );

    color:
        var(
            --sound-accent,
            var(--accent)
        );

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.04
        );

    transition:
        transform
        0.22s ease,

        box-shadow
        0.22s ease,

        background
        0.22s ease;
}


.sound-icon svg {
    width:
        29px;

    height:
        29px;

    stroke-width:
        1.8;
}


.sound-icon-default,
.sound-stop-icon {
    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.sound-stop-icon {
    display:
        none;
}


.sound-button.sound-playing
.sound-icon {
    border-color:
        rgba(
            248,
            113,
            113,
            0.48
        );

    background:
        rgba(
            248,
            113,
            113,
            0.13
        );

    color:
        #ff9aa4;

    cursor:
        pointer;

    box-shadow:
        0 0 24px
        rgba(
            248,
            113,
            113,
            0.13
        );
}


.sound-button.sound-playing
.sound-icon-default {
    display:
        none;
}


.sound-button.sound-playing
.sound-stop-icon {
    display:
        flex;
}


.sound-button.sound-playing
.sound-stop-icon svg {
    fill:
        currentColor;
}


.sound-button:hover
.sound-icon {
    transform:
        translateY(-3px)
        scale(1.06);

    background:
        rgba(
            var(
                --sound-accent-rgb,
                124,
                140,
                255
            ),
            0.15
        );

    box-shadow:
        0 0 25px
        rgba(
            var(
                --sound-accent-rgb,
                124,
                140,
                255
            ),
            0.16
        );
}


.sound-name {
    position:
        relative;

    z-index:
        2;

    width:
        100%;

    color:
        var(--text);

    font-size:
        15px;

    font-weight:
        700;

    text-align:
        center;

    overflow-wrap:
        anywhere;
}


/* =====================================================
   Icon Watermark
===================================================== */

.sound-watermark {
    position:
        absolute;

    right:
        -16px;

    bottom:
        -23px;

    z-index:
        0;

    color:
        var(
            --sound-accent,
            var(--accent)
        );

    opacity:
        0.035;

    transform:
        rotate(-11deg);

    pointer-events:
        none;

    transition:
        opacity
        0.25s ease,

        transform
        0.3s ease;
}


.sound-watermark svg {
    width:
        112px;

    height:
        112px;

    stroke-width:
        1.25;
}


.sound-button:hover
.sound-watermark {
    opacity:
        0.09;

    transform:
        rotate(-7deg)
        scale(1.08);
}


/* =====================================================
   Favorite Button
===================================================== */

.favorite-button {
    position:
        absolute;

    top:
        11px;

    right:
        11px;

    z-index:
        12;

    width:
        32px;

    height:
        32px;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        transparent;

    border-radius:
        9px;

    background:
        rgba(
            13,
            15,
            20,
            0.48
        );

    color:
        var(--text-muted);

    cursor:
        pointer;

    transition:
        color
        var(--transition),

        background
        var(--transition),

        border-color
        var(--transition),

        transform
        var(--transition),

        box-shadow
        var(--transition);
}


.favorite-button svg {
    width:
        17px;

    height:
        17px;
}


.favorite-button:hover {
    border-color:
        var(--accent-border);

    background:
        var(--accent-soft);

    color:
        var(--accent);

    transform:
        scale(1.06);
}


.favorite-button.active {
    color:
        var(--accent);

    background:
        var(--accent-soft);

    border-color:
        var(--accent-border);

    box-shadow:
        0 0 14px
        rgba(
            124,
            140,
            255,
            0.10
        );
}


.favorite-button.active svg {
    fill:
        currentColor;
}


/* =====================================================
   Sound Category
===================================================== */

.sound-category-chip {
    position:
        relative;

    z-index:
        2;

    margin-top:
        7px;

    padding:
        3px 7px;

    border:
        1px solid
        rgba(
            var(
                --sound-accent-rgb,
                124,
                140,
                255
            ),
            0.18
        );

    border-radius:
        999px;

    background:
        rgba(
            var(
                --sound-accent-rgb,
                124,
                140,
                255
            ),
            0.05
        );

    color:
        var(--text-muted);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}


/* =====================================================
   Playback Wave
===================================================== */

.sound-play-wave {
    position:
        absolute;

    left:
        50%;

    bottom:
        10px;

    z-index:
        3;

    height:
        16px;

    display:
        flex;

    align-items:
        center;

    gap:
        3px;

    opacity:
        0;

    transform:
        translateX(-50%)
        translateY(4px);
}


.sound-play-wave span {
    width:
        3px;

    height:
        4px;

    border-radius:
        999px;

    background:
        var(
            --sound-accent,
            var(--accent)
        );
}


.sound-triggered
.sound-play-wave {
    opacity:
        1;

    transform:
        translateX(-50%)
        translateY(0);
}


.sound-triggered
.sound-play-wave span {
    animation:
        tile-wave
        0.32s ease-in-out
        infinite alternate;
}


.sound-triggered
.sound-play-wave
span:nth-child(2) {
    animation-delay:
        -0.1s;
}


.sound-triggered
.sound-play-wave
span:nth-child(3) {
    animation-delay:
        -0.22s;
}


.sound-triggered
.sound-play-wave
span:nth-child(4) {
    animation-delay:
        -0.06s;
}


.sound-triggered
.sound-play-wave
span:nth-child(5) {
    animation-delay:
        -0.17s;
}


@keyframes tile-wave {

    from {
        height:
            4px;
    }

    to {
        height:
            14px;
    }
}


/* =====================================================
   Playback Trigger
===================================================== */

.sound-triggered {
    animation:
        sound-trigger
        0.62s ease;
}


.sound-triggered
.sound-icon {
    animation:
        icon-trigger
        0.52s ease;
}


@keyframes sound-trigger {

    0% {
        border-color:
            rgba(
                var(
                    --sound-accent-rgb
                ),
                0.40
            );

        box-shadow:
            0 0 0 0
            rgba(
                var(
                    --sound-accent-rgb
                ),
                0.45
            );
    }

    38% {
        border-color:
            var(
                --sound-accent
            );

        box-shadow:
            0 0 0 7px
            rgba(
                var(
                    --sound-accent-rgb
                ),
                0.09
            ),
            0 0 32px
            rgba(
                var(
                    --sound-accent-rgb
                ),
                0.20
            );

        transform:
            translateY(-2px)
            scale(1.015);
    }

    100% {
        box-shadow:
            0 0 0 15px
            rgba(
                var(
                    --sound-accent-rgb
                ),
                0
            );
    }
}


@keyframes icon-trigger {

    0% {
        transform:
            scale(1);
    }

    45% {
        transform:
            scale(1.16)
            rotate(-2deg);
    }

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


/* =====================================================
   Soundboard Hero
===================================================== */

.soundboard-hero {
    position:
        relative;

    overflow:
        hidden;

    padding-bottom:
        38px;
}


.hero-background-glow {
    position:
        absolute;

    top:
        -210px;

    left:
        50%;

    width:
        720px;

    height:
        390px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                124,
                140,
                255,
                0.22
            ),
            rgba(
                124,
                140,
                255,
                0.07
            ) 40%,
            transparent 72%
        );

    pointer-events:
        none;
}


.soundboard-hero > *:not(
    .hero-background-glow
) {
    position:
        relative;

    z-index:
        1;
}


.hero-icon {
    width:
        58px;

    height:
        58px;

    box-shadow:
        0 0 35px
        rgba(
            124,
            140,
            255,
            0.20
        );
}


.hero-icon svg {
    width:
        30px;

    height:
        30px;
}


.hero-eyebrow {
    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--accent);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.18em;
}


/* =====================================================
   Control Highlight
===================================================== */

.soundboard-control-panel {
    position:
        relative;

    overflow:
        hidden;

    margin-bottom:
        30px;
}


.soundboard-control-panel::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        18%;

    right:
        18%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                124,
                140,
                255,
                0.55
            ),
            transparent
        );
}


/* =====================================================
   Library Tools
===================================================== */

.library-tools {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        200px
        auto;

    gap:
        10px;

    margin-bottom:
        42px;
}


.sound-search {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        0 12px;

    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    background:
        rgba(
            22,
            26,
            34,
            0.86
        );

    box-shadow:
        var(--shadow-small);
}


.sound-search svg {
    width:
        17px;

    height:
        17px;

    flex-shrink:
        0;

    color:
        var(--text-muted);
}


.sound-search input {
    width:
        100%;

    padding:
        11px 0;

    border:
        none;

    background:
        transparent;

    color:
        var(--text);

    outline:
        none;
}


.sound-search input::placeholder {
    color:
        var(--text-muted);
}


.category-filter {
    min-width:
        150px;

    padding:
        10px 12px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    background:
        var(--surface);

    color:
        var(--text);

    cursor:
        pointer;
}


/* =====================================================
   Section Dividers
===================================================== */

.enhanced-section-heading {
    align-items:
        center;
}


.section-line {
    height:
        1px;

    flex:
        1;

    margin:
        0 6px;

    background:
        linear-gradient(
            90deg,
            var(--border),
            rgba(
                124,
                140,
                255,
                0.24
            ),
            var(--border)
        );
}


/* =====================================================
   Favorites Shelf
===================================================== */


.favorites-section > * {
    position:
        relative;

    z-index:
        1;
}


.favorites-divider {
    height:
        1px;

    flex:
        1;

    margin:
        0 6px;

    background:
        linear-gradient(
            90deg,
            rgba(
                124,
                140,
                255,
                0.34
            ),
            rgba(
                76,
                201,
                240,
                0.12
            ),
            transparent
        );
}


.favorites-heading-icon {
    width:
        40px;

    height:
        40px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            124,
            140,
            255,
            0.28
        );

    border-radius:
        12px;

    background:
        var(--accent-soft);

    color:
        var(--accent);
}


.favorites-heading-icon svg {
    width:
        19px;

    height:
        19px;

    fill:
        rgba(
            124,
            140,
            255,
            0.22
        );
}


.favorite-card
.sound-button::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        18%;

    right:
        18%;

    height:
        1px;

    z-index:
        3;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                var(
                    --sound-accent-rgb
                ),
                0.50
            ),
            transparent
        );
}


/* =====================================================
   Per-Sound Volume
===================================================== */

.sound-volume-button {
    position:
        absolute;

    top:
        11px;

    left:
        11px;

    z-index:
        12;

    width:
        30px;

    height:
        30px;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        transparent;

    border-radius:
        8px;

    background:
        rgba(
            13,
            15,
            20,
            0.48
        );

    color:
        var(--text-muted);

    cursor:
        pointer;

    transition:
        color
        var(--transition),

        background
        var(--transition),

        border-color
        var(--transition),

        transform
        var(--transition);
}


.sound-volume-button:hover {
    border-color:
        rgba(
            var(
                --sound-accent-rgb
            ),
            0.30
        );

    background:
        rgba(
            var(
                --sound-accent-rgb
            ),
            0.08
        );

    color:
        var(
            --sound-accent
        );

    transform:
        scale(1.05);
}


.sound-volume-button svg {
    width:
        15px;

    height:
        15px;
}


.sound-volume-popover {
    position:
        absolute;

    top:
        49px;

    left:
        10px;

    z-index:
        40;

    width:
        165px;

    padding:
        11px;

    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    background:
        #11151d;

    box-shadow:
        var(--shadow-large);
}


.sound-volume-popover[hidden] {
    display:
        none;
}


.sound-volume-label {
    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--text-muted);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.sound-volume-popover input {
    width:
        100%;

    accent-color:
        var(
            --sound-accent
        );
}


.sound-volume-value {
    display:
        block;

    margin-top:
        5px;

    color:
        var(--text-soft);

    font-size:
        11px;

    font-weight:
        700;

    text-align:
        right;
}


/* =====================================================
   Keybind Button
===================================================== */

.sound-keybind-button {
    position:
        absolute;

    top:
        50%;

    left:
        11px;

    z-index:
        12;

    width:
        30px;

    height:
        30px;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        transparent;

    border-radius:
        8px;

    background:
        rgba(
            13,
            15,
            20,
            0.48
        );

    color:
        var(--text-muted);

    cursor:
        pointer;

    transform:
        translateY(-50%);

    transition:
        color
        var(--transition),

        background
        var(--transition),

        border-color
        var(--transition),

        transform
        var(--transition);
}


.sound-keybind-button:hover {
    border-color:
        rgba(
            var(
                --sound-accent-rgb
            ),
            0.30
        );

    background:
        rgba(
            var(
                --sound-accent-rgb
            ),
            0.08
        );

    color:
        var(
            --sound-accent
        );

    transform:
        translateY(-50%)
        scale(1.05);
}


.sound-keybind-button svg {
    width:
        15px;

    height:
        15px;
}


/* =====================================================
   Keybind Popup
===================================================== */

.keybind-popover {
    position:
        absolute;

    top:
        49px;

    left:
        46px;

    z-index:
        45;

    width:
        220px;

    padding:
        13px;

    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    background:
        #11151d;

    box-shadow:
        var(--shadow-large);
}


.keybind-popover[hidden] {
    display:
        none;
}


.keybind-popover.recording {
    border-color:
        var(--accent-border);

    box-shadow:
        var(--shadow-large),
        0 0 24px
        rgba(
            124,
            140,
            255,
            0.10
        );
}


.keybind-title {
    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--text);

    font-size:
        12px;

    font-weight:
        750;
}


.keybind-prompt {
    display:
        block;

    color:
        var(--text-muted);

    font-size:
        11px;

    line-height:
        1.45;
}


.keybind-actions {
    display:
        flex;

    justify-content:
        flex-end;

    gap:
        7px;

    margin-top:
        11px;
}


.keybind-clear,
.keybind-cancel {
    padding:
        6px 9px;

    border-radius:
        7px;

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;
}


.keybind-clear {
    border:
        1px solid
        rgba(
            248,
            113,
            113,
            0.22
        );

    background:
        rgba(
            248,
            113,
            113,
            0.07
        );

    color:
        #ff9aa4;
}


.keybind-cancel {
    border:
        1px solid
        var(--border);

    background:
        var(--surface-raised);

    color:
        var(--text-soft);
}


/* =====================================================
   Keybind Badge
===================================================== */

.keybind-badge {
    position:
        absolute;

    right:
        10px;

    bottom:
        9px;

    z-index:
        4;

    max-width:
        calc(
            100%
            - 20px
        );

    padding:
        4px 7px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            var(
                --sound-accent-rgb
            ),
            0.22
        );

    border-radius:
        6px;

    background:
        rgba(
            13,
            15,
            20,
            0.72
        );

    color:
        var(
            --sound-accent
        );

    font-size:
        9px;

    font-weight:
        800;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.keybind-badge[hidden] {
    display:
        none;
}


/* =====================================================
   Smooth Favorite Reordering
===================================================== */

.favorite-drag-handle {
    position:
        absolute;

    left:
        11px;

    bottom:
        10px;

    z-index:
        14;

    width:
        30px;

    height:
        30px;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        transparent;

    border-radius:
        8px;

    background:
        rgba(
            13,
            15,
            20,
            0.48
        );

    color:
        var(--text-muted);

    cursor:
        grab;

    touch-action:
        none;

    opacity:
        0.72;

    transition:
        opacity
        var(--transition),

        color
        var(--transition),

        background
        var(--transition),

        border-color
        var(--transition),

        transform
        var(--transition),

        box-shadow
        var(--transition);
}


.favorite-drag-handle:hover {
    opacity:
        1;

    color:
        var(--sound-accent);

    border-color:
        rgba(
            var(--sound-accent-rgb),
            0.30
        );

    background:
        rgba(
            var(--sound-accent-rgb),
            0.08
        );

    transform:
        scale(1.06);
}


.favorite-drag-handle:active {
    cursor:
        grabbing;
}


.favorite-drag-handle svg {
    width:
        16px;

    height:
        16px;
}


.sound-card:not(
    .favorite-card
)
.favorite-drag-handle {
    display:
        none;
}


.favorite-card.favorite-moving {
    position:
        fixed;

    z-index:
        1000;

    margin:
        0;

    border-radius:
        var(--radius-large);

    overflow:
        hidden;

    pointer-events:
        none;

    transform:
        translateY(-8px)
        scale(1.045);

    opacity:
        1;

    outline:
        none;

    filter:
        brightness(1.08);

    box-shadow:
        0 22px 44px
        rgba(0, 0, 0, 0.38),
        0 8px 18px
        rgba(0, 0, 0, 0.26),
        0 0 0 1px
        rgba(
            var(--sound-accent-rgb),
            0.22
        );

    transition:
        box-shadow
        0.12s ease,

        filter
        0.12s ease,

        transform
        0.12s ease;
}


.favorite-drag-placeholder {
    border:
        1px dashed
        rgba(
            var(--sound-accent-rgb, 124, 140, 255),
            0.30
        );

    border-radius:
        var(--radius-large);

    background:
        rgba(255, 255, 255, 0.025);

    box-sizing:
        border-box;
}


.favorite-card.favorite-moving
.favorite-drag-handle {
    cursor:
        grabbing;

    opacity:
        1;

    color:
        var(--sound-accent);

    background:
        rgba(
            var(--sound-accent-rgb),
            0.12
        );
}


.favorites-reordering
.favorite-card:not(
    .favorite-moving
) {
    transition:
        transform
        0.16s ease;
}


.favorite-drag-active {
    user-select:
        none;
}


/* =====================================================
   Cooldown
===================================================== */

.sound-card.cooldown
.sound-button {
    opacity:
        0.42;

    pointer-events:
        none;
}


.sound-card.cooldown::after {
    content:
        "COOLDOWN";

    position:
        absolute;

    inset:
        0;

    z-index:
        30;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        var(--radius-large);

    background:
        rgba(
            13,
            15,
            20,
            0.35
        );

    color:
        var(--text);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    pointer-events:
        none;
}


/* =====================================================
   Toasts
===================================================== */

#toast-container {
    position:
        fixed;

    top:
        20px;

    right:
        20px;

    z-index:
        2000;

    width:
        min(
            360px,
            calc(
                100vw
                - 40px
            )
        );

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}


.toast {
    padding:
        13px 15px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-medium);

    background:
        var(--surface-raised);

    color:
        var(--text);

    box-shadow:
        var(--shadow-large);

    opacity:
        0;

    transform:
        translateY(-8px);

    transition:
        opacity
        0.2s ease,

        transform
        0.2s ease;
}


.toast.show {
    opacity:
        1;

    transform:
        translateY(0);
}


.toast-error {
    border-color:
        rgba(
            248,
            113,
            113,
            0.4
        );

    background:
        #2b191d;

    color:
        #ffb8be;
}


.toast-success {
    border-color:
        rgba(
            74,
            222,
            128,
            0.4
        );

    background:
        #15271d;

    color:
        #9aebb1;
}



/* =====================================================
   Large Desktop
===================================================== */

@media (
    min-width: 1200px
) {

    .sound-grid {
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(
                    190px,
                    1fr
                )
            );

        gap:
            18px;
    }


    
}


/* =====================================================
   Tablet
===================================================== */

@media (
    max-width: 850px
) {

    .control-panel {
        flex-wrap:
            wrap;

        gap:
            16px 20px;
    }


    .control-divider {
        display:
            none;
    }
}


/* =====================================================
   Mobile
===================================================== */

@media (
    max-width: 600px
) {

    .page-header {
        padding:
            70px 20px
            30px;
    }


    main {
        width:
            calc(
                100%
                - 24px
            );

        margin-bottom:
            45px;
    }


    .menu-button {
        top:
            14px;

        left:
            14px;

        width:
            42px;

        height:
            42px;
    }


    .side-menu {
        width:
            min(
                280px,
                calc(
                    100vw
                    - 28px
                )
            );
    }


    .control-panel {
        align-items:
            stretch;

        padding:
            15px;

        border-radius:
            15px;
    }


    .control-group {
        width:
            100%;

        justify-content:
            space-between;
    }


    .playback-options {
        flex:
            1;

        max-width:
            270px;
    }


    .mode-button {
        flex:
            1;
    }


    .volume-control {
        flex:
            1;

        justify-content:
            flex-end;
    }


    #volume-slider {
        width:
            min(
                155px,
                42vw
            );
    }


    .discord-status {
        width:
            100%;

        justify-content:
            center;
    }


    .library-tools {
        grid-template-columns:
            1fr;

        margin-bottom:
            32px;
    }


    .category-filter {
        width:
            100%;
    }


    .sound-section {
        margin-bottom:
            38px;
    }


    .sound-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            11px;
    }


    .sound-card,
    .sound-button {
        min-height:
            145px;
    }


    .sound-button {
        padding:
            27px 10px
            20px;

        border-radius:
            14px;
    }


    .sound-icon {
        width:
            50px;

        height:
            50px;

        margin-bottom:
            11px;

        border-radius:
            13px;
    }


    .sound-icon svg {
        width:
            26px;

        height:
            26px;
    }


    .sound-name {
        font-size:
            14px;
    }


    .favorite-button {
        top:
            8px;

        right:
            8px;

        width:
            30px;

        height:
            30px;
    }


    .sound-volume-button {
        top:
            8px;

        left:
            8px;
    }


    .sound-keybind-button {
        top:
            50%;

        left:
            8px;
    }


    .sound-volume-popover {
        top:
            43px;

        left:
            7px;

        width:
            145px;
    }


    .keybind-popover {
        top:
            43px;

        left:
            7px;

        width:
            min(
                210px,
                calc(
                    100vw
                    - 45px
                )
            );
    }


    .favorite-drag-handle {
        left:
            8px;

        bottom:
            7px;

        width:
            27px;

        height:
            27px;
    }


    


    .section-line,
    .favorites-divider {
        display:
            none;
    }


    .sound-watermark svg {
        width:
            85px;

        height:
            85px;
    }


    .sound-category-chip {
        font-size:
            8px;

        padding:
            2px 6px;
    }


    .sound-play-wave {
        bottom:
            7px;
    }


    #toast-container {
        top:
            12px;

        right:
            12px;

        left:
            12px;

        width:
            auto;
    }
}


/* =====================================================
   Very Small Screens
===================================================== */

@media (
    max-width: 380px
) {

    .control-label {
        display:
            none;
    }


    .playback-options {
        max-width:
            none;
    }


    #volume-slider {
        width:
            min(
                160px,
                48vw
            );
    }
}


/* =====================================================
   Reduced Motion
===================================================== */

@media (
    prefers-reduced-motion:
    reduce
) {

    .sound-button,
    .sound-icon,
    .sound-play-wave span,
    .favorite-card,
    .favorite-drag-handle {
        animation:
            none !important;

        transition:
            none !important;
    }
}



/* =====================================================
   Soundboard Controls and Responsive Layout
===================================================== */

/* Let each section size to its content, then distribute the remaining room evenly. */
.soundboard-control-panel {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-evenly;

    width:
        100%;

    gap:
        clamp(
            18px,
            2vw,
            32px
        );
}


.soundboard-control-panel > .control-divider {
    width:
        1px;

    height:
        38px;

    flex:
        0 0 1px;

    margin:
        0;

    align-self:
        center;

    background:
        var(--border);
}


.playback-group,
.soundboard-server-control,
.discord-status-group {
    flex:
        0 1 auto;
}


.playback-group,
.soundboard-server-control {
    width:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;
}


.playback-group .control-label,
.soundboard-server-control .control-label {
    margin:
        0;

    line-height:
        1;
}


.playback-options,
.soundboard-server-controls {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;
}


.soundboard-server-form {
    margin:
        0;
}


.soundboard-server-select {
    min-width:
        180px;

    max-width:
        260px;
}


/* Restore the Add-to-Discord action styling. */
.soundboard-server-action {
    min-height:
        38px;

    padding:
        0 11px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    flex-shrink:
        0;

    border:
        1px solid
        var(--accent-border);

    border-radius:
        10px;

    background:
        var(--accent-soft);

    color:
        var(--accent-hover);

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none;

    white-space:
        nowrap;

    transition:
        border-color var(--transition),
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}


.soundboard-server-action:hover {
    border-color:
        var(--accent);

    background:
        rgba(
            124,
            140,
            255,
            0.16
        );

    color:
        var(--accent-hover);

    transform:
        translateY(-1px);
}


.soundboard-server-action svg {
    width:
        15px;

    height:
        15px;
}


.discord-status-group,
.discord-status,
.discord-status-line {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.discord-status {
    gap:
        9px;
}


.discord-status-line {
    gap:
        5px;
}


.discord-refresh-inline {
    width:
        24px;

    height:
        24px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    border:
        0;

    border-radius:
        7px;

    background:
        transparent;

    color:
        var(--text-muted);

    text-decoration:
        none;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}


.discord-refresh-inline:hover {
    background:
        var(--surface-raised);

    color:
        var(--text);

    transform:
        rotate(12deg);
}


.discord-refresh-inline svg {
    width:
        14px;

    height:
        14px;
}


/* Search, category and master-volume row. */
.library-tools {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        200px
        minmax(280px, auto);

    align-items:
        stretch;

    gap:
        10px;

    margin-bottom:
        42px;
}


.library-volume {
    box-sizing:
        border-box;

    min-width:
        280px;

    min-height:
        44px;

    padding:
        8px 12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    background:
        rgba(
            22,
            26,
            34,
            0.86
        );

    box-shadow:
        var(--shadow-small);
}


.library-volume .volume-control {
    flex:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.library-volume #volume-slider {
    width:
        170px;
}


/* Keep library sections inside the normal page container. */
.favorites-section {
    width:
        100%;

    margin-left:
        0;

    margin-right:
        0;

    transform:
        none;
}


/* Wrap naturally before the content becomes cramped. */
@media (
    max-width: 1050px
) {

    .soundboard-control-panel {
        flex-wrap:
            wrap;

        justify-content:
            center;

        row-gap:
            16px;
    }


    .soundboard-control-panel > .control-divider {
        display:
            none;
    }


    .library-tools {
        grid-template-columns:
            minmax(0, 1fr)
            190px;
    }


    .library-volume {
        grid-column:
            1 / -1;

        width:
            100%;
    }
}


@media (
    max-width: 600px
) {

    .playback-group,
    .soundboard-server-control {
        width:
            100%;

        flex-wrap:
            wrap;

        justify-content:
            center;

        text-align:
            center;
    }


    .playback-options,
    .soundboard-server-controls {
        justify-content:
            center;
    }


    .soundboard-server-controls {
        width:
            100%;

        flex-wrap:
            wrap;
    }


    .soundboard-server-form {
        flex:
            1 1 180px;
    }


    .soundboard-server-select {
        width:
            100%;

        max-width:
            none;
    }


    .discord-status-group,
    .discord-status,
    .discord-status-line {
        justify-content:
            center;
    }


    .library-tools {
        grid-template-columns:
            1fr;
    }


    .library-volume {
        grid-column:
            auto;

        min-width:
            0;
    }


    .library-volume #volume-slider {
        width:
            min(
                180px,
                42vw
            );
    }
}


/* =====================================================
   Favorites
===================================================== */

/*
   Keep Favorites visually connected to the rest of the Soundboard.
   A restrained accent border and very light tint distinguish it
   without turning it into a separate visual style.
*/
.favorites-section {
    position:
        relative;

    width:
        100%;

    margin-left:
        0;

    margin-right:
        0;

    padding:
        24px;

    overflow:
        hidden;

    border:
        1px solid
        var(--accent-border);

    border-radius:
        var(--radius-large);

    background:
        linear-gradient(
            135deg,
            rgba(124, 140, 255, 0.055),
            rgba(22, 26, 34, 0.92) 38%,
            rgba(22, 26, 34, 0.92)
        );

    box-shadow:
        var(--shadow-small);

    transform:
        none;
}


/* Remove the older decorative glow/highlight treatment. */
.favorites-section::before,
.favorites-section::after {
    content:
        none;

    display:
        none;
}


/* Keep the heading recognizable without overpowering the sound tiles. */
.favorites-section .section-eyebrow {
    color:
        var(--accent-hover);
}


@media (
    max-width: 600px
) {

    .favorites-section {
        padding:
            18px;
    }
}


/* =====================================================
   Discord Disconnect
===================================================== */

.discord-disconnect-inline {
    width:
        24px;

    height:
        24px;

    padding:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    border:
        0;

    border-radius:
        7px;

    background:
        transparent;

    color:
        var(--text-muted);

    cursor:
        pointer;

    transition:
        background var(--transition),
        color var(--transition);
}


.discord-disconnect-inline:hover {
    background:
        rgba(
            248,
            113,
            113,
            0.10
        );

    color:
        #ff9aa4;
}


.discord-disconnect-inline svg {
    width:
        14px;

    height:
        14px;
}


/* =====================================================
   Soundboard - Phase 3 Interaction Alignment
   Preserve established layout; align only interaction
   and accessibility behavior with secondary pages.
===================================================== */

.soundboard-page {
    --soundboard-ui-fast:
        120ms;

    --soundboard-ui-standard:
        180ms;
}


.soundboard-page
button,
.soundboard-page
a,
.soundboard-page
.sound-button,
.soundboard-page
.favorite-button {
    transition-duration:
        var(--soundboard-ui-standard);
}


.soundboard-page
button:focus-visible,
.soundboard-page
a:focus-visible,
.soundboard-page
input:focus-visible,
.soundboard-page
select:focus-visible,
.soundboard-page
.sound-button:focus-visible,
.soundboard-page
.favorite-button:focus-visible {
    outline:
        2px solid
        var(--accent);

    outline-offset:
        2px;

    box-shadow:
        0 0 0 3px
        rgba(
            124,
            140,
            255,
            0.12
        );
}


.soundboard-page
button:disabled,
.soundboard-page
input:disabled,
.soundboard-page
select:disabled {
    opacity:
        0.48;

    cursor:
        not-allowed;
}


@media (
    pointer: coarse
) {

    .soundboard-page
    button,
    .soundboard-page
    a,
    .soundboard-page
    .favorite-button {
        min-height:
            44px;
    }


    .soundboard-page
    input,
    .soundboard-page
    select {
        font-size:
            16px;
    }
}


@media (
    prefers-reduced-motion: reduce
) {

    .soundboard-page *,
    .soundboard-page *::before,
    .soundboard-page *::after {
        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }
}


/* =====================================================
   Application Feedback & Confirmation
===================================================== */

.toast-region {
    position:
        fixed;

    top:
        20px;

    right:
        20px;

    z-index:
        2000;

    width:
        min(
            360px,
            calc(
                100vw
                - 32px
            )
        );

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    pointer-events:
        none;
}


.app-toast {
    min-height:
        48px;

    padding:
        11px 12px;

    display:
        grid;

    grid-template-columns:
        auto
        minmax(
            0,
            1fr
        )
        auto;

    align-items:
        center;

    gap:
        10px;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    background:
        rgba(
            20,
            24,
            31,
            0.97
        );

    color:
        var(--text);

    box-shadow:
        0 16px 42px
        rgba(
            0,
            0,
            0,
            0.32
        );

    opacity:
        0;

    transform:
        translateY(-8px)
        scale(0.98);

    transition:
        opacity 180ms ease,
        transform 180ms ease;

    pointer-events:
        auto;
}


.app-toast.visible {
    opacity:
        1;

    transform:
        translateY(0)
        scale(1);
}


.app-toast-success {
    border-color:
        rgba(
            74,
            222,
            128,
            0.28
        );
}


.app-toast-error {
    border-color:
        rgba(
            248,
            113,
            113,
            0.30
        );
}


.app-toast-icon {
    width:
        30px;

    height:
        30px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px;

    background:
        var(--accent-soft);

    color:
        var(--accent-hover);
}


.app-toast-success
.app-toast-icon {
    background:
        rgba(
            74,
            222,
            128,
            0.08
        );

    color:
        #9cebb4;
}


.app-toast-error
.app-toast-icon {
    background:
        rgba(
            248,
            113,
            113,
            0.08
        );

    color:
        #ffabb3;
}


.app-toast-icon svg,
.app-toast-close svg {
    width:
        16px;

    height:
        16px;
}


.app-toast-text {
    min-width:
        0;

    font-size:
        12px;

    font-weight:
        650;

    line-height:
        1.4;
}


.app-toast-close {
    width:
        30px;

    height:
        30px;

    padding:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    border-radius:
        8px;

    background:
        transparent;

    color:
        var(--text-muted);

    cursor:
        pointer;
}


.app-toast-close:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.05
        );

    color:
        var(--text);
}


.app-confirm-dialog {
    width:
        min(
            430px,
            calc(
                100vw
                - 32px
            )
        );

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        var(--text);
}


.app-confirm-dialog::backdrop {
    background:
        rgba(
            6,
            8,
            12,
            0.72
        );

    backdrop-filter:
        blur(5px);
}


.app-confirm-card {
    padding:
        22px;

    display:
        grid;

    grid-template-columns:
        auto
        minmax(
            0,
            1fr
        );

    gap:
        14px;

    border:
        1px solid
        var(--border);

    border-radius:
        16px;

    background:
        linear-gradient(
            150deg,
            rgba(
                29,
                34,
                44,
                0.99
            ),
            rgba(
                20,
                24,
                31,
                0.99
            )
        );

    box-shadow:
        0 24px 70px
        rgba(
            0,
            0,
            0,
            0.46
        );
}


.app-confirm-icon {
    width:
        40px;

    height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            248,
            113,
            113,
            0.25
        );

    border-radius:
        11px;

    background:
        rgba(
            248,
            113,
            113,
            0.07
        );

    color:
        #ffabb3;
}


.app-confirm-icon svg {
    width:
        19px;

    height:
        19px;
}


.app-confirm-copy h2 {
    margin:
        2px 0
        6px;

    font-size:
        18px;

    line-height:
        1.2;
}


.app-confirm-copy p {
    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        12px;

    line-height:
        1.5;
}


.app-confirm-eyebrow {
    color:
        var(--text-muted);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.app-confirm-actions {
    grid-column:
        1 / -1;

    display:
        flex;

    justify-content:
        flex-end;

    gap:
        8px;

    margin-top:
        4px;
}


.button-spinner {
    width:
        14px;

    height:
        14px;

    display:
        inline-block;

    border:
        2px solid
        currentColor;

    border-right-color:
        transparent;

    border-radius:
        50%;

    animation:
        button-spin 0.7s linear infinite;
}


@keyframes button-spin {
    to {
        transform:
            rotate(360deg);
    }
}


/* =====================================================
   Branded Error Pages
===================================================== */

.error-page {
    min-height:
        100vh;

    display:
        grid;

    place-items:
        center;

    padding:
        24px;
}


.error-page-card {
    width:
        min(
            560px,
            100%
        );

    padding:
        34px;

    border:
        1px solid
        var(--border);

    border-radius:
        20px;

    background:
        linear-gradient(
            150deg,
            rgba(
                29,
                34,
                44,
                0.94
            ),
            rgba(
                20,
                24,
                31,
                0.98
            )
        );

    text-align:
        center;

    box-shadow:
        0 20px 58px
        rgba(
            0,
            0,
            0,
            0.28
        );
}


.error-page-icon {
    width:
        52px;

    height:
        52px;

    margin:
        0 auto
        15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--accent-border);

    border-radius:
        15px;

    background:
        var(--accent-soft);

    color:
        var(--accent);
}


.error-page-icon svg {
    width:
        25px;

    height:
        25px;
}


.error-page-code {
    display:
        block;

    color:
        var(--accent);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.12em;
}


.error-page-card h1 {
    margin:
        6px 0
        9px;

    font-size:
        clamp(
            28px,
            5vw,
            38px
        );
}


.error-page-card p {
    max-width:
        430px;

    margin:
        0 auto
        20px;

    color:
        var(--text-muted);

    font-size:
        13px;

    line-height:
        1.55;
}


.error-page-actions {
    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        9px;
}


@media (
    max-width: 600px
) {

    .toast-region {
        top:
            12px;

        right:
            12px;

        width:
            calc(
                100vw
                - 24px
            );
    }


    .app-confirm-card,
    .error-page-card {
        padding:
            20px;
    }


    .app-confirm-actions {
        flex-direction:
            column-reverse;
    }


    .app-confirm-actions button {
        width:
            100%;
    }
}


/* =====================================================
   Soundboard Discord Status - Stable Control Spacing
===================================================== */

/*
   Reserve one consistent footprint for Discord status so
   connecting/disconnecting voice does not redistribute the
   other controls in the top bar.
*/
.soundboard-control-panel
.discord-status-group {
    flex:
        0 0 190px;

    width:
        190px;

    min-width:
        190px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.soundboard-control-panel
.discord-status {
    width:
        100%;

    justify-content:
        center;
}


.soundboard-control-panel
.discord-status
> div {
    min-width:
        0;

    flex:
        1;

    text-align:
        center;
}


.soundboard-control-panel
.discord-status-line {
    position:
        relative;

    width:
        100%;

    min-height:
        24px;

    justify-content:
        center;

    padding:
        0 29px;
}


.soundboard-control-panel
#discord-status-text {
    flex:
        0 1 auto;

    text-align:
        center;

    white-space:
        nowrap;
}


.soundboard-control-panel
.discord-refresh-inline {
    position:
        absolute;

    right:
        29px;
}


.soundboard-control-panel
.discord-disconnect-inline {
    position:
        absolute;

    right:
        0;
}


.soundboard-control-panel
.discord-channel {
    width:
        100%;

    overflow:
        hidden;

    text-align:
        center;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


@media (
    max-width: 600px
) {

    .soundboard-control-panel
    .discord-status-group {
        flex:
            0 1 190px;

        width:
            190px;

        min-width:
            0;
    }
}


/* =====================================================
   Soundboard Discord Status - Inline Alignment Fix
===================================================== */

/*
   Keep the status dot attached to the centered status
   content, and keep Refresh / Disconnect inline with the
   connection text instead of underneath it.
*/
.soundboard-control-panel
.discord-status {
    width:
        auto;

    justify-content:
        center;

    gap:
        7px;
}


.soundboard-control-panel
.discord-status
> div {
    flex:
        0 1 auto;

    width:
        auto;

    text-align:
        center;
}


.soundboard-control-panel
.discord-status-line {
    position:
        static;

    width:
        auto;

    min-height:
        24px;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;
}


.soundboard-control-panel
#discord-status-text {
    flex:
        0 0 auto;
}


.soundboard-control-panel
.discord-refresh-inline,
.soundboard-control-panel
.discord-disconnect-inline {
    position:
        static;

    right:
        auto;

    flex:
        0 0 24px;
}


.soundboard-control-panel
.discord-channel {
    width:
        auto;

    max-width:
        155px;

    margin-left:
        auto;

    margin-right:
        auto;
}


/* =====================================================
   Soundboard Discord Status - Final Text Alignment
===================================================== */

/*
   Align the status dot with the primary status line rather
   than the full two-line status block.
*/
.soundboard-control-panel
.discord-status {
    position:
        relative;

    gap:
        0;
}


.soundboard-control-panel
.discord-status
> .status-dot {
    position:
        absolute;

    top:
        12px;

    left:
        -1px;

    transform:
        translateY(-50%);
}


.soundboard-control-panel
.discord-status
> div {
    width:
        100%;

    padding-left:
        15px;

    padding-right:
        0;
}


/*
   Keep both status lines centered to the same axis.
*/
.soundboard-control-panel
.discord-status-line,
.soundboard-control-panel
.discord-channel {
    width:
        100%;

    max-width:
        none;

    margin-left:
        0;

    margin-right:
        0;

    text-align:
        center;
}


.soundboard-control-panel
.discord-channel {
    padding-right:
        29px;

    padding-left:
        29px;
}


/* =====================================================
   Soundboard Discord Status - Inline Channel Layout
===================================================== */

/*
   Present connection state and channel as one compact row:
   dot | Discord Connected | channel | refresh | disconnect
*/
.soundboard-control-panel
.discord-status {
    position:
        static;

    width:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;
}


.soundboard-control-panel
.discord-status
> .status-dot {
    position:
        static;

    top:
        auto;

    left:
        auto;

    transform:
        none;

    align-self:
        center;
}


.soundboard-control-panel
.discord-status
> div {
    width:
        auto;

    padding:
        0;

    display:
        flex;

    flex-direction:
        row;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;
}


.soundboard-control-panel
.discord-status-line {
    width:
        auto;

    min-height:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    padding:
        0;
}


.soundboard-control-panel
#discord-status-text {
    white-space:
        nowrap;
}


.soundboard-control-panel
.discord-channel {
    width:
        auto;

    max-width:
        115px;

    margin:
        0;

    padding:
        4px 7px;

    overflow:
        hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    background:
        var(--surface-raised);

    color:
        var(--text-soft);

    font-size:
        10px;

    font-weight:
        650;

    line-height:
        1;

    text-align:
        center;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.soundboard-control-panel
.discord-refresh-inline,
.soundboard-control-panel
.discord-disconnect-inline {
    position:
        static;

    right:
        auto;
}


@media (
    max-width: 700px
) {

    .soundboard-control-panel
    .discord-status
    > div {
        flex-wrap:
            wrap;
    }


    .soundboard-control-panel
    .discord-channel {
        max-width:
            150px;
    }
}


/* =====================================================
   Discord Status - Final Inline Order
   dot | connected text | channel | refresh | leave
===================================================== */

.soundboard-control-panel
.discord-status
> div {
    display:
        contents;
}


.soundboard-control-panel
.discord-status-line {
    display:
        contents;
}


.soundboard-control-panel
.status-dot {
    order:
        1;
}


.soundboard-control-panel
#discord-status-text {
    order:
        2;

    flex:
        0 0 auto;
}


.soundboard-control-panel
.discord-channel {
    order:
        3;

    flex:
        0 1 auto;

    max-width:
        120px;
}


.soundboard-control-panel
.discord-refresh-inline {
    order:
        4;

    flex:
        0 0 24px;
}


.soundboard-control-panel
.discord-disconnect-inline {
    order:
        5;

    flex:
        0 0 24px;
}


.soundboard-control-panel
.discord-status {
    flex-wrap:
        nowrap;

    gap:
        6px;
}


/* =====================================================
   Soundboard Top Bar - Targeted Width Protection
===================================================== */

/*
   Preserve the approved one-row layout.
   Allow the three groups to shrink naturally before they overlap.
*/
.soundboard-control-panel {
    column-gap:
        clamp(
            12px,
            1.6vw,
            26px
        );
}


.playback-group,
.soundboard-server-control,
.discord-status-group {
    min-width:
        0;
}


.playback-group {
    flex:
        0 1 auto;
}


.soundboard-server-control {
    flex:
        1 1 auto;
}


.soundboard-control-panel
.discord-status-group {
    flex:
        0 1 auto;

    width:
        auto;

    min-width:
        0;
}


.soundboard-server-select {
    width:
        clamp(
            145px,
            18vw,
            240px
        );

    min-width:
        0;
}


.soundboard-control-panel
.discord-status {
    max-width:
        100%;
}


.soundboard-control-panel
#discord-status-text {
    white-space:
        nowrap;
}


.soundboard-control-panel
.discord-channel {
    max-width:
        clamp(
            78px,
            10vw,
            120px
        );
}


/*
   Only at genuinely narrow desktop/tablet widths,
   slightly tighten labels and button padding.
   The bar remains a single row.
*/
@media (
    max-width: 900px
) {

    .soundboard-control-panel {
        gap:
            10px;
    }


    .playback-group,
    .soundboard-server-control {
        gap:
            8px;
    }


    .mode-button,
    .soundboard-server-action {
        padding-left:
            9px;

        padding-right:
            9px;
    }


    .soundboard-control-panel
    .discord-status {
        gap:
            5px;
    }
}


/* =====================================================
   Discord Disconnected - Simplified Status
===================================================== */

.soundboard-control-panel
.discord-status.disconnected
.discord-channel {
    display:
        none;
}


.soundboard-control-panel
.discord-status.disconnected {
    justify-content:
        center;
}


.soundboard-control-panel
.discord-status.disconnected
#discord-status-text {
    max-width:
        none;

    overflow:
        visible;

    white-space:
        nowrap;

    text-align:
        center;
}


/* =====================================================
   Soundboard Top Controls - Narrow Screen Polish
===================================================== */

@media (
    max-width: 650px
) {

    .soundboard-control-panel {
        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        justify-content:
            center;

        gap:
            14px;

        padding:
            18px;
    }


    .soundboard-control-panel
    > .control-divider {
        display:
            none;
    }


    .playback-group,
    .soundboard-server-control,
    .discord-status-group {
        width:
            100%;

        min-width:
            0;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            8px;

        text-align:
            center;
    }


    .playback-group
    .control-label,
    .soundboard-server-control
    .control-label {
        width:
            100%;

        margin:
            0;

        text-align:
            center;
    }


    .playback-options {
        width:
            min(
                100%,
                270px
            );

        justify-content:
            center;
    }


    .playback-options
    .mode-button {
        flex:
            1 1 0;

        min-width:
            0;
    }


    .soundboard-server-controls {
        width:
            min(
                100%,
                300px
            );

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        flex-wrap:
            nowrap;

        gap:
            8px;
    }


    .soundboard-server-form {
        min-width:
            0;

        flex:
            1 1 auto;
    }


    .soundboard-server-select {
        width:
            100%;

        min-width:
            0;

        max-width:
            none;
    }


    .soundboard-server-action {
        flex:
            0 0 auto;
    }


    .soundboard-control-panel
    .discord-status-group {
        width:
            100%;

        min-width:
            0;

        flex:
            0 0 auto;
    }


    .soundboard-control-panel
    .discord-status {
        width:
            100%;

        max-width:
            100%;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        flex-wrap:
            nowrap;

        gap:
            6px;
    }


    .soundboard-control-panel
    #discord-status-text {
        white-space:
            nowrap;
    }


    .soundboard-control-panel
    .discord-channel {
        max-width:
            105px;
    }
}


@media (
    max-width: 430px
) {

    .soundboard-control-panel {
        padding:
            16px 14px;
    }


    .soundboard-server-controls {
        width:
            100%;
    }


    .soundboard-control-panel
    .discord-status {
        gap:
            5px;
    }


    .soundboard-control-panel
    #discord-status-text {
        font-size:
            11px;
    }


    .soundboard-control-panel
    .discord-channel {
        max-width:
            90px;

        padding-left:
            6px;

        padding-right:
            6px;
    }
}


/* =====================================================
   Mobile Sound Tile Double-Tap Zoom Protection
===================================================== */

/*
   Sound tiles are tap controls. Prevent browser double-tap
   zoom on the whole interactive tile while preserving normal
   vertical page scrolling.
*/
.sound-button,
.sound-button *,
.favorite-card,
.favorite-card * {
    touch-action:
        manipulation;
}


/*
   Keep text/icons inside sound tiles from being treated as
   separate tap targets by mobile browsers.
*/
.sound-button
.sound-name,
.sound-button
.sound-icon,
.sound-button
.sound-watermark,
.sound-button
.sound-category-chip,
.favorite-card
.sound-name,
.favorite-card
.sound-icon,
.favorite-card
.sound-watermark,
.favorite-card
.sound-category-chip {
    -webkit-user-select:
        none;

    user-select:
        none;
}


/* =====================================================
   Error Page Actions
===================================================== */

.error-page-actions {
    margin-top:
        4px;
}


.error-page-button {
    min-height:
        40px;

    padding:
        0 14px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border:
        1px solid
        transparent;

    border-radius:
        9px;

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1;

    text-decoration:
        none !important;

    cursor:
        pointer;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}


.error-page-button svg {
    width:
        16px;

    height:
        16px;
}


.error-page-button-primary {
    border-color:
        var(--accent-border);

    background:
        var(--accent-soft);

    color:
        var(--accent-hover);
}


.error-page-button-primary:hover {
    border-color:
        rgba(
            124,
            140,
            255,
            0.55
        );

    background:
        rgba(
            124,
            140,
            255,
            0.16
        );

    color:
        var(--text);

    transform:
        translateY(-1px);
}


.error-page-button-secondary {
    border-color:
        var(--border);

    background:
        var(--surface-raised);

    color:
        var(--text-soft);
}


.error-page-button-secondary:hover {
    border-color:
        var(--accent-border);

    background:
        var(--accent-soft);

    color:
        var(--text);

    transform:
        translateY(-1px);
}


.error-page-button:active {
    transform:
        translateY(0)
        scale(0.98);
}


.error-page-button:focus-visible {
    outline:
        2px solid
        var(--accent);

    outline-offset:
        2px;

    box-shadow:
        0 0 0 3px
        rgba(
            124,
            140,
            255,
            0.12
        );
}


@media (
    max-width: 520px
) {

    .error-page-actions {
        flex-direction:
            column;
    }


    .error-page-button {
        width:
            100%;
    }
}