:root {

    --bg: #0b0c0f;

    --panel: #111318;
    --panel-2: #15171d;
    --panel-3: #1a1d24;

    --text: #f2f3ef;
    --muted: #989ba3;
    --subtle: #656871;

    --accent: #d8ff72;

    --good: #b9df83;
    --bad: #ff9191;

    --border: #24272e;
    --border-hover: #373b45;

    --radius: 10px;
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(
                216,
                255,
                114,
                0.045
            ),
            transparent 35%
        ),
        var(--bg);

    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans",
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;
}


button,
input {
    font: inherit;
}


button {
    cursor: pointer;
}


button:disabled {

    cursor: not-allowed;

    opacity: 0.45;
}


.app {

    width: 100%;

    max-width: 920px;

    margin: 0 auto;

    padding:
        0 24px 90px;

    flex: 1;
}


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

header {

    padding:
        58px 0 42px;

    margin-bottom:
        0;

    text-align: left;
}


h1 {

    margin: 0;

    color: var(--text);

    font-size:
        clamp(
            46px,
            7vw,
            76px
        );

    line-height:
        0.98;

    letter-spacing:
        -0.065em;

    font-weight:
        680;
}


.sub {

    max-width:
        680px;

    margin:
        24px 0 0;

    color:
        var(--muted);

    font-size:
        15px;

    line-height:
        1.75;
}


/* =========================================================
   Dropzone
   ========================================================= */

.dropzone {

    min-height:
        230px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        32px 24px;

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

    border-radius:
        12px;

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

    text-align:
        center;

    cursor:
        pointer;

    outline:
        none;

    transition:
        border-color 160ms ease,
        background 160ms ease;
}


.dropzone:hover,
.dropzone:focus-visible,
.dropzone.drag {

    border-color:
        var(--accent);

    background:
        rgba(
            216,
            255,
            114,
            0.025
        );
}


.dz-inner {

    width:
        min(
            100%,
            600px
        );
}


.dz-icon {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 17px;

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

    border-radius:
        9px;

    color:
        var(--muted);

    font-size:
        17px;
}


.dz-title {

    margin:
        0;

    color:
        var(--text);

    font-size:
        14px;

    font-weight:
        630;
}


.dz-or {

    margin:
        8px 0 0;

    color:
        var(--subtle);

    font-size:
        11px;
}


.dz-or .link {

    color:
        var(--muted);

    text-decoration:
        underline;

    text-underline-offset:
        3px;
}


.dz-hint {

    max-width:
        560px;

    margin:
        12px auto 0;

    color:
        var(--subtle);

    font-size:
        10px;

    line-height:
        1.7;
}


/* =========================================================
   Controls
   ========================================================= */

.controls {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    margin-top:
        14px;

    padding:
        15px 16px;

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

    border-radius:
        10px;

    background:
        var(--panel);
}


.fmt-group {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        5px;
}


.ctl-label {

    margin-right:
        6px;

    color:
        var(--subtle);

    font-size:
        10px;

    font-weight:
        650;
}


.fmt-btn {

    min-width:
        50px;

    padding:
        7px 10px;

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

    border-radius:
        6px;

    background:
        transparent;

    color:
        var(--muted);

    font-size:
        10px;

    font-weight:
        650;

    transition:
        background 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
}


.fmt-btn:hover {

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

    background:
        var(--panel-2);

    color:
        var(--text);
}


.fmt-btn.active {

    border-color:
        var(--text);

    background:
        var(--text);

    color:
        var(--bg);
}


/* =========================================================
   Quality
   ========================================================= */

.quality {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.quality label {

    color:
        var(--subtle);

    font-size:
        10px;

    font-weight:
        650;

    white-space:
        nowrap;
}


.quality #qualityVal {

    margin-left:
        3px;

    color:
        var(--muted);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-variant-numeric:
        tabular-nums;
}


