* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
}

body {
    min-height: 100vh;
    overflow-x: hidden;

    color: #eeeeee;

    font-family: Arial, Helvetica, sans-serif;

    background:
        radial-gradient(
            ellipse at 50% 35%,
            rgba(118, 5, 20, 0.16) 0%,
            rgba(40, 0, 5, 0.06) 25%,
            transparent 55%
        ),
        radial-gradient(
            ellipse at 50% 105%,
            rgba(120, 0, 18, 0.12),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            #090a0b 0%,
            #070708 45%,
            #050506 100%
        );
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;

    opacity: 0.16;

    background-image:
        repeating-radial-gradient(
            circle at 20% 30%,
            rgba(255,255,255,0.025) 0px,
            transparent 1px,
            transparent 4px
        );
}


/* TOPBAR */

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    height: 82px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    padding: 0 48px;

    background:
        linear-gradient(
            180deg,
            rgba(9,10,11,0.97),
            rgba(9,10,11,0.82)
        );

    border-bottom: 1px solid rgba(255,255,255,0.055);

    backdrop-filter: blur(18px);

    z-index: 100;
}

.topbar::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: -1px;

    width: 330px;
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(150,7,27,0.55),
            #b10c29,
            rgba(150,7,27,0.55),
            transparent
        );

    box-shadow: 0 0 13px rgba(180,6,35,0.28);
}


/* BRAND */

.brand {
    justify-self: start;

    display: flex;
    align-items: center;

    gap: 9px;

    color: #aaaaaa;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 4px;
}

.brand-q {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    color: #d0d0d0;

    border: 1px solid rgba(160,20,38,0.4);

    background:
        linear-gradient(
            145deg,
            #18191b,
            #0b0c0d
        );

    box-shadow:
        inset 0 0 10px rgba(255,255,255,0.03),
        0 0 15px rgba(135,0,20,0.08);

    font-size: 15px;
    letter-spacing: 0;
}


/* MENU */

.menu {
    height: 100%;

    display: flex;
    align-items: center;

    gap: 48px;
}

.menu-item {
    position: relative;

    height: 100%;

    padding: 0 2px;

    border: 0;
    outline: none;

    background: transparent;

    color: #55585c;

    cursor: pointer;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 3px;

    transition: color 0.25s ease;
}

.menu-item:hover {
    color: #aaaaaa;
}

.menu-item.active {
    color: #ededed;
}

.menu-item.active::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 38px;
    height: 1px;

    transform: translateX(-50%);

    background: #b20d29;

    box-shadow:
        0 0 9px #b20d29,
        0 0 18px rgba(180,0,30,0.45);
}


/* STATUS */

.status {
    justify-self: end;

    color: #55585b;

    font-size: 8px;

    letter-spacing: 2px;
}

.status span {
    display: inline-block;

    width: 5px;
    height: 5px;

    margin-right: 7px;

    border-radius: 50%;

    background: #8f1325;

    box-shadow: 0 0 7px rgba(175,20,45,0.8);
}


/* PAGES */

main {
    min-height: 100vh;
}

.page {
    display: none;

    min-height: 100vh;

    padding: 145px 25px 100px;
}

.page.active {
    display: block;
}


/* HERO */

.hero {
    max-width: 770px;

    margin: 0 auto;

    text-align: center;
}

.kicker {
    margin-bottom: 13px;

    color: #921127;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 2.5px;
}

.hero h1,
.section-head h1 {
    margin: 0;

    color: #e9e9ea;

    font-size: 39px;
    font-weight: 700;

    letter-spacing: -0.8px;
}

.subtitle,
.section-head p {
    margin: 12px 0 0;

    color: #484a4e;

    font-size: 11px;
}


/* UPLOAD BOX */

.dropzone {
    position: relative;

    width: 430px;
    height: 270px;

    margin: 55px auto 0;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 10px;

    background:
        radial-gradient(
            circle at center,
            rgba(125,0,20,0.045),
            transparent 65%
        ),
        rgba(255,255,255,0.008);

    transition: 0.25s ease;
}

.dropzone:hover,
.dropzone.drag-active {
    border-color: rgba(167,14,40,0.4);

    background:
        radial-gradient(
            circle at center,
            rgba(145,0,22,0.09),
            transparent 68%
        ),
        rgba(255,255,255,0.012);
}

.dropzone::before {
    content: "";

    position: absolute;

    top: -1px;
    left: -1px;

    width: 18px;
    height: 18px;

    border-top: 1px solid #a70e28;
    border-left: 1px solid #a70e28;
}

.dropzone::after {
    content: "";

    position: absolute;

    right: -1px;
    bottom: -1px;

    width: 18px;
    height: 18px;

    border-right: 1px solid #a70e28;
    border-bottom: 1px solid #a70e28;
}

.upload-icon {
    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    margin-bottom: 20px;

    border: 1px solid rgba(170,15,40,0.4);

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            #18191a,
            #0b0c0d
        );
}

.upload-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: #af132d;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dropzone strong {
    color: #b9b9bb;

    font-size: 11px;
}

.browse {
    margin-top: 7px;

    color: #861125;

    font-size: 9px;
}

.max-size {
    position: absolute;

    bottom: 23px;

    color: #34363a;

    font-size: 7px;

    letter-spacing: 1.4px;
}


/* SELECTED FILE */

.file-selected {
    display: none;

    width: 430px;

    margin: 13px auto 0;

    padding: 13px 14px;

    align-items: center;
    justify-content: space-between;

    border: 1px solid rgba(255,255,255,0.05);

    border-radius: 6px;

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

    text-align: left;
}

.file-selected.visible {
    display: flex;
}

.file-name {
    max-width: 270px;

    overflow: hidden;

    color: #9d9d9f;

    font-size: 10px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-size {
    margin-top: 4px;

    color: #404246;

    font-size: 8px;
}

#startUpload {
    height: 35px;

    padding: 0 15px;

    border: 1px solid rgba(145,15,37,0.28);

    border-radius: 4px;

    background: rgba(130,0,20,0.07);

    color: #8c2635;

    cursor: pointer;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1.3px;
}


/* PROGRESS */

.progress-area {
    display: none;

    width: 430px;

    margin: 12px auto 0;

    padding: 15px;

    border: 1px solid rgba(255,255,255,0.045);

    border-radius: 6px;

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

    text-align: left;
}

.progress-area.visible {
    display: block;
}

.progress-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    color: #54565a;

    font-size: 8px;

    letter-spacing: 1px;
}

.progress-head strong {
    color: #a2142b;

    font-size: 10px;
}

.progress-line {
    height: 2px;

    margin: 13px 0;

    overflow: hidden;

    background: #17181a;
}

#progressBar {
    width: 0%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #5f0715,
            #b2102c
        );

    box-shadow: 0 0 8px rgba(180,10,40,0.5);
}

.progress-info {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;
}

.progress-info small {
    display: block;

    color: #333539;

    font-size: 6px;

    letter-spacing: 1px;
}

.progress-info span {
    display: block;

    margin-top: 5px;

    color: #686a6d;

    font-size: 8px;
}


/* LIST / LINKS */

.section-head {
    max-width: 900px;

    margin: 0 auto 42px;

    text-align: center;
}

.content-panel {
    max-width: 900px;
    min-height: 320px;

    margin: 0 auto;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,0.05);

    border-radius: 9px;

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

.empty-state {
    color: #34363a;

    font-size: 8px;

    letter-spacing: 2px;
}


/* FOOTER */

footer {
    position: fixed;

    bottom: 23px;
    left: 30px;
    right: 30px;

    display: flex;
    justify-content: center;

    gap: 13px;

    pointer-events: none;

    color: #292b2f;

    font-size: 6px;

    letter-spacing: 1.6px;
}

.footer-dot {
    color: #5f0a19;
}


/* MOBILE */

@media (max-width: 700px) {

    .topbar {
        height: 70px;

        grid-template-columns: auto 1fr;

        padding: 0 15px;
    }

    .brand {
        font-size: 9px;

        letter-spacing: 2px;
    }

    .brand-q {
        width: 27px;
        height: 27px;
    }

    .menu {
        justify-self: end;

        gap: 17px;
    }

    .menu-item {
        font-size: 7px;

        letter-spacing: 1.4px;
    }

    .status {
        display: none;
    }

    .page {
        padding: 120px 15px 90px;
    }

    .hero h1,
    .section-head h1 {
        font-size: 27px;
    }

    .dropzone,
    .file-selected,
    .progress-area {
        width: 100%;
        max-width: 430px;
    }

    .dropzone {
        height: 250px;

        margin-top: 42px;
    }
}

/* ===== BIG UPLOAD AREA ===== */

.dropzone {
    width: 760px;
    height: 440px;
    max-width: 100%;
    margin-top: 48px;
}

.upload-icon {
    width: 78px;
    height: 78px;
    margin-bottom: 27px;
    border-radius: 12px;
}

.upload-icon svg {
    width: 31px;
    height: 31px;
}

.dropzone strong {
    font-size: 15px;
}

.browse {
    margin-top: 10px;
    font-size: 11px;
}

.max-size {
    bottom: 30px;
    font-size: 8px;
}

.file-selected,
.progress-area {
    width: 760px;
    max-width: 100%;
}

@media (max-width: 800px) {
    .dropzone {
        width: 100%;
        height: 360px;
    }

    .file-selected,
    .progress-area {
        width: 100%;
    }
}


/* ===== EXTRA LARGE ROUNDED DROPZONE ===== */

.dropzone {
    width: 980px;
    height: 560px;
    max-width: 94vw;

    border-radius: 34px;

    margin-top: 46px;

    border: 1px solid rgba(255,255,255,0.07);

    background:
        radial-gradient(
            circle at center,
            rgba(120,0,18,0.07),
            transparent 68%
        ),
        rgba(255,255,255,0.01);

    box-shadow:
        inset 0 0 90px rgba(255,255,255,0.008),
        0 0 45px rgba(100,0,18,0.05);
}

.dropzone::before {
    border-top-left-radius: 34px;
}

.dropzone::after {
    border-bottom-right-radius: 34px;
}

.upload-icon {
    width: 92px;
    height: 92px;

    border-radius: 24px;

    margin-bottom: 32px;
}

.upload-icon svg {
    width: 37px;
    height: 37px;
}

.dropzone strong {
    font-size: 18px;
}

.browse {
    font-size: 12px;
    margin-top: 12px;
}

.max-size {
    bottom: 38px;
    font-size: 9px;
}

.file-selected,
.progress-area {
    width: 980px;
    max-width: 94vw;

    border-radius: 18px;
}

@media (max-width: 1000px) {

    .dropzone {
        width: 94vw;
        height: 500px;
    }

    .file-selected,
    .progress-area {
        width: 94vw;
    }
}

@media (max-width: 700px) {

    .dropzone {
        height: 390px;
        border-radius: 26px;
    }

    .upload-icon {
        width: 78px;
        height: 78px;
        border-radius: 20px;
    }

}

/* ===== UPLOAD RESULT ===== */

.upload-result {
    display: none;

    width: 980px;
    max-width: 94vw;

    margin: 14px auto 0;

    padding: 20px;

    text-align: left;

    border:
        1px solid
        rgba(255,255,255,0.055);

    border-radius: 18px;

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

.upload-result.visible {
    display: block;
}

.result-label {
    margin-bottom: 9px;

    color: #4b4d50;

    font-size: 7px;

    letter-spacing: 2px;
}

.result-row {
    display: flex;

    width: 100%;
}

.result-row input {
    flex: 1;

    min-width: 0;

    height: 42px;

    padding: 0 14px;

    border:
        1px solid
        rgba(255,255,255,0.06);

    border-radius:
        8px 0 0 8px;

    outline: none;

    background: #08090a;

    color: #888b8f;

    font-size: 10px;
}

.result-row button {
    width: 90px;

    border:
        1px solid
        rgba(150,15,38,0.35);

    border-left: 0;

    border-radius:
        0 8px 8px 0;

    background:
        rgba(120,0,20,0.10);

    color: #a51a31;

    cursor: pointer;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.result-row button:hover {
    background:
        rgba(145,0,25,0.18);

    color: #d12743;
}

.result-file {
    margin-top: 10px;

    color: #3e4044;

    font-size: 8px;
}

#startUpload:disabled {
    opacity: 0.55;
    cursor: default;
}

@media(max-width: 700px) {

    .upload-result {
        width: 94vw;
    }

    .result-row input {
        font-size: 8px;
    }

}

/* ===== HUGE CENTERED DROPZONE ===== */

#upload {
    width: 100%;
}

