@font-face {
    font-family: PxPlusChipPlayer;
    src: url(/static/media/pxplus_chipplayer.85e11d57.ttf) format('truetype');
}

:root { --fontPxPlusChipPlayer: 24px/19px PxPlusChipPlayer; }

/* Caveras fonts commented out - missing from repository
@font-face {
    src: url(caveras/Arcology.woff) format('woff');
    font-family: Arcology;
}

:root { --fontArcology: 8px Arcology; }

@font-face {
    src: url(caveras/ChronoType.woff) format('woff');
    font-family: ChronoType;
}

:root { --fontChronoType: 16px ChronoType; }

@font-face {
    src: url(caveras/Ishmeria.woff) format('woff');
    font-family: Ishmeria;
}

:root { --fontIshmeria: 16px Ishmeria; }

@font-face {
    src: url(caveras/MMRock9.woff) format('woff');
    font-family: MMRock9;
}

:root { --fontMMRock9: 8px MMRock9; }

@font-face {
    src: url(caveras/NDS12.woff) format('woff');
    font-family: NDS12;
}

:root { --fontNDS12: 10px NDS12; }

@font-face {
    src: url(caveras/Quarlow.woff) format('woff');
    font-family: Quarlow;
}

:root { --fontQuarlow: 16px Quarlow; }

@font-face {
    src: url(caveras/Reactor7.woff) format('woff');
    font-family: Reactor7;
}

:root { --fontReactor7: 16px Reactor7; }
*/

/* int10h and pentacom fonts commented out - missing from repository
@font-face {
    src: url(int10h/WebPlus_ToshibaSat_9x14.woff) format('woff');
    font-family: Stingray;
}

:root { --fontStingray: 14px/16px Stingray; }

@font-face {
    src: url(pentacom/DeckardsRegular.ttf) format('truetype');
    font-family: DeckardsRegular;
}

:root { --fontDeckardsRegular: 16px DeckardsRegular; }

@font-face {
    src: url(pentacom/FutureKid.ttf) format('truetype');
    font-family: FutureKid;
}

:root { --fontFutureKid: 16px FutureKid; }

@font-face {
    src: url(pentacom/ldcBlackRound.ttf) format('truetype');
    font-family: ldcBlackRound;
}

:root { --fontldcBlackRound: 16px ldcBlackRound; }

@font-face {
    src: url(pentacom/RobotoBitmap.ttf) format('truetype');
    font-family: RobotoBitmap;
}

:root { --fontRobotoBitmap: 16px RobotoBitmap; }
*/

/* CUSTOM FONTS - Easy to swap by changing these declarations */

/* Main body font - used for most UI elements */
/* Using Google Fonts Silkscreen (loaded from index.html) */
:root { --fontMain: 14px/16px 'Silkscreen', monospace; }

/* Accent font - used for section headers, song titles, settings labels */
/* Using Google Fonts Silkscreen (loaded from index.html) */
:root { --fontAccent: 14px/16px 'Silkscreen', monospace; }