.quality input[type="range"] {

    width:
        150px;

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


.q-hint {

    color:
        var(--subtle);

    font-size:
        9px;

    white-space:
        nowrap;
}


/* =========================================================
   Loader
   ========================================================= */

.loader {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        12px;

    padding:
        10px 13px;

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

    border-radius:
        8px;

    background:
        var(--panel);

    color:
        var(--muted);

    font-size:
        10px;
}


.spinner {

    width:
        12px;

    height:
        12px;

    flex:
        0 0 auto;

    border:
        1.5px solid
        var(--border-hover);

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

    border-radius:
        50%;

    animation:
        spin 800ms linear infinite;
}


@keyframes spin {

    to {
        transform:
            rotate(360deg);
    }
}


/* =========================================================
   Note
   ========================================================= */

.note {

    margin:
        11px 0 0;

    color:
        var(--subtle);

    font-size:
        10px;

    line-height:
        1.6;
}


/* =========================================================
   Toolbar
   ========================================================= */

.toolbar {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin:
        13px 0 0;
}


.btn {

    padding:
        8px 11px;

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

    border-radius:
        7px;

    background:
        transparent;

    color:
        var(--muted);

    font-size:
        10px;

    font-weight:
        620;

    transition:
        background 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
}


.btn:hover {

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

    background:
        var(--panel-2);

    color:
        var(--text);
}


.btn.primary {

    border-color:
        var(--text);

    background:
        var(--text);

    color:
        var(--bg);
}


.btn.primary:hover {

    background:
        #ffffff;
}


.btn.ghost {

    background:
        transparent;
}


/* =========================================================
   List
   ========================================================= */

.list {

    list-style:
        none;

    padding:
        0;

    margin:
        14px 0 0;

    display:
        grid;

    gap:
        8px;
}


/*
 * Original project item.
 * Keep a flexible grid so the download
 * link remains visible.
 */

.item {

    display:
        grid;

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

    align-items:
        center;

    gap:
        18px;

    padding:
        13px 14px;

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

    border-radius:
        9px;

    background:
        var(--panel);

    transition:
        background 160ms ease,
        border-color 160ms ease;
}


.item:hover {

    background:
        var(--panel-2);

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


/* =========================================================
   Meta
   ========================================================= */

.meta {

    min-width:
        0;
}


.meta .name {

    overflow:
        hidden;

    color:
        var(--text);

    font-size:
        11px;

    font-weight:
        620;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.meta .sizes {

    margin-top:
        4px;

    color:
        var(--subtle);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:
        9px;

    line-height:
        1.5;
}


.meta .sizes .arrow {

    padding:
        0 3px;

    color:
        var(--accent);
}


.meta .err {

    margin-top:
        4px;

    color:
        var(--bad);

    font-size:
        9px;

    line-height:
        1.5;

    word-break:
        break-word;
}


.meta .queued {

    margin-top:
        4px;

    color:
        var(--subtle);

    font-size:
        9px;
}


/* =========================================================
   Progress
   ========================================================= */

.bar {

    height:
        3px;

    margin-top:
        9px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        var(--border);
}


.bar > div {

    width:
        0;

    height:
        100%;

    border-radius:
        inherit;

    background:
        var(--accent);

    transition:
        width 160ms ease;
}


.bar-label {

    margin-top:
        5px;

    color:
        var(--subtle);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:
        9px;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   Download
   ========================================================= */

.dl {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        64px;

    padding:
        7px 10px;

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

    border-radius:
        7px;

    background:
        transparent;

    color:
        var(--muted);

    font-size:
        9px;

    font-weight:
        620;

    line-height:
        1;

    white-space:
        nowrap;

    text-decoration:
        none;

    visibility:
        visible;

    opacity:
        1;

    pointer-events:
        auto;

    transition:
        background 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
}


.dl:hover {

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

    background:
        var(--panel-2);

    color:
        var(--text);
}


.dl.disabled {

    color:
        var(--subtle);

    border-color:
        var(--border);

    background:
        transparent;

    opacity:
        0.45;

    pointer-events:
        none;
}


/*
 * If app.js puts the actual download link inside
 * the item, don't let inherited styles hide it.
 */

.item .dl,
.item a.dl,
.item button.dl {

    display:
        inline-flex;

    visibility:
        visible;
}


/* =========================================================
   Footer
   ========================================================= */

.foot {

    width:
        min(
            calc(100% - 48px),
            920px
        );

    margin:
        0 auto;

    padding:
        26px 0 34px;

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

    color:
        var(--subtle);

    font-size:
        10px;

    line-height:
        1.6;

    text-align:
        left;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 720px) {

    .app {

        padding-left:
            18px;

        padding-right:
            18px;
    }


    header {

        padding-top:
            42px;

        padding-bottom:
            34px;
    }


    h1 {

        font-size:
            clamp(
                42px,
                12vw,
                62px
            );
    }


    .controls {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .quality {

        width:
            100%;
    }


    .quality input[type="range"] {

        flex:
            1;

        width:
            auto;
    }


    .foot {

        width:
            calc(
                100% - 36px
            );
    }
}


@media (max-width: 520px) {

    .item {

        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    .dl {

        justify-self:
            start;
    }


    .quality {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            7px;
    }


    .q-hint {

        display:
            none;
    }
}


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

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation:
            none !important;

        transition:
            none !important;
    }
}
/* =========================================================
   Language switcher
   ========================================================= */

.language {

    display: inline-flex;

    align-items: center;

    padding: 3px;

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

    border-radius: 7px;

    background:
        rgba(
            255,
            255,
            255,
            0.012
        );
}


.language button {

    appearance: none;
    -webkit-appearance: none;

    margin: 0;

    min-width: 30px;

    height: 25px;

    padding: 0 8px;

    border: 0;

    border-radius: 5px;

    outline: none;

    background: transparent;

    color: var(--subtle);

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

    font-size: 10px;

    font-weight: 650;

    line-height: 25px;

    text-align: center;

    cursor: pointer;

    transition:
        color 150ms ease,
        background 150ms ease;
}


.language button:hover {

    color: var(--muted);

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


.language button.active {

    background:
        var(--panel-2);

    color:
        var(--text);

    box-shadow:
        0 1px 2px
        rgba(
            0,
            0,
            0,
            0.15
        );
}


.language button:focus-visible {

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

    outline-offset: 1px;
}