#upload .hero {
    width: 100%;
    max-width: none;

    display: flex;
    flex-direction: column;
    align-items: center;

    margin: 0 auto;

    text-align: center;
}

.dropzone {
    width: 1200px;
    height: 620px;

    max-width: calc(100vw - 100px);

    margin-left: auto;
    margin-right: auto;
    margin-top: 45px;

    border-radius: 40px;
}

.file-selected,
.progress-area,
.upload-result {
    width: 1200px;

    max-width: calc(100vw - 100px);

    margin-left: auto;
    margin-right: auto;
}

.upload-icon {
    width: 105px;
    height: 105px;

    border-radius: 28px;
}

.upload-icon svg {
    width: 42px;
    height: 42px;
}

.dropzone strong {
    font-size: 20px;
}

.browse {
    font-size: 13px;
}

.max-size {
    font-size: 9px;
    bottom: 42px;
}

@media (max-width: 900px) {

    .dropzone {
        width: calc(100vw - 30px);
        max-width: none;

        height: 480px;

        border-radius: 30px;
    }

    .file-selected,
    .progress-area,
    .upload-result {
        width: calc(100vw - 30px);
        max-width: none;
    }

}



/* ============================================================
   MEDIA ART SELECTOR IN DROPZONE
   ============================================================ */

.media-types {
    width: calc(100% - 34px);

    margin-top: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    flex-wrap: wrap;
}

.media-type {
    position: relative;

    display: inline-flex;

    cursor: pointer;
}

.media-type input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.media-type span {
    min-width: 66px;
    height: 27px;

    padding: 0 9px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius: 4px;

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

    color: #66696d;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1.2px;

    transition:
        border-color .2s ease,
        color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.media-type:hover span {
    color: #aaa;

    border-color:
        rgba(255,255,255,0.13);
}

.media-type input:checked + span {
    color: #f0f0f0;

    border-color:
        rgba(178,13,41,0.72);

    background:
        rgba(120,0,20,0.11);

    box-shadow:
        0 0 8px rgba(178,13,41,0.20),
        inset 0 0 8px rgba(178,13,41,0.05);
}


/* ============================================================
   LIST PAGE
   ============================================================ */

.media-list-panel {
    width: min(1180px, 100%);

    margin:
        45px auto 0;

    padding:
        0;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,0.055);

    border-radius: 10px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(125,0,20,0.055),
            transparent 42%
        ),
        rgba(255,255,255,0.008);
}

.media-list-table {
    width: 100%;
}

.media-list-head,
.media-list-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        230px
        165px;

    align-items: center;

    text-align: left;
}

.media-list-head {
    min-height: 48px;

    padding:
        0 24px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.06);

    color: #5d6064;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 2px;
}

.media-list-row {
    min-height: 62px;

    padding:
        0 24px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.038);

    transition:
        background .2s ease;
}

.media-list-row:last-child {
    border-bottom: 0;
}

.media-list-row:hover {
    background:
        rgba(255,255,255,0.012);
}

.media-list-name {
    min-width: 0;

    padding-right: 25px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #c8c9ca;

    font-size: 11px;
}

.media-list-type {
    color: #777a7e;

    font-size: 9px;

    letter-spacing: .7px;
}

.media-list-download {
    display: flex;

    justify-content: flex-end;
}

.media-download-button {
    min-width: 105px;
    height: 31px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    text-decoration: none;

    border:
        1px solid
        rgba(164,13,38,0.32);

    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            rgba(123,7,28,0.14),
            rgba(45,3,11,0.10)
        );

    color: #a9abad;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1.7px;

    transition:
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.media-download-button:hover {
    color: #f0f0f0;

    border-color:
        rgba(178,13,41,0.72);

    background:
        rgba(125,0,22,0.16);

    box-shadow:
        0 0 13px
        rgba(178,13,41,0.14);
}

.media-list-empty {
    padding:
        65px 25px;

    text-align: center;

    color: #45474b;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .media-types {
        gap: 5px;
    }

    .media-type span {
        min-width: 58px;

        padding: 0 6px;

        font-size: 6px;
    }

    .media-list-panel {
        overflow-x: auto;
    }

    .media-list-table {
        min-width: 620px;
    }

}

/* LIST BOX = SAME STYLE AS DRAG & DROP BOX */

.media-list-panel {
    width: min(1180px, 100%);
    margin: 55px auto 0;

    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;

    background:
        radial-gradient(
            circle at center,
            rgba(125,0,20,0.045),
            transparent 65%
        ),
        rgba(255,255,255,0.008);

    transition: 0.25s ease;

    overflow: hidden;
}

.media-list-panel:hover {
    border-color: rgba(167,14,40,0.4);

    background:
        radial-gradient(
            circle at center,
            rgba(145,0,22,0.09),
            transparent 68%
        ),
        rgba(255,255,255,0.012);
}

/* LIST BOX = EXAKT DIE GRÖSSE DER DRAG & DROP BOX */

.media-list-panel {
    width: 430px !important;
    min-height: 270px;
    margin: 55px auto 0;
}


.media-list-head,
.media-list-row {
    grid-template-columns:
        minmax(0, 1fr)
        105px
        105px
        105px;
}

.media-list-uploader {
    color: #9a9ca0;
    font-size: 9px;
    letter-spacing: .7px;
}


/* LIST = GLEICHE AUSSENBREITE WIE UPLOAD CONTEXT */

.media-list-panel {
    width: 770px !important;
    max-width: 100% !important;
    min-height: 270px;
    margin: 55px auto 0;
}

/* 4 SPALTEN SAUBER AUF 770PX */

.media-list-head,
.media-list-row {
    grid-template-columns:
        minmax(0, 1fr)
        145px
        130px
        125px;
}


/* LIST CONTEXT = GLEICHE GRÖSSE WIE UPLOAD CONTEXT */

.media-list-panel {
    width: 1200px !important;
    max-width: calc(100vw - 50px) !important;
    min-height: 620px !important;

    margin: 55px auto 0 !important;
}

/* SPALTEN SAUBER AUF 1200PX VERTEILEN */

.media-list-head,
.media-list-row {
    grid-template-columns:
        minmax(0, 1fr)
        190px
        180px
        150px;
}


/* LIST INHALT OBEN STARTEN */

.media-list-panel {
    display: block !important;
}

.media-list-table {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.media-list-head {
    margin-top: 0 !important;
}

#mediaListRows {
    margin: 0 !important;
    padding: 0 !important;
}

/* LIST INHALT OBEN STARTEN */

.media-list-panel {
    display: block !important;
}

.media-list-table {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.media-list-head {
    margin-top: 0 !important;
}

#mediaListRows {
    margin: 0 !important;
    padding: 0 !important;
}


/* LIST HEADER GRÖSSER + MITTIG ÜBER DER BOX */

#list .section-head {
    width: 1200px !important;
    max-width: calc(100vw - 50px) !important;
    margin: 0 auto !important;
    text-align: center !important;
}

#list .section-head .kicker {
    font-size: 12px !important;
    letter-spacing: 3px !important;
    margin-bottom: 16px !important;
}

#list .section-head h1 {
    font-size: 54px !important;
    line-height: 1.05 !important;
    letter-spacing: -1px !important;
}

#list .section-head p {
    margin-top: 16px !important;
    font-size: 15px !important;
    letter-spacing: .4px !important;
}


/* UPLOAD + LIST + LINKS HEADER = GLEICHE GRÖSSE */

#upload .kicker,
#list .section-head .kicker,
#links .section-head .kicker {
    font-size: 12px !important;
    letter-spacing: 3px !important;
    margin-bottom: 16px !important;
}

#upload h1,
#list .section-head h1,
#links .section-head h1 {
    font-size: 54px !important;
    line-height: 1.05 !important;
    letter-spacing: -1px !important;
}

#upload .subtitle,
#list .section-head p,
#links .section-head p {
    margin-top: 16px !important;
    font-size: 15px !important;
    letter-spacing: .4px !important;
}


/* =========================================================
   LIST - NAME | LAUFZEIT | ART | UPLOADER | DOWNLOAD
   ========================================================= */

.media-list-head,
.media-list-row {
    grid-template-columns:
        minmax(0, 1fr)
        135px
        165px
        170px
        145px !important;
}

/* LAUFZEIT ROT */

.media-list-runtime {
    color: #b90f2e !important;
    font-size: 10px !important;
    font-weight: 700;
    letter-spacing: .8px;
}

/* UPLOADER ROT */

.media-list-uploader {
    color: #b90f2e !important;
    font-weight: 700;
}

/* HEADER BLEIBT DEZENT */

.media-list-head > div {
    white-space: nowrap;
}



/* =========================================================
   BYQZENG ACCOUNT
========================================================= */

.qmedia-account {
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:11px;
}

.qmedia-account-name {
    color:#a5a5a8;
    font-size:9px;
    font-weight:700;
    letter-spacing:1.1px;
    white-space:nowrap;
}

.qmedia-avatar {
    width:38px;
    height:38px;

    flex:0 0 38px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    border-radius:50%;

    border:
        1px solid
        rgba(185,15,46,.42);

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(185,15,46,.18),
            rgba(12,13,16,.96) 68%
        );

    color:#d0d0d2;

    font-size:12px;
    font-weight:900;

    text-decoration:none;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.02),
        0 0 18px rgba(185,15,46,.08);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        color .2s ease;
}

.qmedia-avatar:hover {
    color:#fff;

    border-color:
        rgba(210,20,55,.8);

    box-shadow:
        0 0 22px
        rgba(185,15,46,.20);
}

.qmedia-avatar img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

@media (max-width:700px) {

    .qmedia-account-name {
        display:none;
    }

    .qmedia-avatar {
        width:34px;
        height:34px;
        flex-basis:34px;
    }
}


/* =========================================================
   ACCOUNT DROPDOWN
========================================================= */

.qmedia-account {
    position:relative;
}

.qmedia-account-trigger {
    display:flex;
    align-items:center;
    gap:11px;

    margin:0;
    padding:0;

    border:0;
    outline:0;

    background:transparent;

    font:inherit;
    cursor:pointer;
}

.qmedia-account-trigger .qmedia-account-name {
    transition:
        color .18s ease,
        text-shadow .18s ease;
}

.qmedia-account-trigger:hover .qmedia-account-name {
    color:#d3d3d5;
    text-shadow:
        0 0 10px rgba(185,15,46,.18);
}

.qmedia-account-dropdown {
    position:absolute;

    top:calc(100% + 12px);
    right:0;

    width:160px;

    padding:7px;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius:10px;

    background:
        linear-gradient(
            180deg,
            rgba(22,23,27,.96),
            rgba(11,12,15,.97)
        );

    box-shadow:
        0 18px 45px rgba(0,0,0,.50),
        0 0 20px rgba(185,15,46,.06);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    opacity:0;
    visibility:hidden;

    transform:
        translateY(-5px)
        scale(.98);

    transform-origin:
        top right;

    transition:
        opacity .16s ease,
        transform .16s ease,
        visibility .16s ease;

    z-index:9999;
}