/* Title font - used for main site header "Homskillet Discography" */
/* Nixdorf 8810 M15 from The Ultimate Oldschool PC Font Pack by VileR */
/* Licensed under CC BY-SA 4.0 - See OLDSCHOOL_PC_FONTS_LICENSE.txt */
/* https://int10h.org/oldschool-pc-fonts/ */
@font-face {
    src: url(/static/media/Web437_Nix8810_M15.2a2af41a.woff) format('woff');
    font-family: 'Nixdorf_M15';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root { --fontTitle: 20px/24px 'Nixdorf_M15', monospace; }

/* OTHER AVAILABLE FONTS - Uncomment and swap into main/accent above to use:

   IBM XGA-AI 12x20 - Tall, clean IBM font
   @font-face {
       src: url(Web437_IBM_XGA-AI_12x20.woff) format('woff');
       font-family: 'IBM_XGA';
   }
   Usage: --fontMain: 14px/16px 'IBM_XGA', monospace;

   Robotron A7100 - Bold retro PC terminal style
   @font-face {
       src: url(Web437_Robotron_A7100.woff) format('woff');
       font-family: 'Robotron';
   }
   Usage: --fontMain: 14px/16px 'Robotron', monospace;

   All fonts from The Ultimate Oldschool PC Font Pack by VileR
   Licensed under CC BY-SA 4.0 - See OLDSCHOOL_PC_FONTS_LICENSE.txt
   https://int10h.org/oldschool-pc-fonts/
*/

@font-face {
    src: url(/static/media/mm-tahoma-8px.0f8d846f.ttf) format('truetype');
    font-family: TahomaPixel;
}

:root { --fontTahomaPixel: 16px/16px TahomaPixel, Tahoma; }

@font-face {
    src: url(/static/media/Tahoma.fefb39ee.woff) format('woff');
    font-family: Tahoma;
}

:root { --fontTahoma: 11px/16px Tahoma, Arial, sans-serif; }

:root {
    --charH:       19px;
    --charW1:       8px;
    --charW2:      16px;
    --charW2neg:  -16px;
    --railH:        3px;
    --knobW:        8px;
    --knobH:       19px;
    --buttonHeight: var(--charH);
    --rowHeight:    var(--charH);

    /* Theme: Metallic Wing Green */
    /* Colors from: Grayscales (#101010, #202020, #7F7F7F, #C3C3C3, #FEFEFE) + Greens (#9BFE38, #66CB01) */
    /* Strategy: Monochrome base with selective green accents for emphasis */

    /* ACCENT COLORS - Change these two values to swap the entire theme's accent colors! */
    --accent:       #9BFE38; /* Light Green - main accent (playing songs, hover feedback, title) */
    --accent-dark:  #66CB01; /* Dark Green - darker accent for active/pressed states */

    --clickable:  #C3C3C3; /* Light Gray - most interactive elements */
    --active:     var(--accent-dark); /* Use dark accent for active/pressed states */
    --button:     #202020; /* Dark Gray - button background */
    --selected:   var(--accent); /* Use accent for selected items */
    --focus:      #202020; /* Dark Gray - subtle focus indication */
    --background: #101010; /* Black - main background */
    --shadow:     #000000; /* Pure black - shadows */
    --neutral0:   #101010; /* Black */
    --neutral1:   #202020; /* Dark Gray */
    --neutral2:   #7F7F7F; /* Medium Gray - body text */
    --neutral3:   #C3C3C3; /* Light Gray - emphasized text */
    --neutral4:   #FEFEFE; /* White - headings, high contrast */
}

.grid { /* utility class for testing the character grid */
    background-image:
        repeating-linear-gradient(
            to right, #fff1 0px, #fff1 1px, #fff0 1px, #fff0 var(--charW1)),
        repeating-linear-gradient(
            to bottom, #fff2 0px, #fff2 1px, #fff0 1px, #fff0 var(--charH));
}

.App * {
    font: var(--font);
    -webkit-font-smoothing: antialiased; /* supports Japanese characters better than 'none' */
    -moz-osx-font-smoothing: grayscale; /* Firefox */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    text-decoration: none;
}

:root {
    --font: var(--fontMain);
    --font-accent: var(--fontAccent);
    --font-title: var(--fontTitle);

    --message-box-background: var(--button);
    --message-box-color: var(--clickable);
    --message-box-info-text-color: var(--clickable);
    --message-box-inner-border: 1px solid var(--clickable);
    --message-box-box-shadow: var(--charW1) var(--charW1) var(--shadow);
    --box-shadow: var(--charW1) var(--charW1) var(--shadow);
    --hide-mtime-column-below-width: 800px;
}

/* chunky DOS animation */
.message-box { -webkit-transition: all 250ms steps(5); transition: all 250ms steps(5); }
.toast-box-outer { -webkit-transition: all 150ms steps(4); transition: all 150ms steps(4); }

*::-moz-selection {
    background: rgba(170, 170, 170, 0.99);
    color: var(--background);
}

*::selection {
    background: rgba(170, 170, 170, 0.99);
    color: var(--background);
}

a:active { background: var(--active); }

a:focus,
button:focus,
select:focus,
input:focus,
input[type=checkbox]:focus,
input[type=radio]:focus,
input[type=range]:focus {
    outline: none;
    background-color: var(--focus);
}

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

/* Basic elements */

body {
    background: var(--background);
    overflow: hidden;
    color: var(--neutral2);
}

/* Margins in one direction (bottom) */
h1, h2, h3, h4, h5, h6 {
    &:first-child {
        margin: 0 0 var(--charH) 0;
    }
    color: var(--neutral4);
    margin: var(--charH) 0;
    padding: 0;
    font: var(--font-accent) !important;
}

p { margin: 0 0 var(--charH) 0; }

a {
    text-decoration: none;
    color: var(--clickable);
    cursor: pointer;
}

a:visited { color: var(--clickable); }

/* Form elements */

button {
    border: none;
    border-radius: 0;
    padding: 0;
    text-wrap: nowrap;
    -ms-flex-item-align: start;
        align-self: start;
    -moz-appearance: none;
    -webkit-appearance: none;
    color: var(--clickable);
}
select {
    border: none;
    border-radius: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    padding: 0 calc(var(--charW1) * 3) 0 var(--charW1);
    color: var(--clickable);
    background-color: var(--button);
    background-image: /* A little down-arrow */
            linear-gradient(60deg, transparent 50%, var(--clickable) 50%),
            linear-gradient(120deg, var(--clickable) 50%, transparent 50%);
    background-position: calc(100% - var(--charW1)*1.5) 5px, calc(100% - var(--charW1)) 5px;
    background-size: calc(var(--charW1)*0.5) 12px, calc(var(--charW1)*0.5) 12px;
    background-repeat: no-repeat;
    max-width: 224px;
}
select option                { font-size: 14px; }
.Song-now-playing .FavoriteButton:not(.isFavorite) { color: var(--background); }
@media screen and (max-width: 800px) { .BrowseList-colMtime { display: none } }
@container (max-width: 800px) { .BrowseList-colMtime { display: none } }
button:active   { background: var(--active); }
button:disabled { background: var(--neutral1); color: var(--neutral3); }
.box-button     { background: var(--button); -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); white-space: pre; padding: 0 var(--charW2); display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: center; align-items: center; gap: var(--charW1); }
.box-button:hover { background: #FEFEFE; color: #101010; /* White bg, black text - hover guidance */ }
.box-button:hover .inline-icon { background-color: #101010; /* Black icon on white bg */ }
.box-button:active { -webkit-box-shadow: none; box-shadow: none; background: var(--accent); color: #101010; /* Accent bg, black text - electrify! */ }
.box-button:active .inline-icon { background-color: #101010; /* Black icon on accent bg */ }

.tab {
    padding: 0 15px 0 15px;
    background: transparent;
    border: 1px solid var(--clickable);
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    height: var(--charH);
}

.tab-selected {
    border-bottom: 1px solid var(--background);
    background: var(--background);
    margin-bottom: -1px;
    height: calc(var(--charH) + 1px);
}
input[type=checkbox],
input[type=radio] {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0 var(--charW1) 0 0;
    color: #7F7F7F; /* Medium Gray - darker when unchecked */
    white-space: pre;  /* prevent iOS Safari text wrapping */
}

input[type=checkbox]:before         { content: '[u00A0]'; } /* Non-breaking space for consistent width */
input[type=checkbox]:checked:before { content: '[x]'; color: #C3C3C3; /* Light Gray - active but not prominent */ }
input[type=checkbox]:hover:before   { color: #FEFEFE; /* White - hover guidance */ }
input[type=checkbox]:active:before  { color: var(--accent); /* Accent - electrify on click */ }

input[type=radio]:before            { content: '( )'; }
input[type=radio]:checked:before    { content: '(\2022)'; color: #C3C3C3; /* Light Gray - active but not prominent */ }
input[type=radio]:hover:before      { color: #FEFEFE; /* White - hover guidance */ }
input[type=radio]:active:before     { color: var(--accent); /* Accent - electrify on click */ }
input[type=text]::-moz-selection                 { background-color: #FFFFFF; }
input[type=text]::selection                 { background-color: #FFFFFF; }
input[type=text]::-webkit-input-placeholder { color: var(--neutral1) }

input[type=text] {
    border: 0;
    border-radius: 0;
    background-color: var(--neutral2);
    color: var(--background);
    padding: 0 var(--charW1);
    width: 256px;
    height: var(--charH); /* Firefox */
}

.inline { display: inline-block; margin-right: var(--charW1);   }
.inline:last-child { margin-right: 0; }

input[type=range] {
    margin: 0;
    -webkit-appearance: none;
    background: transparent;
    vertical-align: bottom;
    height: var(--charH); /* Firefox */
    width: 128px; /* Firefox */
}
input[type=range]::-webkit-slider-runnable-track {
    height: var(--railH);
    border: 1px solid #7F7F7F; /* Medium Gray - darker rail */
    margin: var(--charW1) 0;
}
input[type=range]::-moz-range-track { /* Firefox */
    height: var(--railH);
    border: 1px solid #7F7F7F; /* Medium Gray - darker rail */
    margin: var(--charW1) 0;
    box-sizing: border-box;
}

input[type=range]:disabled::-webkit-slider-runnable-track { border-color: var(--neutral2); }
input[type=range]:disabled::-moz-range-track { border-color: var(--neutral2); } /* Firefox */
input[type=range]:disabled::-webkit-slider-thumb { background: var(--neutral2); }
input[type=range]:disabled::-moz-range-thumb { background: var(--neutral2); } /* Firefox */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: var(--clickable);
    height: var(--knobH);
    margin-top: calc(var(--knobH) / -2);
    width: var(--knobW);
}
input[type=range]:hover::-webkit-slider-thumb {
    background: #FEFEFE; /* White - hover guidance */
}
input[type=range]:active::-webkit-slider-thumb {
    background: var(--accent); /* Accent - electrify on click */
}
input[type=range]::-moz-range-thumb { /* Firefox */
    -moz-appearance: none;
         appearance: none;
    background: var(--clickable);
    border: 0;
    border-radius: 0;
    height: var(--knobH);
    margin-top: calc(var(--knobH) / -2);
    width: var(--knobW);
}
input[type=range]:hover::-moz-range-thumb {
    background: #FEFEFE; /* White - hover guidance */
}
input[type=range]:active::-moz-range-thumb {
    background: var(--accent); /* Accent - electrify on click */
}

/* Component overrides */

body,#root {
    margin: 0;
}

.App {
    padding: 0 var(--charW2);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-variant-numeric: tabular-nums;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

@media (orientation: portrait), (max-width: 768px) {
    .App {
        padding: 0 var(--charW1);
    }

    /* Adjust negative margins to match reduced padding */
    .AppHeader,
    .App-main,
    .AppFooter {
        margin-left: calc(var(--charW1) * -1);
        margin-right: calc(var(--charW1) * -1);
    }
}

.AppHeader {
    padding: var(--charH) var(--charW2);
    margin: 0 var(--charW2neg) 0 var(--charW2neg);
    border-bottom: 1px solid var(--clickable);
    -ms-flex-positive: 0;
        flex-grow: 0;
}

@media (orientation: portrait), (max-width: 768px) {
    .AppHeader {
        padding: calc(var(--charH) / 2) var(--charW2);
        margin-bottom: calc(var(--charH) / 2);
    }
}

.AppHeader-subtitle {
    margin: var(--charH) 0 0 0;
}

.AppHeader-title, .AppHeader-title:visited, .AppHeader-title:link {
    color: var(--accent); /* Accent - bright pop for main title */
    font: var(--font-title) !important;
}

.AppHeader-byline {
    float: right;
}

.App-main {
    -ms-flex-positive: 1;
        flex-grow: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    overflow: hidden;
    height: 100%;
    margin: 0 var(--charW2neg);
    margin-top: -1px; /* shrink by 1px for top border of tabs */
}

@media (orientation: portrait), (max-width: 768px) {
    .App-main {
        -ms-flex-direction: column;
            flex-direction: column;
        -ms-flex-positive: 1;
            flex-grow: 1; /* Take remaining space */
        -ms-flex-negative: 1;
            flex-shrink: 1; /* Allow shrinking to make room for footer */
        min-height: 0; /* Allow flex shrinking below content size */
        overflow: hidden; /* Contain tab content */
    }
}

.App-main-inner {
    -ms-flex-positive: 1;
        flex-grow: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    min-width: 1px; /* prevents content width priority */
    margin-right: -1px; /* hide the right border of the content area */
}

.App-main-content-and-settings {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    overflow: hidden;
    -ms-flex-positive: 1;
        flex-grow: 1;
}

@media (orientation: portrait), (max-width: 768px) {
    .App-main-inner {
        -ms-flex-positive: 1;
            flex-grow: 1; /* Fill available space */
        -ms-flex-negative: 1;
            flex-shrink: 1; /* Allow shrinking */
        min-height: 0; /* Allow flex shrinking below content size */
        overflow: hidden; /* Contain scrollable content */
    }

    .App-main-content-and-settings {
        -ms-flex-direction: column;
            flex-direction: column;
        -ms-flex-positive: 1;
            flex-grow: 1; /* Fill available space */
        -ms-flex-negative: 1;
            flex-shrink: 1; /* Allow shrinking */
        min-height: 0; /* Allow flex shrinking below content size */
        overflow: hidden; /* Contain scrollable content */
    }
}

.App-main-content-area {
    -ms-flex-positive: 1;
        flex-grow: 1;
    /*display: flex;*/
    -ms-flex-direction: column;
        flex-direction: column;
    min-width: 0;
    padding: var(--charH) var(--charW2) 0 var(--charW2);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    border-right: 1px solid var(--clickable);
    container-type: size;
}
.App-main-content-area:focus { /* I have no idea why this became focusable */
    background-color: initial;
}

.ReactVirtualized__Grid:focus {
    outline: none;
}

.App-main-content-area.settings {
    width: 368px;
    min-width: 368px;
    -ms-flex-positive: 0;
        flex-grow: 0;
    padding: var(--charH) var(--charW2);
}

@media (orientation: portrait), (max-width: 768px) {
    .App-main-content-area.settings {
        width: 100%;
        min-width: 0;
        border-right: none;
        max-height: none; /* Remove height limit - let it show all controls */
        overflow-y: auto; /* Scroll if content overflows */
        height: 100%; /* Fill available space */
    }

    .App-main-content-area:not(.settings) {
        border-right: none;
        -ms-flex-positive: 1;
            flex-grow: 1; /* Fill available space */
        overflow-y: auto; /* Scroll if needed */
        height: 100%; /* Fill available space */
    }
}

.SongDisplay {
    padding: var(--charH) var(--charW2);
    color: var(--accent); /* Accent - pop of color for currently playing song title */
    font: var(--font-accent) !important;
    border-top: 1px solid var(--clickable);
    margin: 0 var(--charW2neg);
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.AppFooter {
    border-top: 1px solid var(--clickable);
    margin: 0 var(--charW2neg);
    -ms-flex-negative: 0;
        flex-shrink: 0;
    height: auto; /* Let content determine height */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row; /* Horizontal layout for main content and art */
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; /* Allow wrapping to put attribution on its own line */
    -ms-flex-line-pack: start;
        align-content: flex-start; /* Align wrapped content to top */
    position: relative;
}

@media (orientation: portrait), (max-width: 768px) {
    .AppFooter {
        height: auto;
        min-height: 200px; /* Taller to fit everything */
        -ms-flex-direction: column;
            flex-direction: column; /* Stack children vertically */
    }

    .AppFooter-attribution {
        padding: calc(var(--charH) / 2) var(--charW1);
        margin-top: var(--charH); /* Space above */
        font-size: 0.7em;
    }

    .AppFooter-main {
        -ms-flex-order: 0;
            order: 0; /* Controls first */
        -ms-flex-negative: 0;
            flex-shrink: 0; /* Don't shrink controls */
    }

    .AppFooter-art {
        display: none; /* Hide album art on mobile to save space */
    }
}

.AppFooter-attribution {
    width: 100%;
    text-align: center;
    padding: calc(var(--charH) / 4) var(--charW1);
    font-size: 0.8em;
    color: var(--neutral2);
    background: var(--background);
    font: var(--font-accent) !important;
    border-top: 1px solid var(--clickable); /* Divider line */
    -ms-flex-order: 999;
        order: 999; /* Always at bottom */
}

.AppFooter-attribution a {
    pointer-events: auto; /* Re-enable clicks on links */
    color: var(--accent); /* Accent - pop of color for attribution links */
    font: var(--font-title) !important;
}

.AppFooter-attribution a:hover {
    text-decoration: underline;
}

.AppFooter-art {
    width: 210px;
    height: 210px;
    background-color: var(--neutral0);
    -o-object-fit: scale-down;
       object-fit: scale-down;
    image-rendering: unset;
    border-left: 1px solid var(--clickable);
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

@media screen and (max-width: 600px) {
    .AppFooter-art, .AppFooter-shuffle, .AppFooter-repeat { display: none; }
}

button.box-button.AppFooter-forward,
button.box-button.AppFooter-back { padding: 0 var(--charW1); }

.AppFooter-main {
    -ms-flex-positive: 1;
        flex-grow: 1;
    -ms-flex-preferred-size: 0;
        flex-basis: 0; /* Allow it to shrink/grow from 0 */
    min-height: 210px; /* Ensure controls have space */
    overflow: hidden;
    padding: var(--charH) var(--charW2);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    container-type: size;
}

@media (orientation: portrait), (max-width: 768px) {
    .AppFooter-main {
        overflow: visible; /* Allow content to be visible on mobile */
        padding: calc(var(--charH) / 2) var(--charW1);
    }
}

.AppFooter-settings {
    border-left: 1px solid var(--clickable);
    padding: var(--charH) var(--charW2);
    max-width: 360px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.App-voice-label {
    width: calc(var(--charW1) * 18);
    white-space: nowrap;
}
.App-voice-label:hover label {
    color: #FEFEFE; /* White - hover guidance for label */
}
.App-voice-label:has(input:active) label {
    color: var(--accent); /* Accent - electrify label on click */
}

.AppFooter-controls-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    gap: var(--charW1);
    white-space: nowrap;
    margin: var(--charH) 0;
}

@media (orientation: portrait), (max-width: 768px) {
    .AppFooter-controls-row {
        margin: calc(var(--charH) / 2) 0;
    }
}

.AppFooter-controls-row .box-button {
    height: calc(var(--charH) * 1.5);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
}

.AppFooter-secondary-controls {
    margin-top: 0;
}

.AppFooter-secondary-controls .box-button {
    height: var(--charH);
}

.AppFooter-play-pause .inline-icon {
    width: 32px !important;
    height: calc(var(--charH) * 1.5);
}

.Slider {
    height: var(--charH);
    padding: 0;
    cursor: pointer;
    position: relative;
    width: calc(100% - var(--knobW));
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border: 0;
}

.Slider-rail {
    width: calc(100% + var(--knobW));
    height: var(--railH);
    background: none;
    position: absolute;
    top: calc((var(--charH) - var(--railH)) / 2);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border: 1px solid #7F7F7F; /* Medium Gray - darker rail */
}

.Slider-knob {
    height: var(--knobH);
    width: var(--knobW);
    top: calc((var(--charH) - var(--knobH)) / 2);
    margin: 0;
    border-radius: 0px;
    background-color: var(--clickable);
    position: absolute;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
.Slider:hover .Slider-knob {
    background-color: #FEFEFE; /* White - hover guidance */
}
.Slider:active .Slider-knob {
    background-color: var(--accent); /* Accent - electrify on click */
}

.Browse-topRow {
    display: -ms-flexbox;
    display: flex; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: var(--charH); gap: var(--charW2);
    min-height: var(--buttonHeight);
    position: sticky;
    top: 0;
    background: var(--background);
    z-index: 10;
    padding-bottom: var(--charH);
    border-bottom: 1px solid var(--clickable);
    margin-bottom: 0;
}

.BrowseList-row { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; height: var(--rowHeight); }
/* Selected */
.ReactVirtualized__Grid:focus .BrowseList-row-selected {
    background-color: #202020; /* Dark Gray - subtle selection, no bright green backgrounds */
}
/* Playing */
.App-main .App-main-content-area .Song-now-playing {
    -webkit-box-shadow: 0 0 0 1px var(--accent);
            box-shadow: 0 0 0 1px var(--accent); /* Green border for playing song - using box-shadow to prevent overlap issues */
    position: relative; /* Ensure proper stacking */
    z-index: 1; /* Lift above adjacent rows */
    color: var(--accent); /* Accent text color for currently playing */
}
.Song-now-playing a {
    color: var(--accent); /* Accent - links inside currently playing song */
}
/* Selected AND Playing */
.ReactVirtualized__Grid:focus .BrowseList-row-selected.Song-now-playing {
    background-color: #202020; /* Dark Gray background from selection */
    -webkit-box-shadow: 0 0 0 1px var(--accent);
            box-shadow: 0 0 0 1px var(--accent); /* Green border from playing */
    z-index: 1; /* Lift above adjacent rows */
}
.BrowseList-row:hover {
    color: var(--neutral4);
    background-color: #202020; /* Dark Gray - subtle background on hover */
}
.BrowseList-row:hover a { color: var(--neutral4); } /* Song title highlights on hover */
.BrowseList-row a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.BrowseList-colName { overflow: hidden; -ms-flex-positive: 1; flex-grow: 1; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; gap: calc(var(--charW1) / 2); }
.BrowseList-colName a { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.BrowseList-colDir, .BrowseList-colSize { -ms-flex-negative : 0; flex-shrink : 0; margin-left: calc(var(--charW1) * 2); }
.BrowseList-colCount { -ms-flex-negative : 0; flex-shrink : 0; margin-left: var(--charW1); width: calc(var(--charW1) * 5); text-align: right; }
.BrowseList-colMtime { text-align: right; text-transform: uppercase; white-space: nowrap; min-width: calc(var(--charW1) * 12); }
.BrowseList-colSize { text-align: right; text-transform: uppercase; white-space: nowrap; min-width: calc(var(--charW1) * 10); }

.DirectoryLink-dim { color: var(--neutral2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.PlayerParams h3 { margin-top: 0; }
.PlayerParams-param { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; }
.PlayerParams-param:hover .PlayerParams-label {
    color: #FEFEFE; /* White - hover guidance for label */
}
.PlayerParams-param:has(input:active) .PlayerParams-label {
    color: var(--accent); /* Accent - electrify label on click */
}
.PlayerParams-param input { margin-right: var(--charW1); -ms-flex-negative: 0; flex-shrink: 0; }
.PlayerParams-group-title { width: 100%; font: var(--font-accent) !important; color: #C3C3C3; /* Light Gray - section headers */ }
.PlayerParams-voiceList {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-column-gap: var(--charW1);
       -moz-column-gap: var(--charW1);
            column-gap: var(--charW1);
    margin-right: calc(var(--charW1) * -1);
    max-width: calc(var(--charW1) * 60);
}
.PlayerParams-label { -ms-flex-negative: 0; flex-shrink: 0; width: calc(var(--charW1) * 14); margin-right: var(--charW1); color: #C3C3C3; /* Light Gray - setting labels */ }
.PlayerParams-group { margin-bottom: var(--charH); }

button.FavoriteButton:active { color: var(--clickable); }
button.FavoriteButton.isFavorite { color: var(--clickable); }
button.FavoriteButton {
    cursor: pointer;
    color: var(--button);
    background: initial;
    padding: 0 var(--charW1);
}
button.IconButton {
    cursor: pointer;
    color: var(--neutral2);
    background: initial;
    padding: 0;
    margin-left: -8px;
}

/*.Song-now-playing .Trash-button { background: var(--button); }*/
.Trash-button {
    cursor: pointer;
    background: initial;
}

.Visualizer { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: end; align-items: flex-end; -ms-flex-negative: 0; flex-shrink: 0; }

@media (orientation: portrait), (max-width: 768px) {
    .App-main-inner {
        -ms-flex-order: 1;
            order: 1;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    }

    .Visualizer {
        -ms-flex-order: 2;
            order: 2; /* Place after main-inner (Browse/Settings) */
        width: 100%;
        border-left: none;
        margin: 0 calc(var(--charW1) * -1);
        -ms-flex-align: stretch;
            align-items: stretch; /* Full width on mobile */
        -ms-flex-positive: 1;
            flex-grow: 1; /* Fill available space */
        height: 100%; /* Fill available space */
        overflow: hidden;
    }

    .Visualizer-analyzer,
    .Visualizer-spectrogram {
        width: 100% !important;
        margin-left: 0;
        min-height: 0 !important; /* Override the 800px min-height */
        -ms-flex-positive: 1;
            flex-grow: 1; /* Fill available space */
        height: 100%; /* Fill available space */
    }

    .Visualizer-options {
        text-align: center;
        padding: calc(var(--charH) / 2) var(--charW2) 0;
    }
}
.Visualizer-overlay {
    position: absolute;
    top: calc(4 * var(--charH) + 30px); /* Slide down 30px to clear UI elements */
    -webkit-filter: brightness(0.5) contrast(0.8);
            filter: brightness(0.5) contrast(0.8); /* Medium gray to match theme */
}
.Visualizer-options { padding: var(--charH) var(--charW2) 0; text-align: right; position: relative; z-index: 2; background-color: rgba(0, 0, 0, 0.65); }
.Visualizer-toggle { position: fixed; top: var(--charH); right: var(--charW2); z-index: 3; }
@media screen and (max-width: 600px) { .Visualizer-toggle { display: none; } }
.Visualizer-analyzer { display: block; -ms-interpolation-mode: nearest-neighbor; image-rendering: -webkit-optimize-contrast; image-rendering: -moz-crisp-edges; image-rendering: -o-pixelated; image-rendering: pixelated; }
.Visualizer-spectrogram { display: block; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-negative: 0; flex-shrink: 0; min-height: 800px; -ms-interpolation-mode: nearest-neighbor; image-rendering: -webkit-optimize-contrast; image-rendering: -moz-crisp-edges; image-rendering: -o-pixelated; image-rendering: pixelated; }
.Visualizer-analyzer, .Visualizer-spectrogram {
    margin-left: 1px; /* Don't cover the right border of App-main-inner */
}

.TimeSlider { -ms-flex-positive: 1; flex-grow: 1; margin: var(--charH) 0; }
.TimeSlider-labels, .VolumeSlider-labels { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; gap: var(--charW2); }

@media (orientation: portrait), (max-width: 768px) {
    .TimeSlider {
        margin: calc(var(--charH) / 2) 0;
    }
}

.VolumeSlider { -ms-flex-negative: 0; flex-shrink: 0; margin: var(--charH) 0; }

@media (orientation: portrait), (max-width: 768px) {
    .VolumeSlider {
        margin: calc(var(--charH) / 2) 0;
    }
}

@media screen and (max-width: 600px) {
    .VolumeSlider { display: none; }
}

.inline-icon {
    display: inline-block;
    background-color: var(--clickable);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    /* the icon PNGs are 19px tall, so the container needs odd height for vertical centering. */
    height: calc(round(up, var(--charH), 2px) - 1px);
    -ms-flex-negative: 0;
        flex-shrink: 0;
    vertical-align: middle;
}
[disabled] .inline-icon { background-color: var(--neutral2); }
.dim-icon      { background-color: var(--neutral2); }
.icon-play     { width: 24px; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAATAQMAAACwfl94AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA//8AiNtwUAAAAAJ0Uk5TAP9bkSK1AAAAJklEQVR4nGNkYGBgxIoPODAyfBBgZPjDwsjwnxGCQWyQGEgOUw8AIqkIFKkdSqkAAAAASUVORK5CYII=); mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAATAQMAAACwfl94AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA//8AiNtwUAAAAAJ0Uk5TAP9bkSK1AAAAJklEQVR4nGNkYGBgxIoPODAyfBBgZPjDwsjwnxGCQWyQGEgOUw8AIqkIFKkdSqkAAAAASUVORK5CYII=); }
.icon-pause    { width: 24px; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAATAQMAAACwfl94AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA//8AiNtwUAAAAAJ0Uk5TAP9bkSK1AAAAFElEQVR4nGNkYGBgxIrTZuHHmHoAHoMIFNVUJFsAAAAASUVORK5CYII=); mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAATAQMAAACwfl94AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA//8AiNtwUAAAAAJ0Uk5TAP9bkSK1AAAAFElEQVR4nGNkYGBgxIrTZuHHmHoAHoMIFNVUJFsAAAAASUVORK5CYII=); }
.icon-prev     { width: 24px; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAATAQMAAACwfl94AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA//8AiNtwUAAAAAJ0Uk5TAP9bkSK1AAAAJklEQVR4nGNkYGBgxIob6xkZ2isZGeYnMjL8Z4RgEBskBpLD1AMAIJ8IFCJI95EAAAAASUVORK5CYII=); mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAATAQMAAACwfl94AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA//8AiNtwUAAAAAJ0Uk5TAP9bkSK1AAAAJklEQVR4nGNkYGBgxIob6xkZ2isZGeYnMjL8Z4RgEBskBpLD1AMAIJ8IFCJI95EAAAAASUVORK5CYII=); }
.icon-next     { width: 24px; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAATAQMAAACwfl94AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA//8AiNtwUAAAAAJ0Uk5TAP9bkSK1AAAAJklEQVR4nGNkYGBgxIob6xkZHsozMvxkZ2T4zwjBIDZIDCSHqQcAIgcIFFAtPgMAAAAASUVORK5CYII=); mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAATAQMAAACwfl94AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA//8AiNtwUAAAAAJ0Uk5TAP9bkSK1AAAAJklEQVR4nGNkYGBgxIob6xkZHsozMvxkZ2T4zwjBIDZIDCSHqQcAIgcIFFAtPgMAAAAASUVORK5CYII=); }
.icon-back     { width: 24px; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAIAQMAAAAPyndFAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA//8AiNtwUAAAAAJ0Uk5TAP9bkSK1AAAAFUlEQVR4nGNkYuRjtGP8B4R2QBYTABUYAqHJlhEoAAAAAElFTkSuQmCC); mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAIAQMAAAAPyndFAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA//8AiNtwUAAAAAJ0Uk5TAP9bkSK1AAAAFUlEQVR4nGNkYuRjtGP8B4R2QBYTABUYAqHJlhEoAAAAAElFTkSuQmCC); }
.icon-forward  { width: 24px; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAIAQMAAAAPyndFAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF//8AAAAAi8fVjwAAAAJ0Uk5T/wDltzBKAAAAFUlEQVR4nGOsY5RjZGNkAEI2IKsOAAp4AU0yfweHAAAAAElFTkSuQmCC); mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAIAQMAAAAPyndFAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRF//8AAAAAi8fVjwAAAAJ0Uk5T/wDltzBKAAAAFUlEQVR4nGOsY5RjZGNkAEI2IKsOAAp4AU0yfweHAAAAAElFTkSuQmCC); }
.icon-folder   { width: 24px; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAATCAMAAAC9bj0JAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDgzQ0Q3ODE2NEUwMTFFOUIxMjI5QTFCQkU0MjcwNUEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDgzQ0Q3ODA2NEUwMTFFOUIxMjI5QTFCQkU0MjcwNUEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9IjYxOTNDRDg0RTRBMTI4MDE3N0E5RTJDMUY3RjMyNDYwIiBzdFJlZjpkb2N1bWVudElEPSI2MTkzQ0Q4NEU0QTEyODAxNzdBOUUyQzFGN0YzMjQ2MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnW/qMQAAAAGUExURf//AP///4t5850AAAACdFJOU/8A5bcwSgAAADFJREFUeNpiYMQBGPBJMAABNgkGrDoZYEIMMICQQOHD9TJgM2RoSmAAwqFLJQmAAAMAcCwBjy0KuLoAAAAASUVORK5CYII=); mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAATCAMAAAC9bj0JAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDgzQ0Q3ODE2NEUwMTFFOUIxMjI5QTFCQkU0MjcwNUEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDgzQ0Q3ODA2NEUwMTFFOUIxMjI5QTFCQkU0MjcwNUEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9IjYxOTNDRDg0RTRBMTI4MDE3N0E5RTJDMUY3RjMyNDYwIiBzdFJlZjpkb2N1bWVudElEPSI2MTkzQ0Q4NEU0QTEyODAxNzdBOUUyQzFGN0YzMjQ2MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnW/qMQAAAAGUExURf//AP///4t5850AAAACdFJOU/8A5bcwSgAAADFJREFUeNpiYMQBGPBJMAABNgkGrDoZYEIMMICQQOHD9TJgM2RoSmAAwqFLJQmAAAMAcCwBjy0KuLoAAAAASUVORK5CYII=); }
.icon-trash    { width: 24px; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAATAQMAAACwfl94AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA//8AiNtwUAAAAAJ0Uk5TAP9bkSK1AAAALUlEQVR4nGNkYGBgBOMHCoyM/B8Y+d8zgTELwx9GVv81WDFIjv0rCyNcLwQDAB6WDRRRDBMLAAAAAElFTkSuQmCC); mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAATAQMAAACwfl94AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA//8AiNtwUAAAAAJ0Uk5TAP9bkSK1AAAALUlEQVR4nGNkYGBgBOMHCoyM/B8Y+d8zgTELwx9GVv81WDFIjv0rCyNcLwQDAB6WDRRRDBMLAAAAAElFTkSuQmCC); }
.icon-copy     { width: 24px; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAATAQMAAACwfl94AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA//8AiNtwUAAAAAJ0Uk5TAP9bkSK1AAAANElEQVR4nGNkYGBghOO6JkYG572MDE52jMwOtYxMdgyouNaRkekfkGb4x8j8m4kRRS8DAwA5LAgU5xSIfgAAAABJRU5ErkJggg==); mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAATAQMAAACwfl94AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA//8AiNtwUAAAAAJ0Uk5TAP9bkSK1AAAANElEQVR4nGNkYGBghOO6JkYG572MDE52jMwOtYxMdgyouNaRkekfkGb4x8j8m4kRRS8DAwA5LAgU5xSIfgAAAABJRU5ErkJggg==); }
.icon-download { width: 16px; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAATAQMAAACjqR+MAAAAAXNSR0IB2cksfwAAAAZQTFRFAAAA//1U1uuHPwAAAAJ0Uk5TAP9bkSK1AAAAL0lEQVR4nGNgAAM7OwY9KxDS4GLQkQIx9KsY1D8xKDAxKH9iUCpiECpi4P/HgAQAzQsHS7Ya3FIAAAAASUVORK5CYII=); mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAATAQMAAACjqR+MAAAAAXNSR0IB2cksfwAAAAZQTFRFAAAA//1U1uuHPwAAAAJ0Uk5TAP9bkSK1AAAAL0lEQVR4nGNgAAM7OwY9KxDS4GLQkQIx9KsY1D8xKDAxKH9iUCpiECpi4P/HgAQAzQsHS7Ya3FIAAAAASUVORK5CYII=); }
.icon-repeat   { width: 16px; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAATCAYAAACZZ43PAAAAj0lEQVQ4jdVS0Q7CQAyii///yxg3OxlFt/hi5OUupHC0Pfwc9QhAUnJsFMDycFWDwjKYVzkHFSAG1SIRnpssx9ibi/fzCZ2AofhUjDmDTqwD7GtuRwxop/MZt8heEIYE3+Fp0D3v/VrP7+dp/4C6UhWnLa2QGXBcJEUU4/iR9hr/SGUPJIOhtRevbeQfAeAOOCYcKN17PDwAAAAASUVORK5CYII=); mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAATCAYAAACZZ43PAAAAj0lEQVQ4jdVS0Q7CQAyii///yxg3OxlFt/hi5OUupHC0Pfwc9QhAUnJsFMDycFWDwjKYVzkHFSAG1SIRnpssx9ibi/fzCZ2AofhUjDmDTqwD7GtuRwxop/MZt8heEIYE3+Fp0D3v/VrP7+dp/4C6UhWnLa2QGXBcJEUU4/iR9hr/SGUPJIOhtRevbeQfAeAOOCYcKN17PDwAAAAASUVORK5CYII=); }
.icon-shuffle  { width: 16px; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAATAQMAAACjqR+MAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA//8AiNtwUAAAAAJ0Uk5TAP9bkSK1AAAAL0lEQVR4nGNkYGCEIgdGhgTGw7qMLDGMHBaMHD8YBT4wChgwKjiABIFSIAVwxQwAwF0GdDaITZ8AAAAASUVORK5CYII=); mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAATAQMAAACjqR+MAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA//8AiNtwUAAAAAJ0Uk5TAP9bkSK1AAAAL0lEQVR4nGNkYGCEIgdGhgTGw7qMLDGMHBaMHD8YBT4wChgwKjiABIFSIAVwxQwAwF0GdDaITZ8AAAAASUVORK5CYII=); }
.icon-chip     { width: 24px; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAATAQMAAACwfl94AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAAqqqqE2N/7AAAAAJ0Uk5TAP9bkSK1AAAAJUlEQVR4nGNkYGBgBGEenheMfFonGPN7WMGY/yUHGOPjw/RCMQAmaw0UB4u97AAAAABJRU5ErkJggg==); mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAATAQMAAACwfl94AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAAqqqqE2N/7AAAAAJ0Uk5TAP9bkSK1AAAAJUlEQVR4nGNkYGBgBGEenheMfFonGPN7WMGY/yUHGOPjw/RCMQAmaw0UB4u97AAAAABJRU5ErkJggg==); }
.icon-pin-up   { width: 24px; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAATAQMAAACwfl94AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA//8AiNtwUAAAAAJ0Uk5TAP9bkSK1AAAAJklEQVR4nGNkYGBghON/TIwMLnswcVMdI+M/RkYGgQ+oGFkvAwMA22cMFF8f0OEAAAAASUVORK5CYII=); mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAATAQMAAACwfl94AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA//8AiNtwUAAAAAJ0Uk5TAP9bkSK1AAAAJklEQVR4nGNkYGBghON/TIwMLnswcVMdI+M/RkYGgQ+oGFkvAwMA22cMFF8f0OEAAAAASUVORK5CYII=); background-color: var(--neutral2); }
.icon-pin-down { width: 24px; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAATAQMAAACwfl94AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA//8AiNtwUAAAAAJ0Uk5TAP9bkSK1AAAAJUlEQVR4nGNkYGBghON/TIwMNS2YGCjO+I+RkUHgAypG1svAAADc+wwU9P6H2AAAAABJRU5ErkJggg==); mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAATAQMAAACwfl94AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA//8AiNtwUAAAAAJ0Uk5TAP9bkSK1AAAAJUlEQVR4nGNkYGBghON/TIwMNS2YGCjO+I+RkUHgAypG1svAAADc+wwU9P6H2AAAAABJRU5ErkJggg==); background-color: var(--neutral2); }

.tab-container {
    border-bottom: 1px solid var(--clickable);
    padding: 0 var(--charW2);
    display: -ms-flexbox;
    display: flex;
    gap: var(--charW1);
}

.tab-settings { margin-left: auto; margin-right: 0; }

/* Mobile tab bar - only visible on mobile/portrait */
.mobile-tab-bar {
    display: none; /* Hidden by default (desktop) */
}

@media (orientation: portrait), (max-width: 768px) {
    .mobile-tab-bar {
        display: -ms-flexbox;
        display: flex;
        gap: var(--charW1);
        padding: 0 var(--charW1);
        border-bottom: 1px solid var(--clickable);
        background: var(--background);
        margin: 0 calc(var(--charW1) * -1);
        -ms-flex-negative: 0;
            flex-shrink: 0; /* Don't shrink the tab bar */
    }

    /* Hide all tab content by default on mobile */
    .mobile-tab-content {
        display: none !important;
    }

    /* Show only the active tab on mobile - fill remaining space */
    .mobile-tab-content.mobile-tab-active {
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-positive: 1;
            flex-grow: 1; /* Fill available space */
        -ms-flex-direction: column;
            flex-direction: column;
        overflow: hidden; /* Contain scrollable content */
        min-height: 0; /* Allow flex shrinking */
    }
}

.toast-box-outer {
    position: absolute;
    z-index: 100;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
        align-items: start;
    -ms-flex-pack: center;
        justify-content: center;
    height: 100%;
    width: 100%;
    pointer-events: none;
    top: 0;
    left: 0;
    padding: 0 var(--charW2);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
.toast-box {
    padding: var(--charH) var(--charW2);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-align: start;
        align-items: start;
    overflow: hidden;
    max-height: 100%;
    pointer-events: all;
    width: 100%;
    height: calc(4 * var(--charH));
}
.toast-box-outer[hidden] {
    top: calc(-4 * var(--charH));
    visibility: hidden;
}
.toast-box .message {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    max-height: 100%;
    overflow: hidden;
    padding-right: var(--charW1);
    text-overflow: ellipsis;
    white-space: initial;
}
.toast-error {
    background-color: var(--active);
    color: var(--neutral4);
}
.toast-info {
    background-color: var(--button);
    color: var(--neutral3);
}

/* message-box is used by Info box and DropMessage component. */
.message-box-outer {
    position: absolute;
    z-index: 100;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    height: 100%;
    width: round(calc(100% + 0px), 2px);;
    pointer-events: none;
    top: 0;
    left: 0;
    padding: var(--charH) var(--charW2);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.message-box-outer[hidden] {
    visibility: hidden;
}

.message-box {
    background: var(--message-box-background);
    padding: var(--charH) var(--charW2);
    -webkit-box-shadow: var(--message-box-box-shadow);
            box-shadow: var(--message-box-box-shadow);
    outline: var(--message-box-border);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    visibility: visible;
    overflow: hidden;
    max-height: 100%;
    pointer-events: all;
    -ms-flex-direction: column;
        flex-direction: column;
    width: calc(90 * var(--charW1));
    height: calc(40 * var(--charH));
}

.message-box[hidden] {
    width: 0;
    height: 0;
    visibility: hidden;
}

.message-box[hidden] .message-box-inner {
    overflow: hidden;
}

.message-box-inner {
    color: var(--message-box-color);
    outline: var(--message-box-inner-border);
    padding: var(--charH) var(--charW2);
    overflow: auto;
}

.message-box-inner.info-text {
    white-space: pre;
    font: var(--message-box-info-text-font);
    color: var(--message-box-info-text-color);
    background: var(--message-box-info-text-background);
}

.message-box-footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    -ms-flex-line-pack: end;
        align-content: end;
    -ms-flex-pack: justify;
        justify-content: space-between;
    padding-top: var(--charH);
}

.drop-message {
    height: calc(9 * var(--charH) + 1px);
    width: calc(60 * var(--charW1));
    text-align: center;
}

.drop-message .message-box-inner {
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-positive: 1;
        flex-grow: 1;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    white-space: nowrap;
}


.message-box-button {
    background: var(--background);
    padding: 0 var(--charW2);
    -webkit-box-shadow: none;
            box-shadow: none;
}

@media (-webkit-max-device-pixel-ratio: 1), (max-resolution: 1dppx) {
  /* ensure crisp icons at 1:1 native resolution, smooth images otherwise */
  img, .Visualizer-overlay, .Visualizer-analyzer, .Visualizer-spectrogram, .inline-icon {
      -ms-interpolation-mode: nearest-neighbor;
          image-rendering: -webkit-optimize-contrast;
          image-rendering: -moz-crisp-edges;
          image-rendering: -o-pixelated;
          image-rendering: pixelated;
  }
}

/* Scrollbar styling */
::-webkit-scrollbar {
    height: var(--charW1);
    width: var(--charW1);
    background-color: var(--button);
}

::-webkit-scrollbar-thumb {
    background-color: var(--clickable);
    -webkit-border-radius: 0;
}
::-webkit-scrollbar-corner {
    background-color: var(--neutral2);
}

/* Collection default theme */

.ReactVirtualized__Collection {
}

.ReactVirtualized__Collection__innerScrollContainer {
}

/* Grid default theme */

.ReactVirtualized__Grid {
}

.ReactVirtualized__Grid__innerScrollContainer {
}

/* Table default theme */

.ReactVirtualized__Table {
}

.ReactVirtualized__Table__Grid {
}

.ReactVirtualized__Table__headerRow {
  font-weight: 700;
  text-transform: uppercase;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-align: center;
      align-items: center;
}
.ReactVirtualized__Table__row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-align: center;
      align-items: center;
}

.ReactVirtualized__Table__headerTruncatedText {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ReactVirtualized__Table__headerColumn,
.ReactVirtualized__Table__rowColumn {
  margin-right: 10px;
  min-width: 0px;
}
.ReactVirtualized__Table__rowColumn {
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ReactVirtualized__Table__headerColumn:first-of-type,
.ReactVirtualized__Table__rowColumn:first-of-type {
  margin-left: 10px;
}
.ReactVirtualized__Table__sortableHeaderColumn {
  cursor: pointer;
}

.ReactVirtualized__Table__sortableHeaderIconContainer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}
.ReactVirtualized__Table__sortableHeaderIcon {
  -ms-flex: 0 0 24px;
      flex: 0 0 24px;
  height: 1em;
  width: 1em;
  fill: currentColor;
}

/* List default theme */

.ReactVirtualized__List {
}

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLDZCQUE2Qjs7QUFFN0I7QUFDQTs7QUFFQTtBQUNBOztBQUVBLHVCQUF1Qjs7QUFFdkI7QUFDQTs7QUFFQTtBQUNBOztBQUVBLHdCQUF3Qjs7QUFFeEI7QUFDQTs7QUFFQTtBQUNBOztBQUVBO0VBQ0UsZ0JBQWdCO0VBQ2hCLHlCQUF5QjtFQUN6QixhQUFhO0VBQ2IsbUJBQW1CO0VBQ25CLG1CQUFtQjtBQUNyQjtBQUNBO0VBQ0UsYUFBYTtFQUNiLG1CQUFtQjtFQUNuQixtQkFBbUI7QUFDckI7O0FBRUE7RUFDRSxxQkFBcUI7RUFDckIsZUFBZTtFQUNmLG1CQUFtQjtFQUNuQix1QkFBdUI7RUFDdkIsZ0JBQWdCO0FBQ2xCOztBQUVBOztFQUVFLGtCQUFrQjtFQUNsQixjQUFjO0FBQ2hCO0FBQ0E7RUFDRSx1QkFBdUI7RUFDdkIsbUJBQW1CO0FBQ3JCOztBQUVBOztFQUVFLGlCQUFpQjtBQUNuQjtBQUNBO0VBQ0UsZUFBZTtBQUNqQjs7QUFFQTtFQUNFLGFBQWE7RUFDYixtQkFBbUI7QUFDckI7QUFDQTtFQUNFLGNBQWM7RUFDZCxXQUFXO0VBQ1gsVUFBVTtFQUNWLGtCQUFrQjtBQUNwQjs7QUFFQSx1QkFBdUI7O0FBRXZCO0FBQ0EiLCJmaWxlIjoic3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIENvbGxlY3Rpb24gZGVmYXVsdCB0aGVtZSAqL1xuXG4uUmVhY3RWaXJ0dWFsaXplZF9fQ29sbGVjdGlvbiB7XG59XG5cbi5SZWFjdFZpcnR1YWxpemVkX19Db2xsZWN0aW9uX19pbm5lclNjcm9sbENvbnRhaW5lciB7XG59XG5cbi8qIEdyaWQgZGVmYXVsdCB0aGVtZSAqL1xuXG4uUmVhY3RWaXJ0dWFsaXplZF9fR3JpZCB7XG59XG5cbi5SZWFjdFZpcnR1YWxpemVkX19HcmlkX19pbm5lclNjcm9sbENvbnRhaW5lciB7XG59XG5cbi8qIFRhYmxlIGRlZmF1bHQgdGhlbWUgKi9cblxuLlJlYWN0VmlydHVhbGl6ZWRfX1RhYmxlIHtcbn1cblxuLlJlYWN0VmlydHVhbGl6ZWRfX1RhYmxlX19HcmlkIHtcbn1cblxuLlJlYWN0VmlydHVhbGl6ZWRfX1RhYmxlX19oZWFkZXJSb3cge1xuICBmb250LXdlaWdodDogNzAwO1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xufVxuLlJlYWN0VmlydHVhbGl6ZWRfX1RhYmxlX19yb3cge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xufVxuXG4uUmVhY3RWaXJ0dWFsaXplZF9fVGFibGVfX2hlYWRlclRydW5jYXRlZFRleHQge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIG1heC13aWR0aDogMTAwJTtcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gIG92ZXJmbG93OiBoaWRkZW47XG59XG5cbi5SZWFjdFZpcnR1YWxpemVkX19UYWJsZV9faGVhZGVyQ29sdW1uLFxuLlJlYWN0VmlydHVhbGl6ZWRfX1RhYmxlX19yb3dDb2x1bW4ge1xuICBtYXJnaW4tcmlnaHQ6IDEwcHg7XG4gIG1pbi13aWR0aDogMHB4O1xufVxuLlJlYWN0VmlydHVhbGl6ZWRfX1RhYmxlX19yb3dDb2x1bW4ge1xuICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbn1cblxuLlJlYWN0VmlydHVhbGl6ZWRfX1RhYmxlX19oZWFkZXJDb2x1bW46Zmlyc3Qtb2YtdHlwZSxcbi5SZWFjdFZpcnR1YWxpemVkX19UYWJsZV9fcm93Q29sdW1uOmZpcnN0LW9mLXR5cGUge1xuICBtYXJnaW4tbGVmdDogMTBweDtcbn1cbi5SZWFjdFZpcnR1YWxpemVkX19UYWJsZV9fc29ydGFibGVIZWFkZXJDb2x1bW4ge1xuICBjdXJzb3I6IHBvaW50ZXI7XG59XG5cbi5SZWFjdFZpcnR1YWxpemVkX19UYWJsZV9fc29ydGFibGVIZWFkZXJJY29uQ29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbn1cbi5SZWFjdFZpcnR1YWxpemVkX19UYWJsZV9fc29ydGFibGVIZWFkZXJJY29uIHtcbiAgZmxleDogMCAwIDI0cHg7XG4gIGhlaWdodDogMWVtO1xuICB3aWR0aDogMWVtO1xuICBmaWxsOiBjdXJyZW50Q29sb3I7XG59XG5cbi8qIExpc3QgZGVmYXVsdCB0aGVtZSAqL1xuXG4uUmVhY3RWaXJ0dWFsaXplZF9fTGlzdCB7XG59XG4iXX0= */

/*# sourceMappingURL=main.12a1c265.css.map*/