.qmedia-account-dropdown.open {
    opacity:1;
    visibility:visible;

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

.qmedia-account-dropdown a {
    display:flex;
    align-items:center;

    min-height:36px;

    padding:
        0 11px;

    border-radius:7px;

    color:#a9a9ad;

    font-size:10px;
    font-weight:700;

    letter-spacing:.7px;

    text-decoration:none;

    transition:
        color .16s ease,
        background .16s ease;
}

.qmedia-account-dropdown a:hover {
    color:#fff;

    background:
        rgba(185,15,46,.13);
}


/* =========================================================
   PROFILE GLASS
========================================================= */

.qmedia-profile-menu-btn {
    width:100%;
    min-height:36px;
    padding:0 11px;

    display:flex;
    align-items:center;

    border:0;
    border-radius:7px;

    background:transparent;

    color:#a9a9ad;

    font-size:10px;
    font-weight:700;
    letter-spacing:.7px;

    cursor:pointer;
    text-align:left;

    transition:
        color .16s ease,
        background .16s ease;
}

.qmedia-profile-menu-btn:hover {
    color:#fff;
    background:rgba(185,15,46,.13);
}

.profile-glass-backdrop {
    position:fixed;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:30px;

    background:rgba(3,4,6,.70);

    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;

    z-index:20000;
}

.profile-glass-backdrop.open {
    opacity:1;
    visibility:visible;
}

.profile-glass-window {
    position:relative;

    width:min(720px, calc(100vw - 40px));
    max-height:calc(100vh - 60px);

    overflow:auto;

    padding:34px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(27,29,34,.88),
            rgba(11,12,16,.92)
        );

    box-shadow:
        0 30px 90px rgba(0,0,0,.65),
        0 0 45px rgba(185,15,46,.08),
        inset 0 1px 0 rgba(255,255,255,.04);

    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);

    opacity:0;

    transform:
        translateY(15px)
        scale(.975);

    display:none;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.profile-glass-window.open {
    display:block;
    opacity:1;

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

.profile-glass-kicker {
    color:#b90f2e;

    font-size:9px;
    font-weight:900;

    letter-spacing:2px;

    margin-bottom:7px;
}

.profile-glass-window h2 {
    margin:0 0 28px;

    color:#e5e5e7;

    font-size:21px;
    font-weight:800;

    letter-spacing:1.4px;
}

.profile-glass-close {
    position:absolute;

    top:16px;
    right:18px;

    width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0;
    border-radius:50%;

    background:rgba(255,255,255,.035);

    color:#888b90;

    font-size:22px;
    line-height:1;

    cursor:pointer;

    transition:
        color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.profile-glass-close:hover {
    color:#e51b43;
    background:rgba(185,15,46,.12);
}

.profile-glass-close:active {
    transform:scale(.90);
}

.profile-avatar-edit {
    display:flex;
    align-items:center;

    gap:18px;

    margin-bottom:28px;
}

.profile-avatar-preview,
.profile-show-avatar {
    width:92px;
    height:92px;

    flex:0 0 92px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    border-radius:50%;

    border:
        1px solid rgba(185,15,46,.45);

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(185,15,46,.20),
            rgba(10,11,14,.98) 70%
        );

    color:#ddd;

    font-size:25px;
    font-weight:900;

    box-shadow:
        0 0 30px rgba(185,15,46,.10);
}

.profile-avatar-preview img,
.profile-show-avatar img {
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.profile-image-button {
    height:36px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 15px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:8px;

    background:rgba(255,255,255,.025);

    color:#aaa;

    font-size:9px;
    font-weight:800;

    letter-spacing:1px;

    cursor:pointer;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.profile-image-button:hover {
    color:#fff;
    border-color:rgba(185,15,46,.38);
    background:rgba(185,15,46,.08);
}

.profile-image-button input {
    display:none;
}

.profile-form-grid {
    display:grid;

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

    gap:14px;
}

.profile-form-grid label,
.profile-description-field {
    display:flex;
    flex-direction:column;
    gap:7px;
}

.profile-form-grid label > span,
.profile-description-field > span {
    color:#777a80;

    font-size:8px;
    font-weight:800;

    letter-spacing:1.2px;
}

.profile-form-grid input,
.profile-description-field textarea {
    width:100%;

    box-sizing:border-box;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius:9px;

    outline:0;

    background:
        rgba(5,6,8,.46);

    color:#ddd;

    font:inherit;
}

.profile-form-grid input {
    height:43px;
    padding:0 13px;
}

.profile-description-field {
    margin-top:16px;
}

.profile-description-field textarea {
    min-height:130px;

    padding:13px;

    resize:vertical;
}

.profile-form-grid input:focus,
.profile-description-field textarea:focus {
    border-color:
        rgba(185,15,46,.48);

    box-shadow:
        0 0 0 2px
        rgba(185,15,46,.05);
}

.profile-save-button {
    width:100%;
    height:46px;

    margin-top:18px;

    border:
        1px solid rgba(185,15,46,.45);

    border-radius:9px;

    background:
        linear-gradient(
            180deg,
            rgba(185,15,46,.20),
            rgba(110,8,27,.15)
        );

    color:#ddd;

    font-size:10px;
    font-weight:900;

    letter-spacing:1.4px;

    cursor:pointer;
}

.profile-save-button:hover {
    color:#fff;

    background:
        linear-gradient(
            180deg,
            rgba(185,15,46,.28),
            rgba(110,8,27,.20)
        );
}

.profile-save-button:disabled {
    opacity:.45;
    cursor:default;
}

.profile-save-message {
    min-height:20px;

    margin-top:13px;

    font-size:10px;
    font-weight:700;

    letter-spacing:.4px;
}

.profile-save-message.success {
    color:#5fd693;
}

.profile-save-message.error {
    color:#e3546e;
}


/* SHOW PROFILE */

.profile-show-window {
    width:min(560px, calc(100vw - 40px));

    text-align:center;
}

.profile-show-avatar {
    margin:0 auto 18px;
}

.profile-show-name {
    color:#eee;

    font-size:20px;
    font-weight:800;

    letter-spacing:.7px;
}

.profile-show-data {
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:12px;

    margin-top:27px;
}

.profile-show-data > div,
.profile-show-description {
    padding:15px;

    border:
        1px solid rgba(255,255,255,.055);

    border-radius:10px;

    background:
        rgba(255,255,255,.018);
}

.profile-show-data span,
.profile-show-description > span {
    display:block;

    margin-bottom:8px;

    color:#b90f2e;

    font-size:8px;
    font-weight:900;

    letter-spacing:1.3px;
}

.profile-show-data strong {
    color:#b8b8bb;

    font-size:11px;
    font-weight:700;
}

.profile-show-description {
    margin-top:12px;

    text-align:left;
}

.profile-show-description p {
    margin:0;

    color:#a8a8ac;

    font-size:11px;
    line-height:1.7;

    white-space:pre-wrap;
}

@media (max-width:700px) {

    .profile-glass-backdrop {
        padding:15px;
    }

    .profile-glass-window {
        width:100%;
        max-height:calc(100vh - 30px);

        padding:25px 18px;
    }

    .profile-form-grid {
        grid-template-columns:1fr;
    }

    .profile-show-data {
        grid-template-columns:1fr;
    }
}


/* =========================================================
   SHOW PROFILE STATS
========================================================= */

.profile-show-window {
    width:min(760px, calc(100vw - 40px));
}

.profile-stat-grid {
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:11px;

    margin-top:22px;
}

.profile-stat-card {
    min-height:82px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    border:
        1px solid rgba(255,255,255,.055);

    border-radius:11px;

    background:
        rgba(255,255,255,.018);
}

.profile-stat-card span {
    margin-bottom:8px;

    color:#73767c;

    font-size:8px;
    font-weight:900;

    letter-spacing:1.3px;
}

.profile-stat-card strong {
    color:#e0e0e2;

    font-size:18px;
    font-weight:900;
}

.profile-stat-card small {
    margin-top:4px;

    color:#666a70;

    font-size:7px;
}


/* USER RATING */

.profile-rating-box {
    margin-top:12px;

    padding:13px;

    border:
        1px solid rgba(255,255,255,.05);

    border-radius:10px;

    background:
        rgba(255,255,255,.015);
}

.profile-rating-box > span {
    display:block;

    margin-bottom:7px;

    color:#72757a;

    font-size:8px;
    font-weight:900;

    letter-spacing:1.2px;
}

.profile-stars {
    display:flex;

    justify-content:center;

    gap:4px;
}

.profile-stars button {
    padding:0;

    border:0;

    background:transparent;

    color:#45474c;

    font-size:22px;

    cursor:pointer;

    transition:
        color .15s ease,
        transform .15s ease,
        text-shadow .15s ease;
}

.profile-stars button:hover,
.profile-stars button.active {
    color:#b90f2e;

    text-shadow:
        0 0 12px rgba(185,15,46,.45);
}

.profile-stars button:hover {
    transform:scale(1.13);
}


/* UPLOAD LIST */

.profile-upload-section {
    margin-top:18px;

    text-align:left;
}

.profile-upload-title {
    margin-bottom:10px;

    color:#b90f2e;

    font-size:9px;
    font-weight:900;

    letter-spacing:1.5px;
}

.profile-upload-head,
.profile-upload-row {
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        120px
        100px;

    align-items:center;

    gap:12px;
}

.profile-upload-head {
    padding:
        0 12px 8px;

    color:#65686e;

    font-size:7px;
    font-weight:900;

    letter-spacing:1px;
}

.profile-upload-list {
    max-height:250px;

    overflow-y:auto;

    padding-right:3px;
}

.profile-upload-row {
    min-height:45px;

    margin-bottom:5px;

    padding:
        0 12px;

    border:
        1px solid rgba(255,255,255,.045);

    border-radius:8px;

    background:
        rgba(255,255,255,.014);

    color:#a9a9ac;

    font-size:9px;
}

.profile-upload-row-name {
    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

    color:#c6c6c8;
}

.profile-upload-row-type {
    color:#777a80;
}

.profile-upload-row-downloads {
    color:#b90f2e;
}

.profile-upload-empty {
    padding:25px;

    text-align:center;

    color:#62656a;

    font-size:9px;
}

@media (max-width:700px) {

    .profile-stat-grid {
        grid-template-columns:1fr;
    }

    .profile-upload-head,
    .profile-upload-row {
        grid-template-columns:
            minmax(0,1fr)
            75px
            70px;
    }

}
/* QMEDIA ADMIN DELETE BUTTON */
.qmedia-admin-delete {
    margin-left:10px;
    border:1px solid rgba(185,15,46,.65);
    background:rgba(185,15,46,.12);
    color:#d92a49;
    padding:7px 10px;
    border-radius:7px;
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
    cursor:pointer;
}
.qmedia-admin-delete:hover {
    background:#b90f2e;
    color:#fff;
    box-shadow:0 0 16px rgba(185,15,46,.38);
}
.qmedia-admin-delete:disabled {
    opacity:.45;
    cursor:default;
}
/* QMEDIA LIST ALIGN + ADMIN EDIT */
.media-list-head > :nth-child(2),
.media-list-head > :nth-child(3),
.media-list-head > :nth-child(4),
.media-list-head > :nth-child(5),
.media-list-row > :nth-child(2),
.media-list-row > :nth-child(3),
.media-list-row > :nth-child(4),
.media-list-row > :nth-child(5) {
    text-align: center !important;
    justify-content: center !important;
}

.media-list-head,
.media-list-row {
    grid-template-columns:
        minmax(0, 1fr)
        135px
        165px
        170px
        205px !important;
}

.qmedia-admin-delete {
    display: none !important;
}

.qmedia-download-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
}





.qmedia-edit-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0,0,0,.68);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}

.qmedia-edit-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.qmedia-edit-panel {
    position: relative;
    width: min(620px, calc(100vw - 36px));
    padding: 34px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    background: rgba(11,12,15,.92);
    box-shadow: 0 24px 80px rgba(0,0,0,.60), 0 0 35px rgba(185,15,46,.12);
    transform: translateY(12px) scale(.985);
    transition: transform .22s ease;
}

.qmedia-edit-backdrop.open .qmedia-edit-panel {
    transform: translateY(0) scale(1);
}

.qmedia-edit-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: #777;
    font-size: 27px;
    cursor: pointer;
}

.qmedia-edit-close:hover {
    color: #b90f2e;
}

.qmedia-edit-kicker {
    color: #b90f2e;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    margin-bottom: 6px;
}

.qmedia-edit-title {
    color: #f3f3f3;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 28px;
}

.qmedia-edit-label {
    display: block;
    margin: 18px 0 8px;
    color: #858585;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.qmedia-edit-linkrow {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px;
}

.qmedia-edit-link,
.qmedia-edit-category {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 9px;
    outline: none;
    background: rgba(255,255,255,.045);
    color: #ddd;
    padding: 0 13px;
}

.qmedia-edit-link:focus,
.qmedia-edit-category:focus {
    border-color: rgba(185,15,46,.65);
}

.qmedia-edit-copy,
.qmedia-edit-save,
.qmedia-edit-delete {
    min-height: 44px;
    border-radius: 9px;
    padding: 0 16px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    cursor: pointer;
}

.qmedia-edit-copy {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.055);
    color: #bbb;
}

.qmedia-edit-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
}

.qmedia-edit-delete {
    border: 1px solid rgba(185,15,46,.50);
    background: transparent;
    color: #d62a48;
}

.qmedia-edit-delete:hover {
    background: rgba(185,15,46,.14);
}

.qmedia-edit-save {
    margin-left: auto;
    border: 1px solid #b90f2e;
    background: #b90f2e;
    color: #fff;
}

.qmedia-edit-save:hover {
    box-shadow: 0 0 18px rgba(185,15,46,.35);
}

@media (max-width: 700px) {
    .qmedia-edit-panel {
        padding: 28px 20px 22px;
    }

    .qmedia-edit-linkrow {
        grid-template-columns: 1fr;
    }
}

/* EDIT = DOWNLOAD STYLE / RED COLOR */




/* EDIT BUTTON - DOWNLOAD STYLE / RED */




/* EDIT 1:1 SIZE LIKE DOWNLOAD */





/* QMEDIA EDIT FINAL - SAME BUTTON AS DOWNLOAD */
.media-list-head,
.media-list-row {
    grid-template-columns:
        minmax(0, 1fr)
        135px
        165px
        170px
        230px !important;
}

.qmedia-download-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
}

.qmedia-admin-edit {
    color: #d62a48 !important;
    border-color: rgba(185,15,46,.65) !important;
}

.qmedia-admin-edit:hover {
    color: #ffffff !important;
    background: #b90f2e !important;
    border-color: #b90f2e !important;
}

/* =========================================================
   QMEDIA — CRIMSON GLASS THEME
   ========================================================= */

:root {
    --qg-bg: #09090c;
    --qg-bg-2: #131318;
    --qg-panel: rgba(24,24,30,.72);
    --qg-panel-dark: rgba(14,14,18,.82);

    --qg-text: #f5f5f7;
    --qg-muted: #8e8f98;

    --qg-red: #d51f45;
    --qg-red-dark: #7d0c27;
    --qg-red-soft: rgba(213,31,69,.12);

    --qg-line: rgba(220,30,65,.28);
    --qg-line-soft: rgba(255,255,255,.08);

    --qg-glow:
        0 0 22px rgba(213,31,69,.22);

    --qg-shadow:
        0 20px 70px rgba(0,0,0,.50);
}


/* ---------- PAGE ---------- */

html,
body {
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(213,31,69,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 15%,
            rgba(125,12,39,.10),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            var(--qg-bg-2),
            var(--qg-bg)
        ) !important;

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


/* ---------- MAIN GLASS BOXES ---------- */

.media-list-panel,
.profile-glass-window {
    background:
        linear-gradient(
            145deg,
            rgba(27,27,34,.78),
            rgba(12,12,17,.82)
        ) !important;

    border:
        1px solid
        var(--qg-line) !important;

    border-radius: 18px !important;

    box-shadow:
        var(--qg-shadow),
        inset 0 1px 0 rgba(255,255,255,.035) !important;

    backdrop-filter:
        blur(22px) saturate(115%) !important;

    -webkit-backdrop-filter:
        blur(22px) saturate(115%) !important;
}


/* ---------- LIST HEADER ---------- */

.media-list-head {
    color: var(--qg-muted) !important;

    background:
        rgba(10,10,14,.46) !important;

    border-bottom:
        1px solid
        var(--qg-line-soft) !important;
}


/* ---------- LIST ROW ---------- */

.media-list-row {
    border-bottom:
        1px solid
        rgba(255,255,255,.055) !important;

    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease !important;
}

.media-list-row:hover {
    background:
        rgba(213,31,69,.055) !important;

    border-color:
        rgba(213,31,69,.16) !important;

    box-shadow:
        inset 3px 0 0
        rgba(213,31,69,.70) !important;
}


/* ---------- NAME ---------- */

.media-list-name {
    color: #f5f5f7 !important;
}


/* ---------- RUNTIME ---------- */

.media-list-runtime {
    color: var(--qg-red) !important;

    text-shadow:
        0 0 12px
        rgba(213,31,69,.20);
}


/* ---------- TYPE ---------- */

.media-list-type {
    color: #8e8f98 !important;
}


/* ---------- UPLOADER ---------- */

.media-list-uploader {
    color: var(--qg-red) !important;

    transition:
        color .18s ease,
        text-shadow .18s ease,
        transform .18s ease !important;
}

.media-list-uploader:hover {
    color: #ff4165 !important;

    text-shadow:
        0 0 12px
        rgba(213,31,69,.45) !important;
}


/* ---------- DOWNLOAD BUTTON ---------- */

.media-download-button {
    border:
        1px solid
        rgba(255,255,255,.10) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        ) !important;

    color:
        #d8d8dc !important;

    border-radius:
        8px !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.035) !important;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease !important;
}

.media-download-button:hover {
    color:
        #ffffff !important;

    border-color:
        rgba(213,31,69,.58) !important;

    background:
        rgba(213,31,69,.11) !important;

    box-shadow:
        0 0 18px
        rgba(213,31,69,.18) !important;
}


/* ---------- ADMIN EDIT ---------- */

.media-download-button.qmedia-admin-edit {
    color:
        var(--qg-red) !important;

    border-color:
        rgba(213,31,69,.46) !important;

    background:
        rgba(213,31,69,.055) !important;
}

.media-download-button.qmedia-admin-edit:hover {
    color:
        #ffffff !important;

    background:
        var(--qg-red) !important;

    border-color:
        var(--qg-red) !important;

    box-shadow:
        0 0 20px
        rgba(213,31,69,.32) !important;
}


/* ---------- PROFILE GLASS ---------- */

.profile-glass-window {
    color:
        var(--qg-text) !important;
}

.profile-glass-kicker {
    color:
        var(--qg-red) !important;

    text-shadow:
        0 0 15px
        rgba(213,31,69,.28) !important;
}

.profile-glass-window h2 {
    color:
        #ffffff !important;
}


/* ---------- PROFILE AVATAR ---------- */

.profile-show-avatar {
    border:
        1px solid
        rgba(213,31,69,.52) !important;

    background:
        rgba(213,31,69,.08) !important;

    box-shadow:
        0 0 24px
        rgba(213,31,69,.20) !important;

    color:
        var(--qg-red) !important;
}


/* ---------- PROFILE STATS ---------- */

.profile-stat-card {
    background:
        rgba(8,8,12,.46) !important;

    border:
        1px solid
        rgba(255,255,255,.065) !important;

    border-radius:
        12px !important;

    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease !important;
}

.profile-stat-card:hover {
    background:
        rgba(213,31,69,.055) !important;

    border-color:
        rgba(213,31,69,.28) !important;

    box-shadow:
        0 0 18px
        rgba(213,31,69,.10) !important;
}

.profile-stat-card strong {
    color:
        var(--qg-red) !important;
}


/* ---------- RATING STARS ---------- */

#profileRatingStars button {
    color:
        #55565d !important;

    transition:
        color .15s ease,
        text-shadow .15s ease,
        transform .15s ease !important;
}

#profileRatingStars button:hover,
#profileRatingStars button.active {
    color:
        var(--qg-red) !important;

    text-shadow:
        0 0 13px
        rgba(213,31,69,.45) !important;
}


/* ---------- PROFILE UPLOAD LIST ---------- */

.profile-upload-row {
    border-color:
        rgba(255,255,255,.055) !important;

    transition:
        background .18s ease !important;
}

.profile-upload-row:hover {
    background:
        rgba(213,31,69,.055) !important;
}


/* ---------- CLOSE X ---------- */

.profile-glass-close {
    color:
        #8e8f98 !important;

    border-color:
        rgba(255,255,255,.08) !important;

    background:
        rgba(255,255,255,.025) !important;
}

.profile-glass-close:hover {
    color:
        #ffffff !important;

    border-color:
        var(--qg-red) !important;

    background:
        var(--qg-red) !important;

    box-shadow:
        var(--qg-glow) !important;
}


/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background:
        rgba(0,0,0,.22);
}

::-webkit-scrollbar-thumb {
    background:
        rgba(213,31,69,.32);

    border-radius:
        10px;
}

::-webkit-scrollbar-thumb:hover {
    background:
        rgba(213,31,69,.58);
}


/* QMEDIA TOPBAR + FOOTER FINAL */
.topbar {
    background: rgba(9,9,12,.88) !important;
    border-bottom: 1px solid rgba(213,31,69,.14) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,.28) !important;
    backdrop-filter: blur(20px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(115%) !important;
}

.topbar::after {
    background: linear-gradient(90deg,transparent,rgba(213,31,69,.45),transparent) !important;
}

footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 !important;
    background: rgba(9,9,12,.90) !important;
    border-top: 1px solid rgba(213,31,69,.12) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    color: #666870 !important;
    font-size: 9px !important;
    letter-spacing: 1.2px !important;
    z-index: 90 !important;
}

footer .footer-dot {
    color: #7d0c27 !important;
}

footer a {
    color: #8e8f98 !important;
    text-decoration: none !important;
    transition: color .18s ease,text-shadow .18s ease !important;
}

footer a:hover {
    color: #d51f45 !important;
    text-shadow: 0 0 10px rgba(213,31,69,.35) !important;
}

/* QMEDIA UPLOAD + LINKS SAME GLASS AS LIST */
#upload .upload-box,
#upload .upload-panel,
#upload .drop-zone,
#links .links-panel,
#links .links-box {
    background: linear-gradient(180deg, rgba(24,24,30,.72), rgba(14,14,18,.82)) !important;
    border: 1px solid rgba(213,31,69,.20) !important;
    box-shadow: 0 20px 70px rgba(0,0,0,.50), 0 0 22px rgba(213,31,69,.12) !important;
    backdrop-filter: blur(22px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(115%) !important;
}

/* QMEDIA UPLOAD = EXACT SAME GLASS AS LIST */
.dropzone {
    background:
        linear-gradient(
            145deg,
            rgba(27,27,34,.78),
            rgba(12,12,17,.82)
        ) !important;

    border:
        1px solid
        var(--qg-line) !important;

    border-radius: 18px !important;

    box-shadow:
        var(--qg-shadow),
        inset 0 1px 0 rgba(255,255,255,.035) !important;

    backdrop-filter:
        blur(22px) saturate(115%) !important;

    -webkit-backdrop-filter:
        blur(22px) saturate(115%) !important;
}


/* QMEDIA LINKS = EXACT SAME GLASS AS LIST */
#links .content-panel {
    background:
        linear-gradient(
            145deg,
            rgba(27,27,34,.78),
            rgba(12,12,17,.82)
        ) !important;

    border:
        1px solid
        var(--qg-line) !important;

    border-radius: 18px !important;

    box-shadow:
        var(--qg-shadow),
        inset 0 1px 0 rgba(255,255,255,.035) !important;

    backdrop-filter:
        blur(22px) saturate(115%) !important;

    -webkit-backdrop-filter:
        blur(22px) saturate(115%) !important;
}


/* QMEDIA FOOTER LINK FINAL */
footer {
    z-index: 9999 !important;
    pointer-events: auto !important;
}

footer .footer-qzeng-link {
    position: relative !important;
    z-index: 10000 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    color: #8e8f98 !important;
    text-decoration: none !important;
}

footer .footer-qzeng-link:hover {
    color: #d51f45 !important;
    text-shadow: 0 0 10px rgba(213,31,69,.35) !important;
}


/* TOPBAR NAV: NORMAL WHITE / ACTIVE RED */
.topbar nav a,
.topbar .nav-link {
    color: #ffffff !important;
}

.topbar nav a.active,
.topbar .nav-link.active {
    color: #d51f45 !important;
}


/* TOPBAR MENU FINAL */
header.topbar .menu .menu-item {
    color: #ffffff !important;
}

header.topbar .menu .menu-item.active {
    color: #d51f45 !important;
}


/* TOPBAR MENU CENTER FINAL */
.topbar .menu {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}


/* UPLOAD COLORS = 1:1 LIST */
.dropzone,
.dropzone:hover,
.dropzone.drag-active {
    background:
        linear-gradient(
            145deg,
            rgba(27,27,34,.78),
            rgba(12,12,17,.82)
        ) !important;

    border:
        1px solid
        var(--qg-line) !important;

    box-shadow:
        var(--qg-shadow),
        inset 0 1px 0 rgba(255,255,255,.035) !important;

    backdrop-filter:
        blur(22px) saturate(115%) !important;

    -webkit-backdrop-filter:
        blur(22px) saturate(115%) !important;
}

/* alte rote Upload-Ecken farblich entfernen */
.dropzone::before,
.dropzone::after {
    border-color: transparent !important;
}


/* ACCOUNT + AVATAR RIGHT FINAL */
.topbar .qmedia-account {
    position: absolute !important;
    right: 48px !important;
    left: auto !important;
}


/* UPLOAD PAGE BACKGROUND = LIST RED BACKGROUND */
#upload {
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(213,31,69,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 15%,
            rgba(125,12,39,.10),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            var(--qg-bg-2),
            var(--qg-bg)
        ) !important;
}


/* PAGE BACKGROUND FIXED = SAME ON UPLOAD + LIST */
html,
body {
    background-attachment: fixed !important;
    background-size: 100vw 100vh !important;
    background-repeat: no-repeat !important;
}

/* REMOVE EXTRA UPLOAD PAGE BACKGROUND */
#upload {
    background: transparent !important;
}


/* =========================================================
   MOBILE TOPBAR + SIDEBAR
   Desktop keeps the existing menu/account layout.
========================================================= */

.mobile-menu-toggle,
.mobile-sidebar-backdrop {
    display: none;
}

.mobile-sidebar {
    display: contents;
}

@media (max-width: 700px) {

    body.mobile-sidebar-open {
        overflow: hidden;
    }

    .topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        height: calc(70px + env(safe-area-inset-top)) !important;

        grid-template-columns: 44px 1fr 44px !important;
        align-items: center !important;

        padding:
            env(safe-area-inset-top)
            16px
            0 !important;

        overflow: visible !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        z-index: 10001 !important;
    }

    .topbar .brand {
        grid-column: 2;
        justify-self: center !important;
    }

    .mobile-menu-toggle {
        grid-column: 1;
        justify-self: start;

        position: relative;
        z-index: 3;

        width: 44px;
        height: 44px;

        display: grid;
        align-content: center;
        justify-items: center;
        gap: 5px;

        margin: 0;
        padding: 0;

        border: 1px solid rgba(213,31,69,.24);
        border-radius: 10px;
        outline: none;

        background:
            linear-gradient(
                145deg,
                rgba(27,27,34,.82),
                rgba(12,12,17,.88)
            );

        color: #fff;
        cursor: pointer;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.04),
            0 0 18px rgba(213,31,69,.08);
    }

    .mobile-menu-toggle span {
        width: 20px;
        height: 2px;

        display: block;

        border-radius: 999px;
        background: currentColor;

        transition:
            transform .22s ease,
            opacity .18s ease,
            background .18s ease;
    }

    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus-visible,
    .mobile-menu-toggle.is-open {
        color: #d51f45;
        border-color: rgba(213,31,69,.55);
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .mobile-sidebar {
        position: fixed;
        top: calc(70px + env(safe-area-inset-top));
        bottom: calc(42px + env(safe-area-inset-bottom));
        left: 0;

        width: min(86vw, 340px);

        display: flex;
        flex-direction: column;
        gap: 18px;

        padding: 22px 18px 28px;

        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;

        border-right: 1px solid rgba(213,31,69,.18);

        background:
            radial-gradient(
                circle at 0 0,
                rgba(213,31,69,.12),
                transparent 34%
            ),
            linear-gradient(
                155deg,
                rgba(18,18,23,.985),
                rgba(7,7,10,.99)
            );

        box-shadow: 24px 0 60px rgba(0,0,0,.52);

        transform: translateX(-105%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition:
            transform .26s ease,
            opacity .22s ease,
            visibility .26s ease;

        z-index: 2;
    }

    .mobile-sidebar.open {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .mobile-sidebar-backdrop {
        position: fixed;
        top: calc(70px + env(safe-area-inset-top));
        right: 0;
        bottom: calc(42px + env(safe-area-inset-bottom));
        left: 0;

        width: 100%;

        display: block;

        margin: 0;
        padding: 0;

        border: 0;
        outline: 0;

        background: rgba(0,0,0,.58);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition:
            opacity .22s ease,
            visibility .22s ease;

        z-index: 1;
    }

    .mobile-sidebar-backdrop.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .topbar .mobile-sidebar .menu {
        position: static !important;
        left: auto !important;

        width: 100%;
        height: auto;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;

        transform: none !important;
    }

    .topbar .mobile-sidebar .menu-item {
        width: 100%;
        height: 52px;

        flex: 0 0 52px;

        padding: 0 16px;

        border: 1px solid rgba(255,255,255,.055);
        border-radius: 10px;

        background: rgba(255,255,255,.018);

        font-size: 10px;
        letter-spacing: 2.4px;
        text-align: left;
    }

    .topbar .mobile-sidebar .menu-item:hover,
    .topbar .mobile-sidebar .menu-item:focus-visible {
        border-color: rgba(213,31,69,.25);
        background: rgba(213,31,69,.07);
    }

    .topbar .mobile-sidebar .menu-item.active {
        border-color: rgba(213,31,69,.34);
        background: rgba(213,31,69,.09);
    }

    .topbar .mobile-sidebar .menu-item.active::after {
        top: 50%;
        bottom: auto;
        left: 0;

        width: 2px;
        height: 24px;

        transform: translateY(-50%);
    }

    .topbar .mobile-sidebar .qmedia-account {
        position: static !important;
        right: auto !important;
        left: auto !important;

        order: -1;

        width: 100%;

        display: block;

        margin: 0;
    }

    .topbar .mobile-sidebar .qmedia-account-trigger {
        width: 100%;
        min-height: 70px;

        justify-content: flex-start;

        padding: 12px 14px;

        border: 1px solid rgba(213,31,69,.20);
        border-radius: 12px;

        background:
            linear-gradient(
                145deg,
                rgba(27,27,34,.76),
                rgba(12,12,17,.82)
            );

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.035),
            0 14px 32px rgba(0,0,0,.22);
    }

    .topbar .mobile-sidebar .qmedia-account-name {
        display: block !important;

        flex: 1 1 auto;

        overflow: hidden;

        font-size: 10px;
        letter-spacing: 1.2px;
        text-align: left;
        text-overflow: ellipsis;
    }

    .topbar .mobile-sidebar .qmedia-avatar {
        width: 44px;
        height: 44px;

        flex: 0 0 44px;
    }

    .topbar .mobile-sidebar .qmedia-account-dropdown {
        position: static;

        width: 100%;
        max-height: 0;

        overflow: hidden;

        margin: 0;
        padding: 0 7px;

        border-color: transparent;

        opacity: 0;
        visibility: hidden;

        transform: none;

        transition:
            max-height .22s ease,
            margin .22s ease,
            padding .22s ease,
            opacity .18s ease,
            visibility .22s ease;
    }

    .topbar .mobile-sidebar .qmedia-account-dropdown.open {
        max-height: 110px;

        margin-top: 8px;
        padding: 7px;

        border-color: rgba(255,255,255,.07);

        opacity: 1;
        visibility: visible;

        transform: none;
    }

    .page {
        padding-top:
            calc(120px + env(safe-area-inset-top));

        padding-bottom:
            calc(90px + env(safe-area-inset-bottom));
    }

    footer {
        position: fixed !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        height:
            calc(42px + env(safe-area-inset-bottom)) !important;

        padding-bottom: env(safe-area-inset-bottom);

        white-space: nowrap;

        font-size: clamp(7px, 2.2vw, 9px) !important;

        z-index: 9999 !important;
    }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {

    .mobile-menu-toggle span,
    .mobile-sidebar,
    .mobile-sidebar-backdrop,
    .topbar .mobile-sidebar .qmedia-account-dropdown {
        transition: none;
    }
}

/* UPLOAD HEADER COLORS */
#upload .kicker,
#upload .subtitle {
    color: #921127 !important;
}


/* LIST HEADER COLORS */
#list .section-head .kicker,
#list .section-head p {
    color: #921127 !important;
}


/* QMEDIA MOBILE — ENDLESS BACKGROUND + NAME/DOWNLOAD ONLY */
@media (max-width: 700px) {

    /* Hintergrund bleibt beim Scrollen durchgehend sichtbar */
    html {
        background: #09090c !important;
    }

    body {
        position: relative !important;
        isolation: isolate !important;
        background: transparent !important;
    }

    body::before {
        content: none !important;
        display: none !important;
    }

    body::after {
        content: "" !important;

        position: fixed !important;
        inset: 0 !important;

        display: block !important;

        pointer-events: none !important;

        background:
            repeating-radial-gradient(
                circle at 20% 30%,
                rgba(255,255,255,.025) 0,
                transparent 1px,
                transparent 4px
            ),
            radial-gradient(
                circle at 15% 10%,
                rgba(213,31,69,.10),
                transparent 28%
            ),
            radial-gradient(
                circle at 85% 15%,
                rgba(125,12,39,.10),
                transparent 30%
            ),
            linear-gradient(
                145deg,
                #131318,
                #09090c
            ) !important;

        background-repeat: no-repeat !important;
        background-size: cover !important;

        z-index: -1 !important;
    }

    /* LIST-Box auf mobile Breite bringen */
    #list .media-list-panel {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    #list .media-list-table {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Nur zwei Spalten: NAME und DOWNLOAD */
    #list .media-list-head,
    #list .media-list-row {
        grid-template-columns:
            minmax(0, 1fr)
            105px !important;

        column-gap: 12px !important;

        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* Laufzeit, Art und Uploader ausblenden */
    #list .media-list-head > :nth-child(2),
    #list .media-list-head > :nth-child(3),
    #list .media-list-head > :nth-child(4),
    #list .media-list-runtime,
    #list .media-list-type,
    #list .media-list-uploader {
        display: none !important;
    }

    #list .media-list-name {
        grid-column: 1 !important;
        min-width: 0 !important;
        padding-right: 0 !important;
    }

    #list .media-list-head > :nth-child(5),
    #list .media-list-download {
        grid-column: 2 !important;
    }

    /* Mobil wirklich nur DOWNLOAD, ohne Admin-EDIT */
    #list .qmedia-admin-edit {
        display: none !important;
    }
}







/* =========================================================
   QMEDIA QCINEMA BRAND COPY START
   exact QCinema top-left brand
========================================================= */

header.topbar .brand.qmedia-qcinema-copy {
    justify-self: start !important;

    display: inline-flex !important;
    align-items: center !important;

    gap: 8px !important;

    width: auto !important;
    height: 34px !important;

    padding: 0 12px 0 0 !important;
    margin: 0 !important;

    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    letter-spacing: 4px !important;

    border:
        1px solid rgba(213,31,69,.20) !important;

    border-radius:
        5px !important;

    background:
        rgba(20,20,26,.82) !important;

    background-image:
        none !important;

    overflow:
        hidden !important;

    box-shadow:
        0 20px 70px rgba(0,0,0,.50),
        0 0 22px rgba(213,31,69,.12),
        inset 0 1px 0 rgba(255,255,255,.035) !important;

    backdrop-filter:
        blur(22px) saturate(115%) !important;

    -webkit-backdrop-filter:
        blur(22px) saturate(115%) !important;
}


/* QCINEMA LINKS */

header.topbar
.brand.qmedia-qcinema-copy
.brand-q {

    width: auto !important;
    min-width: 0 !important;

    height: 34px !important;

    padding:
        0 13px !important;

    margin:
        -1px 0 -1px -1px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border:
        0 !important;

    border-right:
        1px solid #d51f45 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    color:
        #d51f45 !important;

    font-size:
        15px !important;

    font-weight:
        700 !important;

    letter-spacing:
        0 !important;

    white-space:
        nowrap !important;
}


/* BY QZENG.DEV RECHTS */

header.topbar
.brand.qmedia-qcinema-copy
> span:last-child {

    align-self:
        stretch !important;

    display:
        flex !important;

    align-items:
        center !important;

    padding-left:
        4px !important;

    background:
        transparent !important;

    color:
        #ffffff !important;

    letter-spacing:
        0 !important;

    word-spacing:
        0 !important;

    font-kerning:
        normal !important;

    white-space:
        nowrap !important;
}


/* MOBILE = QCINEMA */

@media (max-width:700px) {

    header.topbar
    .brand.qmedia-qcinema-copy {

        max-width:
            calc(100vw - 140px) !important;

        height:
            32px !important;

        padding-right:
            9px !important;

        gap:
            7px !important;

        background:
            rgba(20,20,26,.82) !important;

        background-image:
            none !important;

        border:
            1px solid rgba(213,31,69,.20) !important;

        box-shadow:
            0 20px 70px rgba(0,0,0,.50),
            0 0 22px rgba(213,31,69,.12),
            inset 0 1px 0 rgba(255,255,255,.035) !important;

        backdrop-filter:
            blur(22px) saturate(115%) !important;

        -webkit-backdrop-filter:
            blur(22px) saturate(115%) !important;
    }


    header.topbar
    .brand.qmedia-qcinema-copy
    .brand-q {

        width:
            auto !important;

        min-width:
            0 !important;

        height:
            32px !important;

        padding:
            0 9px !important;

        font-size:
            9px !important;

        letter-spacing:
            1px !important;
    }


    header.topbar
    .brand.qmedia-qcinema-copy
    > span:last-child {

        padding-left:
            2px !important;

        font-size:
            9px !important;

        letter-spacing:
            0 !important;

        word-spacing:
            0 !important;
    }
}

/* QMEDIA QCINEMA BRAND COPY END */


/* =========================================================
   QCRYPT
   ========================================================= */

.qcrypt-head {
    text-align: center;
}

.qcrypt-kicker {
    color: #d51f45 !important;
}

.qcrypt-title {
    color: #ffffff !important;
}

.qcrypt-subtitle {
    color: #d51f45 !important;
}

.qcrypt-panel {
    width: min(900px, calc(100% - 40px));
    margin: 30px auto 0;
}

.qcrypt-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qcrypt-label {
    margin-top: 8px;
    color: rgba(255,255,255,.78);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.qcrypt-label span {
    color: #d51f45;
}

.qcrypt-input,
.qcrypt-textarea {
    width: 100%;
    border: 1px solid rgba(213,31,69,.22);
    border-radius: 12px;
    background: rgba(0,0,0,.30);
    color: #fff;
    outline: none;
    padding: 15px 17px;
    font: inherit;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.qcrypt-input:focus,
.qcrypt-textarea:focus {
    border-color: rgba(213,31,69,.75);
    background: rgba(0,0,0,.42);
    box-shadow: 0 0 22px rgba(213,31,69,.10);
}

.qcrypt-textarea {
    min-height: 260px;
    resize: vertical;
    line-height: 1.55;
}

.qcrypt-create {
    align-self: center;
    min-width: 230px;
    margin-top: 15px;
    padding: 14px 25px;
    border: 1px solid rgba(213,31,69,.45);
    border-radius: 12px;
    background: rgba(213,31,69,.12);
    color: #fff;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    transition: .2s ease;
}

.qcrypt-create:hover {
    background: rgba(213,31,69,.22);
    border-color: rgba(213,31,69,.85);
    box-shadow: 0 0 24px rgba(213,31,69,.15);
}

.qcrypt-create:disabled {
    opacity: .45;
    cursor: wait;
}

.qcrypt-message {
    min-height: 20px;
    text-align: center;
    color: #d51f45;
    font-size: 13px;
    font-weight: 700;
}

.qcrypt-result {
    margin-top: 12px;
    padding: 20px;
    border: 1px solid rgba(213,31,69,.25);
    border-radius: 14px;
    background: rgba(0,0,0,.24);
    text-align: center;
}

.qcrypt-result-kicker {
    color: #d51f45;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.qcrypt-result-url {
    margin: 15px 0;
    color: #fff;
    word-break: break-all;
}

.qcrypt-result-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.qcrypt-result-actions button,
.qcrypt-result-actions a {
    border: 1px solid rgba(213,31,69,.35);
    border-radius: 9px;
    padding: 10px 18px;
    background: rgba(213,31,69,.10);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

@media (max-width: 700px) {
    .qcrypt-panel {
        width: calc(100% - 20px);
    }

    .qcrypt-textarea {
        min-height: 210px;
    }

    .qcrypt-result-actions {
        flex-direction: column;
    }
}


/* =========================================================
   QCRYPT FINAL ALIGNMENT
   ========================================================= */

/* exakt dasselbe Rot wie UPLOAD / LIST */
#links .qcrypt-kicker,
#links .qcrypt-subtitle {
    color: #921127 !important;
}

/* QCrypt Titel wie normale Seitenüberschrift */
#links .qcrypt-title {
    color: #e9e9ea !important;
}

/* Header exakt normale Section-Breite */
#links .qcrypt-head {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto 42px !important;
    text-align: center !important;
}

/* Contextbox = normale Contentbox, NICHT Dropzone-Größe */
#links .qcrypt-panel {
    width: 100% !important;
    max-width: 900px !important;
    min-height: 320px !important;
    margin: 0 auto !important;
    padding: 35px !important;
}

/* Formular innerhalb der Contextbox */
#links .qcrypt-form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
}

@media (max-width: 950px) {
    #links .qcrypt-head,
    #links .qcrypt-panel {
        width: calc(100% - 30px) !important;
        max-width: 900px !important;
    }
}


/* =========================================================
   QCRYPT CONTEXTBOX 1200 x 620
   ========================================================= */

#links .qcrypt-panel {
    width: 1200px !important;
    max-width: calc(100vw - 50px) !important;

    height: 620px !important;
    min-height: 620px !important;

    margin: 0 auto !important;
    padding: 35px 45px !important;

    box-sizing: border-box !important;
}

#links .qcrypt-form {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
}

@media (max-width: 700px) {
    #links .qcrypt-panel {
        width: calc(100% - 20px) !important;
        max-width: none !important;
        height: auto !important;
        min-height: 620px !important;
        padding: 25px 20px !important;
    }
}

/* QCrypt Erfolg-/Statusmeldung 5px tiefer */
#links .qcrypt-message {
    transform: translateY(5px) !important;
}

/* =========================================================
   QCRYPT – BOX HÖHER + RESULT BUTTONS VOLLE BREITE
   ========================================================= */

/* Hauptbox vertikal vergrößern */
#links .qcrypt-panel {
    height: 720px !important;
    min-height: 720px !important;
}

/* Ergebnisbereich volle Breite */
#links .qcrypt-result {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* COPY LINK + OPEN gemeinsam über komplette Boxbreite */
#links .qcrypt-result-actions {
    display: flex !important;
    width: 100% !important;
    gap: 12px !important;
    box-sizing: border-box !important;
}

#links .qcrypt-result-actions button,
#links .qcrypt-result-actions a {
    flex: 1 1 0 !important;
    width: 50% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Mobile weiterhin automatisch */
@media (max-width: 700px) {
    #links .qcrypt-panel {
        height: auto !important;
        min-height: 720px !important;
    }
}

/* =========================================================
   QCRYPT RESULT INNERHALB HAUPTBOX + RESET
   ========================================================= */

#links .qcrypt-panel {
    position: relative !important;
    height: 790px !important;
    min-height: 790px !important;
}

/* Reset oben rechts */
#links .qcrypt-reset {
    position: absolute !important;
    top: 18px !important;
    right: 22px !important;
    z-index: 5 !important;

    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(213,31,69,.22) !important;
    border-radius: 9px !important;

    background: rgba(0,0,0,.18) !important;
    color: #6d6e73 !important;

    font-size: 22px !important;
    line-height: 1 !important;

    cursor: pointer !important;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        transform .25s ease,
        box-shadow .2s ease !important;
}

#links .qcrypt-reset:hover {
    color: #d51f45 !important;
    border-color: rgba(213,31,69,.65) !important;
    background: rgba(213,31,69,.08) !important;
    box-shadow: 0 0 18px rgba(213,31,69,.12) !important;
    transform: rotate(90deg) !important;
}

/* Result gehört jetzt optisch zur großen Box */
#links .qcrypt-result {
    width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 8px 0 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    box-sizing: border-box !important;
}

/* Container Created */
#links .qcrypt-result-kicker {
    margin: 0 0 9px !important;
}

/* fertiger Crypt-Link */
#links .qcrypt-result-url {
    width: 100% !important;
    margin: 0 0 12px !important;

    color: #fff !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* COPY + OPEN komplette Formularbreite */
#links .qcrypt-result-actions {
    display: flex !important;
    width: 100% !important;
    gap: 12px !important;
    margin: 0 !important;
}

#links .qcrypt-result-actions button,
#links .qcrypt-result-actions a {
    flex: 1 1 0 !important;
    width: 50% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Mobile */
@media (max-width: 700px) {
    #links .qcrypt-panel {
        height: auto !important;
        min-height: 790px !important;
    }

    #links .qcrypt-result-actions {
        flex-direction: column !important;
    }

    #links .qcrypt-result-actions button,
    #links .qcrypt-result-actions a {
        width: 100% !important;
    }
}

/* =========================================================
   QCRYPT – DYNAMISCHE BOXHÖHE
   Normal 620px / mit Ergebnis wächst sie nach unten
   ========================================================= */

#links .qcrypt-panel {
    height: 620px !important;
    min-height: 620px !important;
    overflow: hidden !important;
    transition:
        height .35s ease,
        min-height .35s ease !important;
}

/* Nur wenn CREATE-Ergebnis sichtbar ist */
#links .qcrypt-panel:has(#qcryptResult:not([hidden])) {
    height: 735px !important;
    min-height: 735px !important;
}

/* Result bleibt innerhalb der Hauptbox */
#links .qcrypt-result {
    width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 8px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* Link */
#links .qcrypt-result-url {
    width: 100% !important;
    margin: 8px 0 12px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* COPY LINK + OPEN über komplette Innenbreite */
#links .qcrypt-result-actions {
    display: flex !important;
    width: 100% !important;
    gap: 12px !important;
    margin: 0 !important;
}

#links .qcrypt-result-actions button,
#links .qcrypt-result-actions a {
    flex: 1 1 0 !important;
    width: 50% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Mobile keine feste Höhe */
@media (max-width: 700px) {
    #links .qcrypt-panel,
    #links .qcrypt-panel:has(#qcryptResult:not([hidden])) {
        height: auto !important;
        min-height: 620px !important;
    }
}

/* QCrypt Result: beim Erstellen weiter nach unten aufklappen */
#links .qcrypt-panel:has(#qcryptResult:not([hidden])) {
    height: 885px !important;
    min-height: 885px !important;
}

/* QCrypt: X LINKS ENCRYPTED weitere 10px nach unten */
#links .qcrypt-message {
    transform: translateY(15px) !important;
}

/* =========================================================
   QCRYPT 4 BUTTON RESULT BAR
   ========================================================= */

#links .qcrypt-result-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
}

#links .qcrypt-result-actions button,
#links .qcrypt-result-actions a {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    padding: 0 8px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    font-size: 10px !important;
    white-space: nowrap !important;
}

@media (max-width: 700px) {
    #links .qcrypt-result-actions {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* QCrypt Result Buttons -> gleicher Hover wie CREATE CONTAINER */
#links .qcrypt-result-actions button:hover,
#links .qcrypt-result-actions a:hover {
    background: #d51f45 !important;
    border-color: #d51f45 !important;
    color: #ffffff !important;
    box-shadow: var(--qg-glow) !important;
}

#links .qcrypt-result-actions button:active,
#links .qcrypt-result-actions a:active {
    background: #7d0c27 !important;
    border-color: #d51f45 !important;
    color: #ffffff !important;
}

/* QCrypt Result Buttons - exakt CREATE CONTAINER Hover */
#links .qcrypt-result-actions button:hover,
#links .qcrypt-result-actions a:hover {
    background: rgba(213,31,69,.22) !important;
    border-color: rgba(213,31,69,.85) !important;
    color: #fff !important;
    box-shadow: 0 0 24px rgba(213,31,69,.15) !important;
}

#links .qcrypt-result-actions button:active,
#links .qcrypt-result-actions a:active {
    background: rgba(213,31,69,.22) !important;
    border-color: rgba(213,31,69,.85) !important;
    color: #fff !important;
    box-shadow: 0 0 24px rgba(213,31,69,.15) !important;
}

/* QCrypt Result: Buttons zuerst, Created + URL darunter */
#links .qcrypt-result {
    display: grid !important;
    grid-template-columns: 1fr !important;
}

#links .qcrypt-result-actions {
    grid-row: 1 !important;
}

#links .qcrypt-result-kicker {
    grid-row: 2 !important;
    margin-top: 14px !important;
}

#links .qcrypt-result-url {
    grid-row: 3 !important;
    margin: 8px 0 0 !important;
}

/* QCrypt: 25px Abstand zwischen ENCRYPTED Meldung und Buttons */
#links .qcrypt-result-actions {
    margin-top: 25px !important;
}

/* MOBILE – HORIZONTAL SWIPE AUS */
@media (max-width: 800px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;

        overflow-x: hidden !important;
        overscroll-behavior-x: none !important;

        touch-action: pan-y !important;
    }

    .page,
    main,
    .main {
        width: 100% !important;
        max-width: 100% !important;

        overflow-x: hidden !important;
    }

}

/* =========================================================
   MEDIA MOBILE – BRAND MITTIG
   ========================================================= */
@media (max-width: 800px) {

    .topbar .brand.qmedia-qcinema-copy {
        position: absolute !important;

        left: 50% !important;
        right: auto !important;
        top: 50% !important;

        transform: translate(-50%, -50%) !important;

        margin: 0 !important;

        width: max-content !important;
        max-width: calc(100vw - 140px) !important;

        text-align: center !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 5px !important;

        white-space: nowrap !important;

        z-index: 20 !important;
    }

}

/* =========================================================
   MEDIA MOBILE – BRAND EXAKT VIEWPORT-MITTE
   ========================================================= */
@media (max-width: 800px) {

    .topbar .brand.qmedia-qcinema-copy {
        position: fixed !important;

        left: 50vw !important;
        right: auto !important;

        top: 155px !important;

        transform: translateX(-50%) !important;

        margin: 0 !important;

        width: max-content !important;
        max-width: calc(100vw - 150px) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;
        white-space: nowrap !important;

        z-index: 100 !important;
    }

}

/* MEDIA MOBILE – BRAND MITTIG IN DER TOPBAR */
@media (max-width: 800px) {

    .topbar .brand.qmedia-qcinema-copy {
        position: absolute !important;

        left: 50vw !important;
        right: auto !important;

        top: 50% !important;

        transform: translate(-50%, -50%) !important;

        margin: 0 !important;

        width: max-content !important;

        z-index: 100 !important;
    }

}

/* MEDIA MOBILE – BRAND WIRKLICH MITTIG */
@media (max-width: 800px) {

    .topbar .brand.qmedia-qcinema-copy {
        position: absolute !important;

        left: 0 !important;
        right: 0 !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

        width: max-content !important;
        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        z-index: 100 !important;
    }

}

/* MEDIA MOBILE – BRAND EXAKT DISPLAYMITTE + IN TOPBAR */
@media (max-width: 800px) {

    header.topbar .brand.qmedia-qcinema-copy {
        position: fixed !important;

        left: 50vw !important;
        right: auto !important;

        top: 58px !important;

        transform: translate(-50%, -50%) !important;

        margin: 0 !important;

        width: max-content !important;
        max-width: calc(100vw - 150px) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        white-space: nowrap !important;

        z-index: 500 !important;
    }

}

/* MEDIA MOBILE – BRAND HÖHER IN DIE TOPBAR */
@media (max-width: 800px) {

    header.topbar .brand.qmedia-qcinema-copy {
        top: 44px !important;
    }

}

/* MEDIA MOBILE – BRAND NOCH HÖHER */
@media (max-width: 800px) {

    header.topbar .brand.qmedia-qcinema-copy {
        top: 34px !important;
    }

}


/* =========================================================
   AROUND THE WORLD RADIO - HERO SIZE
   ========================================================= */

#radio .kicker {
    font-size: 12px !important;
    letter-spacing: 3px !important;
    margin-bottom: 16px !important;
}

#radio .hero h1 {
    font-size: 54px !important;
    line-height: 1.05 !important;
    letter-spacing: -1px !important;
}

#radio .subtitle {
    font-size: 11px !important;
}

/* ATW Subtitle Rot */
#radio .subtitle {
    color: #921127 !important;
}


/* =========================================================
   AROUND THE WORLD RADIO - CONTEXT BOX
   QCrypt Glass Panel als Basis
   ========================================================= */

#radio .atw-context-box {
    margin-top: 38px !important;
}


/* =========================================================
   ATW CONTEXTBOX = QCRYPT BOX EXAKT 1:1
   ========================================================= */

#radio .atw-context-box {
    width: 1200px !important;
    max-width: calc(100vw - 50px) !important;

    height: 620px !important;
    min-height: 620px !important;

    margin: 42px auto 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    background:
        linear-gradient(
            145deg,
            rgba(27,27,34,.78),
            rgba(12,12,17,.82)
        ) !important;

    border:
        1px solid
        rgba(220,30,65,.28) !important;

    border-radius: 18px !important;

    box-shadow:
        0 20px 70px rgba(0,0,0,.50),
        inset 0 1px 0 rgba(255,255,255,.035) !important;

    backdrop-filter:
        blur(22px) saturate(115%) !important;

    -webkit-backdrop-filter:
        blur(22px) saturate(115%) !important;

    overflow: hidden !important;
}

@media (max-width: 700px) {
    #radio .atw-context-box {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 620px !important;
    }
}

/* ATW Contextbox exakt mittig */
#radio .hero {
    width: 100% !important;
    max-width: none !important;
}

#radio .atw-context-box {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* =========================================================
   ATW - NASA WORLDWIND
   ========================================================= */

#radio .atw-context-box {
    position: relative !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#atwWorldWind {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 17px !important;

    background: #020204 !important;

    cursor: grab;
}

#atwWorldWind:active {
    cursor: grabbing;
}


/* =========================================================
   ATW GLOBE - CONTEXT GLASS HINTER DER KUGEL
   ========================================================= */

#radio .atw-context-box {
    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(213,31,69,.075) 0%,
            rgba(80,10,25,.035) 30%,
            transparent 62%
        ),
        linear-gradient(
            145deg,
            rgba(27,27,34,.78),
            rgba(12,12,17,.82)
        ) !important;

    border: 1px solid rgba(220,30,65,.28) !important;

    box-shadow:
        0 20px 70px rgba(0,0,0,.50),
        0 0 30px rgba(213,31,69,.08),
        inset 0 1px 0 rgba(255,255,255,.035) !important;

    backdrop-filter: blur(22px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(115%) !important;
}


/* Canvas selbst transparent */
#atwWorldWind {
    background: transparent !important;
}


/* =========================================================
   ATW FULL WORLD VIEW
   Topbar / Footer / FX bleiben unverändert
   ========================================================= */

/* ATW Überschrift + Subtitle ausblenden */
#radio .kicker,
#radio .hero > h1,
#radio .hero > .subtitle {
    display: none !important;
}


/* Radio-Bereich über komplette verfügbare Fläche */
#radio,
#radio .hero {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Alte Contextbox komplett unsichtbar */
#radio .atw-context-box {
    position: relative !important;

    left: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: none !important;

    height: calc(100vh - 150px) !important;
    min-height: 650px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    overflow: hidden !important;
}


/* WorldWind über die komplette ATW-Fläche */
#atwWorldWind {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;

    background: transparent !important;
}


/* =========================================================
   ATW BIG GLOBE - NICHT ABSCHNEIDEN
   ========================================================= */

#radio {
    overflow: visible !important;
}

#radio .hero {
    overflow: visible !important;
}

#radio .atw-context-box {
    height: calc(100vh - 70px) !important;
    min-height: 0 !important;

    overflow: visible !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#atwWorldWind {
    width: 100% !important;
    height: 100% !important;

    overflow: visible !important;

    background: transparent !important;
}


/* Topbar + Footer bleiben über der Welt */
.topbar {
    position: relative !important;
    z-index: 100 !important;
}

footer,
.footer {
    position: relative !important;
    z-index: 100 !important;
}


/* =========================================================
   ATW TOPBAR COMPACT
   ========================================================= */

/* Avatar komplett ausblenden */
.topbar .qmedia-account img,
.topbar .qmedia-account-avatar,
.topbar .avatar,
.topbar [class*="avatar"] {
    display: none !important;
}


/* Topbar vertikal schmaler */
.topbar {
    min-height: 42px !important;
    height: 42px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    display: flex !important;
    align-items: center !important;
}


/* Logo/Brand passend mittig */
.topbar .brand {
    height: 30px !important;
    min-height: 30px !important;

    display: flex !important;
    align-items: center !important;
}


/* rechter Accountbereich ebenfalls mittig */
.topbar .qmedia-account,
.topbar .qmedia-account-trigger {
    height: 42px !important;
    min-height: 42px !important;

    display: flex !important;
    align-items: center !important;
}


/* Navigation mittig halten */
.topbar .menu {
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
}


/* =========================================================
   ATW FOOTER COMPACT + FIX UNTEN
   ========================================================= */

footer,
.footer {
    position: fixed !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;

    height: 28px !important;
    min-height: 28px !important;

    margin: 0 !important;
    padding: 0 20px !important;

    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    z-index: 100 !important;
}


/* Footer Text etwas kompakter */
footer *,
.footer * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 28px !important;
}


/* =========================================================
   ATW VERSION - TOPBAR RECHTS
   ========================================================= */

.atw-version-text {
    color: #921127 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    white-space: nowrap !important;
}

.topbar .qmedia-account-trigger {
    cursor: default !important;
}


/* =========================================================
   ATW RADIO PLAYER
   ========================================================= */

.atw-player {
    position: fixed;
    left: 50%;
    bottom: 38px;

    transform: translate(-50%, 130px);

    width: min(920px, calc(100vw - 40px));
    height: 74px;

    padding: 0 24px;

    box-sizing: border-box;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    background:
        linear-gradient(
            145deg,
            rgba(22,22,27,.92),
            rgba(8,8,12,.94)
        );

    border: 1px solid rgba(146,17,39,.35);
    border-radius: 15px;

    box-shadow:
        0 18px 55px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.035);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    opacity: 0;

    pointer-events: none;

    transition:
        transform .3s ease,
        opacity .3s ease;

    z-index: 500;
}

.atw-player.open {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}


.atw-player-station {
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 0;
}


.atw-live-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #921127;

    box-shadow:
        0 0 10px rgba(146,17,39,.65);
}


.atw-player-name {
    color: #f3f3f5;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.atw-player-location {
    margin-top: 4px;

    color: #921127;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.2px;
    text-transform: uppercase;
}


.atw-player-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}


.atw-player-controls button {
    width: 32px;
    height: 32px;

    padding: 0;

    display: grid;
    place-items: center;

    color: rgba(255,255,255,.82);

    background: transparent;

    border: 0;
    border-radius: 50%;

    cursor: pointer;

    font-size: 18px;

    transition:
        color .15s ease,
        background .15s ease,
        transform .15s ease;
}


.atw-player-controls button:hover {
    color: #fff;
    background: rgba(146,17,39,.20);
}


#atwPlay {
    width: 42px;
    height: 42px;

    background: #921127;

    color: #fff;

    font-size: 15px;
}


#atwPlay:hover {
    background: #a81430;
    transform: scale(1.05);
}


.atw-player-volume {
    justify-self: end;

    display: flex;
    align-items: center;
    gap: 10px;
}


.atw-player-volume span {
    color: #921127;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.4px;
}


#atwVolume {
    width: 110px;
    accent-color: #921127;
}


/* =========================================================
   ATW STATION LIST
   ========================================================= */

.atw-station-panel {
    position: fixed;

    right: 24px;
    top: 62px;

    width: 310px;
    max-height: calc(100vh - 190px);

    padding: 16px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            rgba(22,22,27,.94),
            rgba(8,8,12,.96)
        );

    border: 1px solid rgba(146,17,39,.32);
    border-radius: 15px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.55);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transform: translateX(360px);
    opacity: 0;

    pointer-events: none;

    transition:
        transform .3s ease,
        opacity .3s ease;

    z-index: 490;
}


.atw-station-panel.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}


.atw-station-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    margin-bottom: 14px;
}


.atw-place-name {
    color: #f4f4f6;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1px;
}


.atw-place-country {
    margin-top: 4px;

    color: #921127;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1px;
}


#atwStationClose {
    color: #777;

    background: transparent;
    border: 0;

    font-size: 20px;

    cursor: pointer;
}


#atwStationClose:hover {
    color: #921127;
}


.atw-station-list {
    max-height: calc(100vh - 270px);
    overflow-y: auto;
}


.atw-station-item {
    width: 100%;

    padding: 11px 10px;

    display: block;

    color: rgba(255,255,255,.78);
    text-align: left;

    background: transparent;

    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.045);

    cursor: pointer;

    font-size: 11px;

    transition:
        color .15s ease,
        background .15s ease;
}


.atw-station-item:hover,
.atw-station-item.active {
    color: #fff;

    background:
        rgba(146,17,39,.13);
}


@media (max-width: 700px) {

    .atw-player {
        width: calc(100vw - 20px);

        grid-template-columns: 1fr auto;

        padding: 0 14px;
    }

    .atw-player-volume {
        display: none;
    }

    .atw-station-panel {
        left: 10px;
        right: 10px;

        width: auto;
    }
}


/* =========================================================
   ATW MAPTILER GLOBE
   ========================================================= */

#atwMap {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #030406 !important;

    border: 0 !important;
    outline: 0 !important;

    overflow: hidden !important;
}


#radio .atw-context-box {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    height: calc(100vh - 70px) !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    overflow: hidden !important;
}


.maplibregl-map,
.maptiler-map {
    font-family:
        Arial,
        Helvetica,
        sans-serif !important;
}


.maplibregl-ctrl-bottom-left,
.maplibregl-ctrl-bottom-right,
.maptiler-ctrl-bottom-left,
.maptiler-ctrl-bottom-right {
    display: none !important;
}


/*
 * Map bleibt unter unserer UI.
 */

#atwMap {
    z-index: 1 !important;
}


.topbar {
    z-index: 100 !important;
}


footer,
.footer {
    z-index: 100 !important;
}


.atw-player {
    z-index: 500 !important;
}


/* =========================================================
   ATW MAPTILER + ORIGINAL BACKGROUND
   ========================================================= */

#atwMap {
    background: transparent !important;
}

#radio,
#radio .hero,
#radio .atw-context-box {
    background: transparent !important;
}

.maplibregl-map,
.maptiler-map,
.maplibregl-canvas-container,
.maptiler-canvas-container {
    background: transparent !important;
}

/*
 * Canvas transparent lassen, damit außerhalb
 * des Globus der vorhandene ATW Background/FX sichtbar ist.
 */

#atwMap canvas {
    background: transparent !important;
}


/*
 * Keine MapTiler Controls.
 */

.maplibregl-ctrl,
.maptiler-ctrl {
    display: none !important;
}


/* =========================================================
   ATW GLOBE VOR FOOTER-SCHATTEN
   ========================================================= */

#radio,
#radio .hero,
#radio .atw-context-box {
    position: relative !important;
    z-index: 20 !important;
}

#atwMap {
    position: absolute !important;
    z-index: 25 !important;
}

/*
 * Footer selbst bleibt sichtbar,
 * aber sein Schatten liegt hinter dem Globe.
 */
footer,
.footer {
    z-index: 15 !important;
}

/*
 * Topbar bleibt ganz oben.
 */
.topbar {
    z-index: 100 !important;
}

/*
 * Radio-Player weiterhin über allem.
 */
.atw-player {
    z-index: 500 !important;
}


/* =========================================================
   ATW RADIO PLAYER V2
   ========================================================= */

#atwStationPanel,
.atw-station-panel {
    display: none !important;
}


.atw-player {
    position: fixed !important;

    left: 50% !important;
    bottom: 42px !important;

    width: min(760px, calc(100vw - 40px)) !important;
    height: 72px !important;

    padding: 0 20px !important;

    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
    align-items: center !important;

    transform:
        translate(-50%, 125px) scale(.97) !important;

    opacity: 0 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            145deg,
            rgba(18,18,22,.88),
            rgba(5,5,8,.94)
        ) !important;

    border:
        1px solid rgba(213,31,69,.30) !important;

    border-radius: 16px !important;

    box-shadow:
        0 18px 55px rgba(0,0,0,.58),
        0 0 28px rgba(213,31,69,.06),
        inset 0 1px 0 rgba(255,255,255,.045) !important;

    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;

    transition:
        transform .32s cubic-bezier(.2,.8,.2,1),
        opacity .25s ease !important;

    box-sizing: border-box !important;

    z-index: 500 !important;
}


.atw-player.open {
    transform:
        translate(-50%,0) scale(1) !important;

    opacity: 1 !important;

    pointer-events: auto !important;
}


/* LEFT */

.atw-player-left {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 13px;
}


.atw-player-beacon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(213,31,69,.20),
            rgba(213,31,69,.04) 55%,
            transparent 70%
        );

    border:
        1px solid rgba(213,31,69,.20);
}


.atw-player-beacon span {
    width: 8px;
    height: 8px;

    display: block;

    border-radius: 50%;

    background: #D51F45;

    box-shadow:
        0 0 7px #D51F45,
        0 0 16px rgba(213,31,69,.65);
}


.atw-player-info {
    min-width: 0;
}


.atw-player-kicker {
    margin-bottom: 3px;

    color: #D51F45;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.7px;
}


.atw-player-name {
    max-width: 300px;

    color: #f4f4f6 !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    letter-spacing: .35px !important;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.atw-player-location {
    margin-top: 3px !important;

    color: rgba(255,255,255,.42) !important;

    font-size: 9px !important;
    font-weight: 600 !important;

    letter-spacing: .8px !important;
}


/* CENTER CONTROLS */

.atw-player-controls {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;
}


.atw-player-controls button {
    width: 34px !important;
    height: 34px !important;

    display: grid !important;
    place-items: center !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: transparent !important;

    color: rgba(255,255,255,.68) !important;

    font-size: 21px !important;

    cursor: pointer !important;

    transition:
        background .16s ease,
        color .16s ease,
        transform .16s ease !important;
}


.atw-player-controls button:hover {
    color: #fff !important;

    background:
        rgba(213,31,69,.13) !important;
}


#atwPlay {
    width: 44px !important;
    height: 44px !important;

    margin: 0 2px !important;

    color: #fff !important;

    background:
        #D51F45 !important;

    font-size: 14px !important;

    box-shadow:
        0 0 18px rgba(213,31,69,.24) !important;
}


#atwPlay:hover {
    background:
        #e52a51 !important;

    transform:
        scale(1.06) !important;
}


/* RIGHT / VOLUME */

.atw-player-right {
    justify-self: end;

    display: flex;
    align-items: center;

    gap: 10px;
}


.atw-player-volume-icon {
    color: rgba(255,255,255,.34);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.2px;
}


#atwVolume {
    width: 105px !important;

    accent-color:
        #D51F45 !important;

    cursor: pointer;
}


/* MOBILE */

@media (max-width: 700px) {

    .atw-player {
        bottom: 36px !important;

        width:
            calc(100vw - 18px) !important;

        height: 68px !important;

        padding:
            0 12px !important;

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

    .atw-player-right {
        display: none !important;
    }

    .atw-player-beacon {
        width: 28px;
        height: 28px;

        flex-basis: 28px;
    }

    .atw-player-name {
        max-width: 145px;
        font-size: 11px !important;
    }

    .atw-player-kicker {
        font-size: 7px;
    }

    #atwPlay {
        width: 40px !important;
        height: 40px !important;
    }

}


/* =========================================================
   ATW RADIO GARDEN MODE
   Player unsichtbar - Audio bleibt aktiv
   ========================================================= */

#atwPlayer,
.atw-player {
    display: none !important;
}



/* =========================================================
   ATW FIXED TUNING CURSOR
   ========================================================= */

#atwTunerCursor {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 38px;
    height: 38px;

    transform: translate(-50%,-50%);

    z-index: 80;

    pointer-events: none;
}


.atw-tuner-ring {
    position: absolute;

    inset: 0;

    border:
        1px solid rgba(255,255,255,.82);

    border-radius: 50%;

    box-shadow:
        0 0 0 1px rgba(0,0,0,.20),
        0 0 12px rgba(255,255,255,.10);
}


.atw-tuner-ring::before,
.atw-tuner-ring::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    background:
        rgba(255,255,255,.72);

    transform:
        translate(-50%,-50%);
}


.atw-tuner-ring::before {
    width: 52px;
    height: 1px;
}


.atw-tuner-ring::after {
    width: 1px;
    height: 52px;
}


.atw-tuner-dot {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 4px;
    height: 4px;

    transform:
        translate(-50%,-50%);

    border-radius: 50%;

    background: #D51F45;

    box-shadow:
        0 0 8px rgba(213,31,69,.8);
}


/* falschen Tuning-Cursor sicher deaktivieren */
#atwTunerCursor {
    display: none !important;
}

/* Player bleibt unsichtbar */
#atwPlayer,
.atw-player {
    display: none !important;
}



/* =========================================================
   ATW RADIO GARDEN CURSOR FINAL
   ========================================================= */

#atwTunerCursor {
    display: none !important;
}


#atwGardenCursor {
    position: absolute !important;

    left: 50%;
    top: 50%;

    width: 52px;
    height: 52px;

    border:
        2px solid rgba(255,255,255,.92);

    border-radius: 50%;

    background:
        rgba(255,255,255,.015);

    box-shadow:
        0 0 0 1px rgba(0,0,0,.22),
        0 0 8px rgba(255,255,255,.10);

    transform:
        translate(-50%,-50%);

    pointer-events: none !important;

    z-index: 90 !important;

    box-sizing: border-box;

    transition:
        left .10s linear,
        top .10s linear,
        border-color .15s ease,
        box-shadow .15s ease;
}


#atwGardenCursor.locked {
    border-color:
        rgba(255,255,255,1);

    box-shadow:
        0 0 0 1px rgba(0,0,0,.28),
        0 0 11px rgba(255,255,255,.18);
}


/* =========================================================
   ATW RADIO GARDEN PLAYER FINAL
   UNTEN LINKS
   ========================================================= */

#atwPlayer.atw-player {
    display: grid !important;

    position: fixed !important;

    left: 14px !important;
    bottom: 42px !important;

    width: 310px !important;
    height: 76px !important;

    padding:
        10px 12px !important;

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

    grid-template-rows:
        1fr auto !important;

    transform:
        translateY(110px) !important;

    opacity: 0 !important;

    pointer-events: none !important;

    border-radius:
        6px !important;

    background:
        rgba(8,8,10,.94) !important;

    border:
        1px solid rgba(213,31,69,.22) !important;

    box-shadow:
        0 10px 35px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.035) !important;

    backdrop-filter:
        blur(18px) !important;

    -webkit-backdrop-filter:
        blur(18px) !important;

    transition:
        transform .28s ease,
        opacity .22s ease !important;

    z-index:
        500 !important;
}


#atwPlayer.atw-player.open {
    transform:
        translateY(0) !important;

    opacity:
        1 !important;

    pointer-events:
        auto !important;
}


/* Senderinformation */

#atwPlayer .atw-player-left {
    grid-column:
        1 / 3;

    grid-row:
        1;

    gap:
        8px !important;
}


#atwPlayer .atw-player-beacon {
    width:
        9px !important;

    height:
        9px !important;

    flex:
        0 0 9px !important;

    border:
        0 !important;

    background:
        transparent !important;
}


#atwPlayer .atw-player-beacon span {
    width:
        7px !important;

    height:
        7px !important;

    background:
        #D51F45 !important;

    box-shadow:
        0 0 9px rgba(213,31,69,.8) !important;
}


#atwPlayer .atw-player-kicker {
    display:
        none !important;
}


#atwPlayer .atw-player-name {
    max-width:
        255px !important;

    color:
        #f4f4f5 !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;
}


#atwPlayer .atw-player-location {
    margin-top:
        1px !important;

    color:
        rgba(255,255,255,.48) !important;

    font-size:
        8px !important;

    letter-spacing:
        .25px !important;
}


/* Controls unten links */

#atwPlayer .atw-player-controls {
    grid-column:
        1;

    grid-row:
        2;

    justify-content:
        flex-start !important;

    gap:
        2px !important;
}


#atwPlayer .atw-player-controls button {
    width:
        25px !important;

    height:
        25px !important;

    font-size:
        16px !important;

    background:
        transparent !important;
}


#atwPlayer #atwPlay {
    width:
        28px !important;

    height:
        28px !important;

    margin:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    color:
        #ffffff !important;
}


#atwPlayer #atwPlay:hover,
#atwPlayer .atw-player-controls button:hover {
    color:
        #D51F45 !important;

    background:
        rgba(213,31,69,.08) !important;
}


/* Lautstärke rechts */

#atwPlayer .atw-player-right {
    grid-column:
        2;

    grid-row:
        2;

    align-self:
        center;

    gap:
        6px !important;
}


#atwPlayer .atw-player-volume-icon {
    display:
        none !important;
}


#atwPlayer #atwVolume {
    width:
        95px !important;

    height:
        3px;

    accent-color:
        #D51F45 !important;
}


/* Mobile */

@media (max-width:700px) {

    #atwPlayer.atw-player {
        left:
            8px !important;

        bottom:
            36px !important;

        width:
            270px !important;

        height:
            72px !important;
    }

    #atwPlayer .atw-player-right {
        display:
            flex !important;
    }

    #atwPlayer #atwVolume {
        width:
            70px !important;
    }
}