:root {
    --font-family: 'Stem';
    --text-color: #FFF;

    --scrollbar-width:10px;
    --scrollbar-border-radius:2px;

    --accent-color: #f1af4b;
    --accent-color-lighten: #f5bf6f;
    --accent-color-background: #f1af4b1a;
    --accent-color-outline: #f1af4b45;

    --font-size-xs: 8px;
    --font-size-small: 12px;
    --font-size: 14px;
    --font-size-large: 16px;
    --font-size-extralarge: 30px;
    --font-size-heading: 48px;

    --gap: 32px;
    --gap-medium: 16px;
    --gap-small: 8px;

    --input-height: 42px;
    --checkbox-size: 18px;
    --checkbox-border-radius: 3px;

    --switch-width: 32px;
    --switch-height: 18px;
    --switch-border-radius: 9px;

    --icon-size: 16px;
    --icon-size-small: 12px;
    --icon-size-medium: 20px;
    --icon-size-large: 28px;

    --button-height: 36px;

    --avatar-size: 36px;

    --burger-size: 22px;
    --burger-size-inner: calc(var(--burger-size) * 2.1);

    --border-radius: 12px;
    --border-radius-alt: 4px;

    --music-playlist-cover-size: 40px;
    --music-cover-size: 40px;
    --music-cover-size-small: 32px;

    --background-color: #f5f5f6;

    --box-shadow: rgba(0, 0, 0, .15) 0 1px 0 .5px, rgba(255, 255, 255, .07) 0 .5px 0 inset;
    --box-shadow-alt: rgba(0, 0, 0, 0.3) 0px 2px 4px -2px, rgba(0, 0, 0, 0.1) 0px 15px 24px -15px;
    --box-shadow-alt-inverted: rgba(0, 0, 0, 0.3) 0px -2px 4px -2px, rgba(0, 0, 0, 0.1) 0px -15px 24px -15px;
    --box-shadow-card: rgba(0, 0, 0, .03) 0 1px 0 .5px, rgba(255, 255, 255, .025) 0 .5px 0 inset;

    --warning-color: #fc983d;
    --alert-color: rgb(228, 95, 53);
    --success-color: #009961;

    --transition: .25s ease;
}


.template--day {
    --text-color: #515151;
    --text-color-alt: #FFF;
    --background-color-main: #f5f5f6;
    --background-color-main-opacity: rgba(245, 245, 246, 0.9);
    --background-color-alt: #FFF;
    --dropdown--background: #FFF;
}

.template--night {
    --text-color: #FFF;
    --text-color-alt: #bdbdbd;
    --background-color-main: #212121;
    --background-color-main-opacity: rgba(28, 28, 28, .7);
    --background-color-alt: #181818;
    --dropdown--background: rgb(17, 17, 17);
}

@media(max-width:1280px) {
    :root {
        --gap: 24px;
    }
}

@media (max-width: 720px) {
    :root {
        --font-size-extralarge: 24px;
        --gap-medium: 8px;
        --music-playlist-cover-size: 32px;
        --scrollbar-width:0px;
        --switch-width: 40px;
        --switch-height: 22px;
        --switch-border-radius: 11px;
    }
}

.template {
    opacity: 0;
    animation: appLoaded .5s forwards;
}

@keyframes appLoaded {
    20% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

*,
*:after,
*:before {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

@font-face {
    font-family: "Stem";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src:
        local("Stem"),
        local("Stem-Regular"),
        local("Stem Regular"),
        url("../fonts/Stem-Regular-TW.woff2") format("woff2"),
        url("../fonts/Stem-Regular-TW.woff") format("woff");
}

@font-face {
    font-family: "Stem";
    font-weight: 500;
    font-style: medium;
    font-display: swap;
    src:
        local("Stem-Medium"),
        local("Stem Medium"),
        url("../fonts/Stem-Medium-TW.woff2") format("woff2"),
        url("../fonts/Stem-Medium-TW.woff") format("woff");
}

html {
    line-height: 1.4;
    font-size: var(--font-size);
    min-width: 320px;
}

body {
    margin: 0;
    padding: 0;
    word-wrap: break-word;
    background: var(--background-color-main);
    color: var(--text-color);
    overflow-x: hidden;
    direction: ltr;
    text-rendering: optimizeSpeed;
    transition: color var(--transition), background-color var(--transition);
}

body,
input,
textarea,
select,
button {
    font-family: var(--font-family), Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400
}

a,
button,
input,
label,
select,
textarea {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
h5 {
    overflow-wrap: break-word;
    font-weight: 500;
    margin-top: 0
}

h1 {
    padding: 0;
    margin: 0 0 var(--gap) 0;
}

h2 {
    padding: 0;
    margin: 0 0 var(--gap-medium) 0;
}

h3 {
    padding: 0;
    margin: var(--gap) 0 0 0;
}

h3:first-child {
    margin-top: 0;
}

img {
    border: 0;
    max-width: 100%;
    display: block
}

a {
    color: var(--accent-color);
    transition: color var(--transition);
    text-decoration: none;
}

p:last-child {
    margin-bottom: 0
}

a:active,
a:hover {
    outline-width: 0;
    color: var(--accent-color-darken)
}

textarea {
    overflow: auto
}

/* SELECTION */
::selection {
    background: var(--accent-color);
    color: var(--text-color);
}

/* SCROLL */
*::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .1);
}

*::-webkit-scrollbar {
    width: var(--scrollbar-width);
    background-color: var(--background-color-main);
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    border-radius: var(--scrollbar-border-radius)
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-color);
}

/* WRAPPER */
.wrapper {
    margin: 0 auto;
    width: 100%;
}

@media (max-width:1920px) {
    .wrapper {
        padding: 0;
    }
}

@media (max-width: 720px) {
    .wrapper {
        padding: 0 0 0 0
    }
}

/* FORMS */
input[type="text"],
input[type="url"],
input[type="search"],
textarea {
    font-size: var(--font-size);
    width: 100%;
    border: 0;
    background-color: var(--background-color-main);
    outline: none;
    height: var(--input-height);
    padding: 0 var(--gap-medium);
    color: var(--text-color);
    resize: none;
    transition: all .22s ease
}

textarea {
    border-radius: var(--border-radius);
}

input[type="text"],
input[type="url"],
input[type="search"] {
    border-radius: calc(var(--input-height) / 2);
}

input[type="text"]:hover,
input[type="url"]:hover,
input[type="text"]:active,
input[type="text"]:focus,
input[type="url"]:active,
input[type="url"]:focus,
input[type="search"]:active,
input[type="search"]:focus,
textarea:hover,
textarea:focus {
    box-shadow: rgba(255, 255, 255, .12) 0 0 0 1px
}

input[type="text"]::placeholder,
input[type="url"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
    font-size: var(--font-size);
}

textarea {
    padding-top: var(--gap-small)
}

/* THEME CHECKBOX */
.checkbox-theme {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.checkbox-theme input {
    display: none;
}

.checkbox-theme label {
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}

.checkbox-theme label:after {
    content: "";
    display: block;
    position: absolute;
    width: var(--icon-size);
    height: var(--icon-size);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 302.4 302.4" style="fill:rgba(255,255,255,.8)"><path d="M204.8 97.6C191.2 84 172 75.2 151.2 75.2s-40 8.4-53.6 22.4c-13.6 13.6-22.4 32.8-22.4 53.6s8.8 40 22.4 53.6c13.6 13.6 32.8 22.4 53.6 22.4s40-8.4 53.6-22.4c13.6-13.6 22.4-32.8 22.4-53.6s-8.4-40-22.4-53.6zm-14.4 92.8c-10 10-24 16-39.2 16s-29.2-6-39.2-16-16-24-16-39.2 6-29.2 16-39.2 24-16 39.2-16 29.2 6 39.2 16 16 24 16 39.2-6 29.2-16 39.2zM292 140.8h-30.8c-5.6 0-10.4 4.8-10.4 10.4 0 5.6 4.8 10.4 10.4 10.4H292c5.6 0 10.4-4.8 10.4-10.4 0-5.6-4.8-10.4-10.4-10.4zM151.2 250.8c-5.6 0-10.4 4.8-10.4 10.4V292c0 5.6 4.8 10.4 10.4 10.4 5.6 0 10.4-4.8 10.4-10.4v-30.8c0-5.6-4.8-10.4-10.4-10.4zM258 243.6l-22-22c-3.6-4-10.4-4-14.4 0s-4 10.4 0 14.4l22 22c4 4 10.4 4 14.4 0s4-10.4 0-14.4zM151.2 0c-5.6 0-10.4 4.8-10.4 10.4v30.8c0 5.6 4.8 10.4 10.4 10.4 5.6 0 10.4-4.8 10.4-10.4V10.4c0-5.6-4.8-10.4-10.4-10.4zM258.4 44.4c-4-4-10.4-4-14.4 0l-22 22c-4 4-4 10.4 0 14.4 3.6 4 10.4 4 14.4 0l22-22c4-4 4-10.4 0-14.4zM41.2 140.8H10.4c-5.6 0-10.4 4.8-10.4 10.4s4.4 10.4 10.4 10.4h30.8c5.6 0 10.4-4.8 10.4-10.4 0-5.6-4.8-10.4-10.4-10.4zM80.4 221.6c-3.6-4-10.4-4-14.4 0l-22 22c-4 4-4 10.4 0 14.4s10.4 4 14.4 0l22-22c4-4 4-10.4 0-14.4zM80.4 66.4l-22-22c-4-4-10.4-4-14.4 0s-4 10.4 0 14.4l22 22c4 4 10.4 4 14.4 0s4-10.4 0-14.4z"/></svg>'), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312.999 312.999" style="fill:rgba(255,255,255,.8)"><path d="M305.6 178.053c-3.2-.8-6.4 0-9.2 2-10.4 8.8-22.4 16-35.6 20.8-12.4 4.8-26 7.2-40.4 7.2-32.4 0-62-13.2-83.2-34.4-21.2-21.2-34.4-50.8-34.4-83.2 0-13.6 2.4-26.8 6.4-38.8 4.4-12.8 10.8-24.4 19.2-34.4 3.6-4.4 2.8-10.8-1.6-14.4-2.8-2-6-2.8-9.2-2-34 9.2-63.6 29.6-84.8 56.8-20.4 26.8-32.8 60-32.8 96.4 0 43.6 17.6 83.2 46.4 112s68.4 46.4 112 46.4c36.8 0 70.8-12.8 98-34 27.6-21.6 47.6-52.4 56-87.6 2-6-1.2-11.6-6.8-12.8zm-61.2 83.6c-23.2 18.4-52.8 29.6-85.2 29.6-38 0-72.4-15.6-97.2-40.4-24.8-24.8-40.4-59.2-40.4-97.2 0-31.6 10.4-60.4 28.4-83.6 12.4-16 28-29.2 46-38.4-2 4.4-4 8.8-5.6 13.6-5.2 14.4-7.6 29.6-7.6 45.6 0 38 15.6 72.8 40.4 97.6s59.6 40.4 97.6 40.4c16.8 0 32.8-2.8 47.6-8.4 5.2-2 10.4-4 15.2-6.4-9.6 18.4-22.8 34.8-39.2 47.6z"/></svg>');
    background-position: var(--icon-size) center, right 0 center;
    background-repeat: no-repeat, no-repeat;
    background-size: var(--icon-size) auto, var(--icon-size) auto;
    transition: background-color var(--transition), background-position 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.checkbox-theme input:checked+label:after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 302.4 302.4" style="fill:rgba(0,0,0,.8)"><path d="M204.8 97.6C191.2 84 172 75.2 151.2 75.2s-40 8.4-53.6 22.4c-13.6 13.6-22.4 32.8-22.4 53.6s8.8 40 22.4 53.6c13.6 13.6 32.8 22.4 53.6 22.4s40-8.4 53.6-22.4c13.6-13.6 22.4-32.8 22.4-53.6s-8.4-40-22.4-53.6zm-14.4 92.8c-10 10-24 16-39.2 16s-29.2-6-39.2-16-16-24-16-39.2 6-29.2 16-39.2 24-16 39.2-16 29.2 6 39.2 16 16 24 16 39.2-6 29.2-16 39.2zM292 140.8h-30.8c-5.6 0-10.4 4.8-10.4 10.4 0 5.6 4.8 10.4 10.4 10.4H292c5.6 0 10.4-4.8 10.4-10.4 0-5.6-4.8-10.4-10.4-10.4zM151.2 250.8c-5.6 0-10.4 4.8-10.4 10.4V292c0 5.6 4.8 10.4 10.4 10.4 5.6 0 10.4-4.8 10.4-10.4v-30.8c0-5.6-4.8-10.4-10.4-10.4zM258 243.6l-22-22c-3.6-4-10.4-4-14.4 0s-4 10.4 0 14.4l22 22c4 4 10.4 4 14.4 0s4-10.4 0-14.4zM151.2 0c-5.6 0-10.4 4.8-10.4 10.4v30.8c0 5.6 4.8 10.4 10.4 10.4 5.6 0 10.4-4.8 10.4-10.4V10.4c0-5.6-4.8-10.4-10.4-10.4zM258.4 44.4c-4-4-10.4-4-14.4 0l-22 22c-4 4-4 10.4 0 14.4 3.6 4 10.4 4 14.4 0l22-22c4-4 4-10.4 0-14.4zM41.2 140.8H10.4c-5.6 0-10.4 4.8-10.4 10.4s4.4 10.4 10.4 10.4h30.8c5.6 0 10.4-4.8 10.4-10.4 0-5.6-4.8-10.4-10.4-10.4zM80.4 221.6c-3.6-4-10.4-4-14.4 0l-22 22c-4 4-4 10.4 0 14.4s10.4 4 14.4 0l22-22c4-4 4-10.4 0-14.4zM80.4 66.4l-22-22c-4-4-10.4-4-14.4 0s-4 10.4 0 14.4l22 22c4 4 10.4 4 14.4 0s4-10.4 0-14.4z"/></svg>'), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312.999 312.999" style="fill:rgba(255,255,255,.8)"><path d="M305.6 178.053c-3.2-.8-6.4 0-9.2 2-10.4 8.8-22.4 16-35.6 20.8-12.4 4.8-26 7.2-40.4 7.2-32.4 0-62-13.2-83.2-34.4-21.2-21.2-34.4-50.8-34.4-83.2 0-13.6 2.4-26.8 6.4-38.8 4.4-12.8 10.8-24.4 19.2-34.4 3.6-4.4 2.8-10.8-1.6-14.4-2.8-2-6-2.8-9.2-2-34 9.2-63.6 29.6-84.8 56.8-20.4 26.8-32.8 60-32.8 96.4 0 43.6 17.6 83.2 46.4 112s68.4 46.4 112 46.4c36.8 0 70.8-12.8 98-34 27.6-21.6 47.6-52.4 56-87.6 2-6-1.2-11.6-6.8-12.8zm-61.2 83.6c-23.2 18.4-52.8 29.6-85.2 29.6-38 0-72.4-15.6-97.2-40.4-24.8-24.8-40.4-59.2-40.4-97.2 0-31.6 10.4-60.4 28.4-83.6 12.4-16 28-29.2 46-38.4-2 4.4-4 8.8-5.6 13.6-5.2 14.4-7.6 29.6-7.6 45.6 0 38 15.6 72.8 40.4 97.6s59.6 40.4 97.6 40.4c16.8 0 32.8-2.8 47.6-8.4 5.2-2 10.4-4 15.2-6.4-9.6 18.4-22.8 34.8-39.2 47.6z"/></svg>');
    background-position: 0 center, right var(--icon-size) center;
}

.checkbox-theme input:disabled+label {
    cursor: not-allowed;
}

/* CHECKBOX */
.checkbox {
    align-self: flex-start;
}

.checkbox input {
    width: 0;
    height: 0;
    opacity: 0;
    padding: 0;
    margin: 0;
    position: absolute
}

.checkbox label {
    display: grid;
    grid-template-columns: var(--checkbox-size) 1fr;
    grid-template-rows: var(--checkbox-size) 0;
    grid-gap: 0 calc(var(--checkbox-size)/2);
    font-size: var(--font-size-small);
    cursor: pointer;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    color: var(--input-placeholder-color);
    line-height: calc(var(--checkbox-size) + 2px);
    /* Huh */
}

.checkbox label:before {
    content: '';
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    border-radius: var(--checkbox-border-radius);
    transform: scale(0);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    transition: transform var(--transition);
}

.checkbox label:after {
    content: '';
    position: absolute;
    display: block;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    background-color: var(--dropdown--background);
    border-radius: var(--checkbox-border-radius);
    box-shadow: var(--box-shadow);
    transition: all var(--transition);
}

.checkbox input:checked+label:before {
    transform: scale(.62);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20507.506%20507.506%22%20fill%3D%22%23fff%22%3E%0A%20%20%3Cpath%20d%3D%22M163.865%20436.934a54.228%2054.228%200%200%201-38.4-15.915L9.369%20304.966c-12.492-12.496-12.492-32.752%200-45.248%2012.496-12.492%2032.752-12.492%2045.248%200l109.248%20109.248L452.889%2079.942c12.496-12.492%2032.752-12.492%2045.248%200%2012.492%2012.496%2012.492%2032.752%200%2045.248L202.265%20421.019a54.228%2054.228%200%200%201-38.4%2015.915z%22%2F%3E%0A%3C%2Fsvg%3E");
}

.checkbox input:checked+label:after {
    background-color: var(--accent-color);
}

/* SWITCH */
.switch {
    align-self: flex-start;
}

.switch input {
    width: 0;
    height: 0;
    opacity: 0;
    padding: 0;
    margin: 0;
    position: absolute
}

.switch label {
    display: grid;
    grid-template-columns: var(--checkbox-size) 1fr;
    grid-template-rows: var(--checkbox-size) 0;
    grid-gap: 0 calc(var(--checkbox-size)/2);
    font-size: var(--font-size-small);
    cursor: pointer;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    color: var(--input-placeholder-color);
    line-height: calc(var(--checkbox-size) + 2px);
    /* Huh */
    transition: background-color var(--transition)
}

.switch label:before {
    content: '';
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    width: var(--switch-width);
    height: var(--switch-height);
    border-radius: var(--switch-border-radius);
    background: var(--background-color-main);
    transition: all var(--transition);
}

.switch label:after {
    content: '';
    position: absolute;
    display: block;
    background-color: var(--dropdown--background);
    z-index: 10;
    top: 2px;
    left: 2px;
    width: calc(var(--switch-height) - 4px);
    height: calc(var(--switch-height) - 4px);
    border-radius: 50%;
    transition: all var(--transition);
}

.switch input:checked+label:before {
    background: var(--accent-color-outline)
}

.switch input:checked+label:after {
    background-color: var(--accent-color);
    transform: translateX(100%);
}


/* ---------------------- */
.layout {
    position: relative;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-medium);
    padding: var(--gap-medium) var(--gap);
    background-color: var(--background-color-alt);
    border-bottom: rgba(255, 255, 255, .02) 1px solid;
}

.header__logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.header__logo img {
    display: block;
    max-height: calc(var(--gap) + var(--font-size));
    transition: filter var(--transition)
}

.timeline {
    cursor: pointer
}

.timeline svg {
    width: var(--icon-size-medium);
    height: var(--icon-size-medium);
    fill: var(--text-color);
    transition: fill var(--transition);
}

.timeline:hover svg {
    fill: var(--accent-color);
}

.header__search {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header__search [type="search"] {
    height: 52px;
    border-radius: 26px;
    box-shadow: var(--box-shadow-card);
    max-width: 600px
}

.header__user {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.header__user-avatar {
    -webkit-user-select: none;
    user-select: none;
    position: relative;
}

.user-avatar {
    border-radius: 50%;
    width: var(--avatar-size);
    height: var(--avatar-size);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: var(--accent-color) 2px solid;
    transition: border var(--transition);
}

.user-avatar img,
.user-avatar video {
    height: calc(100% - 3px);
    width: calc(100% - 3px);
    border-radius: 50%;
    display: block;
    pointer-events: none;
}

.header__partners {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.partner-avatar {
    margin-left: 0;
    opacity: 0;
    margin-right: calc(0px - var(--avatar-size) - var(--gap-medium));
    animation: partnerReveal .35s .5s ease forwards;
}

@keyframes partnerReveal {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1;
        margin-left: var(--gap-medium);
        margin-right: calc(0px - (var(--avatar-size) / 1.2));
    }
}

@media(max-width:720px) {
    .header__logo {
        flex: 1
    }

    .header__search {
        display: none
    }

    .header__timeline {
        display: none
    }
}


/* BURGER */
.nav-toggle {
    border: none;
    user-select: none;
    outline: none;
    background-color: transparent;
    cursor: pointer;
    height: var(--burger-size);
    width: var(--burger-size);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0;
    margin: 0;

}

.burger {
    transition: transform .3s;
    user-select: none;
    width: var(--burger-size-inner);
    height: var(--burger-size-inner);
    flex-basis: var(--burger-size-inner);
    flex-shrink: 0
}

.nav-visible .burger {
    transform: rotate(45deg)
}

.burger__line {
    fill: none;
    transition: stroke-dasharray .3s, stroke-dashoffset .3s;
    stroke: var(--text-color);
    stroke-width: 4.5;
    stroke-linecap: round
}

.burger__line--bottom,
.burger__line--top {
    stroke-dasharray: 40 120
}

.nav-visible .burger__line--bottom,
.nav-visible .burger__line--top {
    stroke-dashoffset: -70px
}

@media(min-width:720px) {
    .header__burger {
        display: none
    }
}


/* HEADER ENERGY SAVER ICON */
.header__energy-saver {
    width: 0;
    margin-left: 0;
    visibility: hidden;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    transition: all .2s ease
}

.header__energy-saver .icon,
.energy-saver__battery-status {
    opacity: 0;
    transform: translateY(5px);
    transition: all .2s .25s ease
}

.energy-saver__battery-status:not(:empty) {
    margin-left: 3px;
    width: 28px;
}

.header__energy-saver .icon,
.header__energy-saver .icon svg {
    width: var(--icon-size);
    height: var(--icon-size);
}

.header__energy-saver .icon svg {
    fill: var(--text-color)
}

.energy-saver__battery-status {
    font-size: 12px;
}

.energy-saved .header__energy-saver {
    width: auto;
    margin-left: var(--gap-medium);
    visibility: visible;
}

.energy-saved .icon,
.energy-saved .energy-saver__battery-status {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 900px) {
    .header {
        padding: calc(var(--gap) / 1.5);
        margin: 0;
        border-radius: 0;
        top: 0;
        transition: box-shadow var(--transition);
    }
}

/* DROPDOWN */
.dropdown {
    position: absolute;
    background-color: var(--dropdown--background);
    border-radius: var(--border-radius);
    min-width: 236px;
    right: 0;
    top: calc(100% + var(--gap-medium));
    box-shadow: var(--box-shadow-alt);
    transition: all var(--transition);
    z-index: 50;
    overflow: hidden;
}

.dropdown,
.dropdown--hide {
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.dropdown--show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: initial;
}

.dropdown__wrapper {
    position: relative;
    padding: var(--gap-medium);
}

.dropdown--add {
    min-width: 332px;
    top: 42px
}

.dropdown--user {
    min-width: 620px;
}

.dropdown--user .dropdown__wrapper {
    padding: 0;
}

@media (max-width: 720px) {

    .dropdown--add,
    .dropdown--user {
        min-width: initial;
        position: fixed;
        top: calc(var(--gap) * 2.82);
        left: 0;
        width: 100%;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .dropdown *::-webkit-scrollbar {
        width: 0;
    }

    .dropdown *::-webkit-scrollbar-track,
    .dropdown *::-webkit-scrollbar,
    .dropdown *::-webkit-scrollbar-thumb,
    .dropdown *::-webkit-scrollbar-thumb:hover {
        background-color: transparent;
    }
}

/* DROPDOWN OPTIONS */
.dropdown--options {
    right: calc(0px - var(--gap-small));
    top: calc(100% + var(--gap-small));
    min-width: initial;
    overflow: hidden;
}

.dropdown--options .dropdown__wrapper {
    padding: 0
}

/* DROPDOWN EMOJI */
.dropdown--emoji {
    top: -140px;
    min-width: initial;
    overflow: hidden;
    left: 0;
    width: fit-content;
}

/* DROPDOWN ATTACH */
.dropdown--attach {
    margin-bottom: 40px;
    top: initial;
    min-width: initial;
    overflow: hidden;
    left: 0;
    width: max-content;
    height: max-content
}

/* DROPDOWN TRACK INFO */
.dropdown--track-info {
    min-width: initial;
    width: 520px;
    top: 60px
}

.dropdown--track-info .dropdown__wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
}

@media (max-width: 720px) {
    .dropdown--track-info {
        width: 100%;
        left: 0;
        top: -380px;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow-alt-inverted);
        transform: translateY(70px);
    }

    .dropdown--track-info.dropdown--show {
        touch-action: none;
        transform: translateY(0);
    }

    .dropdown__wrapper {
        padding: var(--gap);
    }

    .dropdown--track-info .dropdown__wrapper {
        border-radius: var(--border-radius) var(--border-radius) 0 0;
        padding-top: 0;
    }

    .dropdown--track-info.dropdown--hide {
        transform: translateY(70px)
    }
}

/* DROPDOWN NAV */
.dropdown-nav {
    margin: 0;
    list-style: none;
    padding: var(--gap-small);
}

.dropdown-nav__item {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
    background-color: transparent;
    white-space: nowrap;
    line-height: var(--gap);
    padding: calc(var(--gap-medium) / 3) var(--gap-medium);
    border-radius: var(--border-radius);
}

.dropdown-nav__item .icon {
    height: var(--icon-size);
    width: var(--icon-size);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none
}

.dropdown-nav__item .icon svg {
    width: var(--icon-size);
    height: var(--icon-size);
    fill: var(--text-color);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none
}

.dropdown-nav__item .icon+span {
    margin-left: calc(var(--font-size) / 2);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none
}

.dropdown-nav__item:hover {
    background-color: var(--background-color-main);
    box-shadow: var(--box-shadow-card);
}

.dropdown-nav__item--trash {
    color: var(--alert-color)
}

.dropdown-nav__item--trash .icon svg {
    fill: var(--alert-color)
}

@media (max-width: 720px) {
    .dropdown-nav__item {
        padding: calc(var(--gap) / 3) var(--gap);
    }
}

/* SWIPE BUTTON */
.swipe-button {
    justify-content: center;
    align-items: center;
    position: relative;
    height: calc(var(--gap) * 2);
    display: none;
    width: 50%;
    margin: 0 auto;
}

.swipe-button::before {
    content: '';
    position: absolute;
    width: 64px;
    height: 5px;
    top: var(--gap-medium);
    border-radius: 3px;
    background-color: rgba(150, 150, 150, .3);
}

@media (max-width: 720px) {
    .swipe-button {
        display: flex
    }
}

/* BUTTONS */
.button {
    font-size: var(--font-size);
    border: 0;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    height: var(--button-height);
    padding: 0 var(--gap-medium);
    gap:var(--gap-small);
    color: #fff;
    line-height: 1;
    background-color: var(--accent-color);
    box-shadow: var(--box-shadow-card);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background-color var(--transition), color var(--transition);
}

.button:hover,
.button:active,
.button:focus {
    background-color: var(--accent-color-lighten);
}

button .icon svg {
    width: var(--icon-size);
    height: var(--icon-size);
    fill: var(--text-color)
}

.button--alt {
    background-color:var(--background-color-alt);
}
.button--alt:hover,
.button--alt:active,
.button--alt:focus {
    background-color: var(--accent-color);
}

/* MAIN MENU */
.menu {
    container-type: inline-size;
    list-style: none;
    margin: 0 0 var(--gap-medium) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu__link {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: var(--gap-medium);
    padding: 0 var(--gap-medium);
    height: 48px;
    line-height: 48px;
    color: var(--text-color);
    border-radius: var(--border-radius);
    transition: all var(--transition)
}

.menu__link:hover,
.menu__link--current {
    background-color: var(--background-color-main);
    box-shadow: var(--box-shadow-card);
}

.menu__link * {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none
}

.menu__link .icon svg {
    width: var(--icon-size-medium);
    height: var(--icon-size-medium);
    fill: var(--text-color)
}

.menu__link--current .icon svg {
    fill: var(--accent-color)
}

.menu__link span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

@container (max-width: 105px) {
    .menu__link {
        justify-content: center
    }

    .menu__link span {
        display: none
    }
}

/* ICON */
.icon {
    display: flex;
    align-items: center;
    pointer-events: none;
}

.icon svg {
    transition: fill var(--transition);
}

/* RIPPLE CLICK */
.ripple-click:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

@keyframes rippleClick {
    0% {
        transform: scale(0, 0);
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(80, 80) translateX(40%);
    }
}

.ripple-click:focus:not(:active)::after {
    animation: rippleClick 0.8s ease;
}

/* LOADER */
.loader {
    height: 6px;
    border-radius: 8px;
    width: 120px;
    position: relative;
    overflow: hidden;
    background-color: var(--background-color-main);
}

.loader::before {
    content: '';
    position: absolute;
    left: 0px;
    height: 100%;
    border-radius: 6px;
    background-color: var(--accent-color);
    will-change: left, right;
    animation: loader-animation 1.9s ease infinite;
}

@keyframes loader-animation {
    0% {
        transform: translate(0, 0);
        width: 0
    }

    100% {
        transform: translate(140%, 0);
        width: 80%
    }
}

/* MUSIC HEADER */
.music__header {
    width: 100%;
    padding: var(--gap-medium);
    background-color: var(--background-color-alt);
    border-bottom: rgba(255, 255, 255, .02) 1px solid;
}

.playlist-summary {
    display:grid;
    grid-template-columns: 190px 1fr;
    grid-template-rows: auto auto 1fr;
    gap:var(--gap-medium) var(--gap);
}

.playlist-summary__cover {
    position:relative;
    overflow: hidden;
    height:190px;
    aspect-ratio: 1;
    grid-area: 1 / 1 / 4 / 2;
    background-color: var(--background-color-main);
    border-radius: var(--border-radius);
    animation: playlistSummaryItemFadeOut var(--transition) forwards;
}

.playlist-summary__cover img {
    display:block;
}
.playlist-summary__title {
    line-height:1;
    padding:0;
    margin:0;
    grid-area: 1 / 2 / 2 / 3;
    font-size:var(--font-size-heading);
    opacity:0;
    animation: playlistSummaryItemFadeOut var(--transition) .1s forwards;
}
.playlist-summary .tags {
    min-height:auto;
    grid-area: 2 / 2 / 3 / 3;
    opacity:0;
    animation: playlistSummaryItemFadeOut var(--transition) .15s forwards;
}
.playlist-summary .tags__item {
    background-color: var(--background-color-main);
    max-height:23px
}
.playlist-summary__description {
    grid-area: 3 / 2 / 4 / 3;
    color:var(--text-color-alt);
    opacity:0;
    animation: playlistSummaryItemFadeOut var(--transition) .2s forwards;
}

@keyframes playlistSummaryItemFadeOut {
    0% {
        transform: translateY(10px);
        opacity:0
    }

    100% {
        transform: translateY(0);
        opacity:1
    }
}

@media (max-width: 720px) {
    .playlist-summary {
        grid-template-columns: 100px 1fr;
        grid-template-rows: auto 1fr;
    }
    .playlist-summary__cover {
        grid-area: 1 / 1 / 3 / 2;
        height:auto;
    }
    .playlist-summary__title {
        font-size: var(--font-size-extralarge);
        grid-area: 1 / 2 / 2 / 3;
    }
    .playlist-summary .tags {
        grid-area: 2 / 2 / 3 / 3;
    }
    .playlist-summary__description {
        grid-area: 3 / 1 / 4 / 3;
    }
}



/* MEDIA WRAPPERS */
.games,
.movies,
.locations,
.music,
.chat {
    min-height: calc(100vh - 280px);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all var(--transition);
    animation: mediaWrapperShow var(--transition) forwards;
}

.chat {
    justify-content: space-between;
}

.games--hidden,
.movies--hidden,
.locations--hidden,
.music--hidden,
.chat--hidden {
    display: none;
    animation: none;
}

.games:has(.game-card),
.movies:has(.movie-card),
.locations:has(.location-card),
.music:has(.music-track) {
    justify-content: flex-start;
}

@keyframes mediaWrapperShow {
    0% {
        opacity: 0;
        transform: scale(.97);
    }

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

/* MEDIA */
.media {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--gap) 0;
    grid-template-rows: min-content;
}

.media__playlist:has(.music-playlist__item) {
    border-top: rgba(255, 255, 255, .02) 1px solid;
}
.media__playlist:has(.music-playlist__item) .music-playlist{
    padding-bottom:50px
}

.media__playlist:has(.music-playlist__item) .music-playlist__item:first-child {
    margin-top: var(--gap-medium)
}

.media__playlist:has(.music-playlist__item) .music-playlist__item:last-child {
    margin-bottom: var(--gap-medium)
}

.media__categories {
    display: flex;
    flex-direction: column;
    padding: var(--gap-medium) var(--gap-medium) 0 var(--gap-medium);
    background-color: var(--background-color-alt);
    border-right: rgba(255, 255, 255, .02) 1px solid;
    resize: horizontal;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 95px;
    max-width: calc(100vw - 560px);
}

/* FIX ASIDE WIDTH*/
.media__categories::before {
    content: '';
    width: 268px;
    height: 0;
    display: block;
}

/* COMPACT VIEW */
.compact-view .media__categories {
    resize: none;
    width: 95px !important
}

.media__list {
    background-color: var(--background-color-alt);
    transition: background-color var(--transition);
    width: 100%;
    overflow: hidden;
}

.media__list>* {
    height: calc(100vh - 85px);
    overflow-y: auto;
    padding: 0 var(--gap-medium) var(--gap-medium) var(--gap-medium);
    width: 100%;
}

.category--music .media__list,
.category--locations .media__list,
.category--chat .media__list {
    background-color: var(--background-color-alt);
    transition: background-color var(--transition);
}

/* DEAL WITH MOBILE */
@media (max-width: 720px) {
    .media__list>* {
        height: calc(100vh - 69px);
    }
    .media__categories {
        position: fixed;
        top: 69px;
        left: 0;
        z-index: 10;
        min-width: min-content;
        max-width: 100vw;
        height: calc(100vh - 69px);
        resize: none;
        box-shadow: rgba(0, 0, 0, .9) 30px 15px 30px -15px, rgba(0, 0, 0, .5) 250px 0 0 0;
        transition: all var(--transition);
    }



    body:has(.mini-player) .music-playlist {
        height: calc(100vh - 394px);
    }

    .media {
        grid-template-columns: 1fr;
    }

    body:not(:has(.nav-visible)) .media__categories {
        transform: translateX(-100%);
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
        box-shadow: rgba(0, 0, 0, 0) 30px 15px 30px -15px, rgba(0, 0, 0, .5) 250px 0 0 0;
    }
}

/* MEDIA ADD */
.user__add-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: var(--gap-medium);
}

.add {
    cursor: pointer;
    border-radius:50%;
    aspect-ratio: 1;
    width:var(--avatar-size);
    height:var(--avatar-size);
    flex-basis:var(--avatar-size);
    flex-shrink:0;
    background-color: var(--background-color-main);
    box-shadow: var(--box-shadow-card);
    display:flex;
    align-items: center;
    justify-content: center;
}

.add * {
    -webkit-user-select: none;
    user-select: none;
}

.add svg {
    width: var(--icon-size);
    height: var(--icon-size);
    fill: var(--text-color);
    transition: fill var(--transition);
}

.add:hover svg {
    fill: var(--accent-color)
}

.add-form__empty {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--gap);
    text-align: center
}

.add-form__empty img {
    max-width: 100px;
    margin-bottom: var(--gap)
}

.dropdown--show .add-form__empty span {
    display: block;
    position: relative;
    padding: var(--gap-small);
    border-radius: 27px 34px 23px 44px;
    background-color: var(--background-color-alt);
    opacity: 0;
    animation: addFormStatusText .4s forwards
}

.dropdown--show .add-form__empty span::before {
    content: '';
    display: block;
    position: absolute;
    top: -7px;
    left: 53%;
    border-radius: 50%;
    background-color: var(--background-color-alt);
    width: 16px;
    height: 16px;
}

.dropdown--show .add-form__empty span::after {
    content: '';
    display: block;
    position: absolute;
    top: -16px;
    left: 50%;
    border-radius: 50%;
    background-color: var(--background-color-alt);
    width: 9px;
    height: 9px;
}

@keyframes addFormStatusText {
    50% {
        opacity: 0;
    }

    0% {
        transform: translateY(10px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

/* TAB LOADING */
.fetch-loading {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    grid-row: span 3
}

.fetch-loading img {
    max-width: 100px;
    margin-bottom: var(--gap)
}

.movies-list .fetch-loading {
    grid-column: span 6;
}

.fetch-loading__error-message {
    font-size: var(--font-size-large)
}

.fetch-loading__error-description {
    font-size: var(--font-size-small);
    opacity: .7;
}

.movies--hidden .loader,
.games--hidden .loader,
.locations--hidden .loader,
.music--hidden .loader,
.chat--hidden .loader {
    display: none
}



/* PLAYLIST */
.music-playlist {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: calc(100vh - 366px);
    overflow-y: auto;
}

.music-playlist::-webkit-scrollbar {
    width: 0px;
}

.music-playlist__item {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: var(--gap-medium);
    padding: var(--gap-small) var(--gap-medium);
    color: var(--text-color);
    flex-shrink: 0;
    border-radius: var(--border-radius);
    transition: background-color var(--transition), box-shadow var(--transition);
}

.music-playlist__item:hover,
.music-playlist__item--playing {
    background-color: var(--background-color-main);
    box-shadow: var(--box-shadow-card);
}

.music-playlist__item--playing:not(:active)::after {
    animation: rippleClick 0.8s ease;
}

.music-playlist__item--hidden {
    display: none;
}


.music-playlist__cover {
    pointer-events: none;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background-color: var(--background-color-main);
    border-radius: var(--border-radius);
    transition: box-shadow var(--transition);
    box-shadow: transparent 0 0 0 2px;
}

.music-playlist__item--playing .music-playlist__cover {
    box-shadow: var(--accent-color) 0 0 0 2px;
}

.music-playlist__item[data-id="favs"] .music-playlist__cover {
    background-color: var(--accent-color-lighten)
}

.music-playlist__cover::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    box-shadow: rgba(255, 255, 255, .06) 0 .5px 0 .5px inset, rgba(0, 0, 0, .26) 0 -.5px 0 .5px inset;
    border-radius: var(--border-radius);
}

.music-playlist__cover img {
    width: var(--music-playlist-cover-size);
    height: var(--music-playlist-cover-size);
}

.music-playlist__info {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.music-playlist__info,
.music-playlist__name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.music-playlist__track-count {
    display: flex;
    align-items: center;
    line-height: 1.5;
    font-size: var(--font-size-small);
    gap: calc(var(--icon-size-small) / 2);
    opacity: .7;
}

.music-playlist__track-count .icon,
.music-playlist__track-count .icon svg {
    width: var(--icon-size-small);
    height: var(--icon-size-small)
}

.music-playlist__track-count .icon svg {
    fill: var(--text-color)
}

@container (max-width: 105px) {
    .music-playlist__item {
        padding: var(--gap-small);
        justify-content: center
    }

    .music-playlist__info {
        display: none
    }
}

/* MUSIC TRACK */
.music-list {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 61.31px;
    gap: 2px;
    padding-top:var(--gap-medium);
    padding-bottom:50px;
    background-color:var(--background-color-alt);
    position:relative
}

.music-list:has(.fetch-loading) {
    height: 100%;
}

.music-track {
    padding: calc(var(--gap) / 3);
    display: grid;
    gap: var(--gap-medium);
    grid-template-columns: var(--gap) var(--music-cover-size) 3.5fr 3fr 1.2fr .5fr var(--gap);
    border-radius: var(--border-radius);
}

.music-track:hover,
.music-track:focus,
.music-track--playing {
    background-color: var(--background-color-main);
    box-shadow: var(--box-shadow-card);
}

.music-track--playing {
    transition: background-color var(--transition), box-shadow var(--transition);
}

.music-track__control {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.music-track__summary {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.track-artist {
    font-size: var(--font-size-small);
    opacity: .7
}

.music-track__cover {
    -webkit-user-select: none;
    user-select: none;
    width: var(--music-cover-size);
    height: var(--music-cover-size);
    background-color:var(--background-color-main);
    border-radius: var(--border-radius-alt);
}

.music-track:hover .music-track__cover,
.music-track:focus .music-track__cover,
.music-track--playing .music-track__cover {
    background-color:var(--background-color-alt);
}

.music-track__cover img {
    display: block;
    width: var(--music-cover-size);
    height: var(--music-cover-size);
    border-radius: var(--border-radius-alt);
    box-shadow: var(--box-shadow-card);
}

.music-track__name {
    white-space: nowrap;
    display: inline-block;
    max-width: 370px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-track__album {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.music-track__bitrate {
    white-space: nowrap;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: calc(var(--gap) / 6)
}

.lossy-badge {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: calc(var(--gap) / 6);
    border-radius: var(--border-radius-alt);
    font-size: var(--font-size-small);
    padding: 3px 6px;
    background-color: var(--background-color-main);
    opacity: .5;
    cursor: default;
    line-height: 1;
    transition: all var(--transition);
}

.music-track--lossy-enabled .lossy-badge {
    color: var(--accent-color);
    opacity: 1
}

.lossy-badge .icon,
.lossy-badge .icon svg {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
}

.lossy-badge .icon svg {
    fill: var(--text-color);
}

.music-track--lossy-enabled .lossy-badge .icon svg {
    fill: var(--accent-color)
}

.music-track__length {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding-right: var(--gap-medium)
}

.music-track__fav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.music-track:hover .music-track__fav,
.music-track--playing .music-track__fav,
.music-track__fav--true {
    opacity: 1;
}

.music-track__fav .icon svg {
    width: var(--icon-size);
    height: var(--icon-size);
    fill: var(--text-color);
    transition: fill var(--transition), transform var(--transition)
}

.music-track__fav:hover .icon svg,
.music-track__fav--true .icon svg {
    fill: var(--accent-color);
}

.music-track__fav:active .icon svg {
    transform: scale(1.3);
}

.track-control__play,
.track-control__pause {
    width: var(--icon-size-medium);
    height: var(--icon-size-medium);
}

.track-control__play .icon svg,
.track-control__pause .icon svg {
    width: var(--icon-size-medium);
    height: var(--icon-size-medium);
    fill: var(--text-color);
    cursor: pointer;
}

.track-control__play:hover .icon svg,
.track-control__pause:hover .icon svg {
    fill: var(--accent-color)
}

.track-control__play,
.track-control__pause,
.track-control__playing {
    display: none
}

.track-control__id {
    line-height: 1;
}

.music-track:hover .track-control__id {
    display: none
}

.music-track:hover .track-control__play {
    display: block
}

.music-track--playing .music-track__name {
    color: var(--accent-color)
}

.music-track--playing .track-control__id {
    display: none;
}

.music-track--playing .track-control__playing {
    display: block;
    padding-right: 3px;
}

.music-track--playing:hover .track-control__playing,
.music-track--playing:hover .track-control__play {
    display: none
}

.music-track--playing:hover .track-control__pause {
    display: block
}

@media (max-width: 720px) {
    .music-list {
        grid-template-rows: auto;
    }

    .music-track {
        grid-template-columns: var(--gap) var(--music-cover-size) 3fr var(--gap);
    }

    .music-track__name {
        max-width: 210px;
    }

    .track-control__id {
        font-size: var(--font-size-small);
    }

    .music-track__length,
    .music-track__bitrate,
    .music-track__album {
        display: none
    }
}

.equalizer {
    width: 16px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.equalizer svg {
    width: 16px;
    height: 22px;
}

.equalizer--hidden {
    visibility: hidden;
    opacity: 0;
    transform: scale(0);
}

.equalizer--visible {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.equalizer--hidden svg,
.music-track .equalizer svg {
    display: none;
}

.equalizer--visible svg,
.music-track--playing .equalizer svg {
    display: block
}

.equalizer rect {
    fill: var(--accent-color);
    height: 11px;
}

.equalizer rect:nth-of-type(1) {
    animation: eq .4s infinite ease-out;
    animation-timing-function: steps(9)
}

.equalizer rect:nth-of-type(2) {
    animation: eqMiddle .45s infinite ease-out;
    animation-timing-function: steps(9)
}

.equalizer rect:nth-of-type(3) {
    animation: eq .55s infinite ease-out;
    animation-timing-function: steps(9)
}

@keyframes eq {
    0% {
        transform: translate(0, 10px);
        height: 2px;
    }

    50% {
        transform: translate(0, 5px);
        height: 12px;
    }

    100% {
        transform: translate(0, 10px);
        height: 2px;
    }
}

@keyframes eqMiddle {
    0% {
        transform: translate(0, 9px);
        height: 4px;
    }

    50% {
        transform: translate(0, 1px);
        height: 20px;
    }

    100% {
        transform: translate(0, 9px);
        height: 4px;
    }
}


/* MINI-PLAYER */
.mini-player {
    position: relative;
    background-color: var(--background-color-main);
    border-radius: 24px;
    padding: var(--gap-small);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    transition: background-color var(--transition);
    box-shadow: var(--box-shadow-card);
}

.mini-player__preview {
    margin-right: var(--gap-small);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mini-player__preview .equalizer {
    position: absolute;
    left: -26px
}

.mini-player__cover {
    width: var(--music-cover-size-small);
    height: var(--music-cover-size-small);
    border-radius: 50%;
    -webkit-user-select: none;
    user-select: none;
    transition:transform var(--transition);
}

.mini-player__cover img {
    pointer-events: none;
    display: block;
    width: var(--music-cover-size-small);
    height: var(--music-cover-size-small);
    border-radius: 50%;
    box-shadow: var(--box-shadow)
}

.mini-player__summary {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.mini-player--updated .mini-player__summary {
    animation: miniPlayerSummaryShow .4s forwards;
}

@keyframes miniPlayerSummaryShow {
    20% {
        opacity: 0;
    }

    0% {
        transform: translateY(10px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

.mini-player__name,
.mini-player__artist {
    white-space: nowrap;
    display: inline-block;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-player__controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-medium);
    padding: 0 var(--gap-medium);
}

.mini-player__play-pause {
    position: relative;
}

.mini-player__overlay {
    position:absolute;
    border-radius: 24px 0 0 24px;
    top:0;
    left:0;
    width:calc(100% - 130px);
    z-index:10;
    height:100%;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
}

.mini-player:has(.mini-player__overlay:hover) .mini-player__cover {
    transform: scale(1.08);
}

.radial-progress {
    width: var(--icon-size-medium);
    height: var(--icon-size-medium);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    position: absolute;
    pointer-events: none;
}

.radial-progress svg {
    width: var(--icon-size-medium);
    height: var(--icon-size-medium);
}

.radial-progress__background {
    fill: none;
    stroke: transparent;
    stroke-width: 4px
}

.radial-progress__bar {
    fill: none;
    stroke-dashoffset: 0;
    stroke-dasharray: 0, 10000;
    stroke-width: 5;
    stroke: var(--background-color-alt);
    opacity: .6;
    stroke-dashoffset: 30.5363;
    stroke-dasharray: 56.5487, 56.5487;
    transition: all var(--transition)
}

.mini-player__prev,
.mini-player__play-pause,
.mini-player__next {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mini-player__prev svg,
.mini-player__play-pause svg,
.mini-player__next svg {
    fill: var(--text-color);
    width: var(--icon-size-medium);
    height: var(--icon-size-medium);
    pointer-events: none;
}

.mini-player__prev:hover svg,
.mini-player__play-pause:hover svg,
.mini-player__next:hover svg {
    fill: var(--accent-color)
}

@media (max-width: 720px) {
    .mini-player {
        border-radius: 30px;
        position: fixed;
        max-width: initial;
        width: calc(100% - calc(var(--gap-medium) * 2));
        bottom: var(--gap-medium);
        left: var(--gap-medium);
        padding: calc(var(--gap) / 2);
        box-shadow: var(--box-shadow-alt-inverted);
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 20;
        background-color:var(--background-color-main-opacity);
    }

    .mini-player::before {
        content:'';
        width: calc(100% + calc(var(--gap-medium) * 2));
        height:calc(100% + var(--gap-medium));
        bottom:calc(-1px - var(--gap-medium));
        left:calc(0px - var(--gap-medium));
        pointer-events:none;
        background: linear-gradient(to bottom, transparent 0%, var(--background-color-alt) 60%, var(--background-color-alt) 100%);
        z-index:-1;
        position:absolute;
        opacity:.85
    }

    .mini-player::after {
        content:'';
        width: 100%;
        height:100%;
        bottom:0;
        left:0;
        background-color:transparent;border:rgba(255,255,255,.08) 1px solid;
        backdrop-filter: blur(10px);
        border-radius: 30px;
        z-index:-1;
        position:absolute;
    }

    .mini-player__controls {
        padding:0;
    }

    .mini-player__preview {
        flex-direction: row;
    }

    .mini-player__overlay {
        border-radius:0
    }

    .mini-player__preview .equalizer {
        position: initial;
        left: initial;
        order: 1;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mini-player__preview .equalizer--hidden {
        width:0
    }

    .mini-player__preview .equalizer--visible {
        width: calc(var(--gap) * 1.5);
    }

    .mini-player__cover {
        order: 2
    }

    .mini-player__prev .icon svg,
    .mini-player__play-pause .icon svg,
    .mini-player__next .icon svg {
        width: var(--icon-size-large);
        height: var(--icon-size-large);
    }

    .radial-progress svg {
        transform: scale(1.36);
    }

    .radial-progress__bar {
        stroke-width: 3
    }
}

/* TRACK INFO DROPDOWN */
.track-sliders {
    display: grid;
    grid-template-columns: 2fr 1.45fr;
    gap: var(--gap)
}

.track-sliders__item {
    display: flex;
    align-items: center;
    gap: calc(var(--gap-medium) / 2)
}

.track-seek,
.track-volume {
    display: flex;
    align-items: center;
    width: 100%
}

.track-seek__slider,
.track-volume__slider {
    width: calc(100% - 3px);
    overflow: hidden;
    -webkit-appearance: none;
    background-color: var(--background-color-main);
    border-radius: var(--border-radius-alt)
}

.track-seek__slider::-webkit-slider-runnable-track,
.track-volume__slider::-webkit-slider-runnable-track {
    height: 10px;
    -webkit-appearance: none;
    margin-top: -1px;
}

.track-seek__slider::-webkit-slider-thumb,
.track-volume__slider::-webkit-slider-thumb {
    width: 10px;
    -webkit-appearance: none;
    height: 10px;
    cursor: ew-resize;
    background: var(--accent-color);
    box-shadow: -180px 0 0 180px var(--accent-color-lighten);
    border-left: var(--background-color-main-opacity) 1px solid;
}

.track-sliders__icon svg {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
    fill: var(--text-color);
}

.track-sliders__timer {
    font-size: var(--font-size-small);
    flex-basis: 42px;
    white-space: nowrap;
    line-height: 1;
}

.track-sliders__timer--duration {
    text-align: right;
}

.track-info {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto;
    gap: 0 var(--gap);
    margin-top: var(--gap)
}

.track-info a {
    color: var(--text-color)
}

.track-info a:hover {
    color: var(--accent-color)
}

.track-info__cover {
    aspect-ratio: 1;
}

.track-info__table {
    grid-row: span 2
}

.track-info__cover img {
    display: block;
    border-radius: var(--border-radius-alt);
    box-shadow: var(--box-shadow);
}

.track-info__label {
    font-size: var(--font-size-small)
}

.track-info__value {
    margin-bottom: var(--gap-medium);
    display: flex;
    gap: var(--gap-small);
}

.track-info__value:last-child {
    margin-bottom: 0
}

.track-info__quality {
    white-space: nowrap;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: calc(var(--gap) / 6);
}

.track-info__quality .lossy-badge {
    color: var(--accent-color);
    opacity: 1;
}

.track-info__quality .lossy-badge svg {
    fill: var(--accent-color);
}

.track-info__download {
    white-space: nowrap;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: calc(var(--gap) / 6);
}

.download-badge {
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.download-badge .icon,
.download-badge .icon svg {
    width: var(--icon-size-medium);
    height: var(--icon-size-medium);
}

.download-badge .icon,
.download-badge .icon svg {
    pointer-events: none;
}

.download-badge .icon svg {
    fill: var(--text-color);
}

.download-badge:hover svg {
    fill: var(--accent-color)
}

.track-info__backdrop {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: var(--border-radius)
}

.backdrop-cover {
    opacity: .5;
    transform: translateZ(0.1px);
    filter: blur(80px);
    backface-visibility: hidden;
    display: block;
}


@media (max-width: 720px) {
    .track-info__backdrop {
        border-radius: var(--border-radius) var(--border-radius) 0 0
    }

    .track-info__table {
        height: 261px;
        width: 100%;
        overflow-y: auto;
    }
}

/* MOVIES */
.movies-list {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--gap-medium);
    padding-top: var(--gap-medium);
    container-type: inline-size;
}

.movie-card {
    position:relative;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-column: span 2;
    grid-auto-rows: min-content auto;
    gap: var(--gap-medium);
    padding: var(--gap-medium);
    border-radius: var(--border-radius);
    background-color: var(--background-color-main);
    box-shadow: var(--box-shadow-card);
    order: 2;
}


.movie-card--deleted {
    opacity: 0;
    visibility: hidden;
}

.movie-card--planned {
    order: 1;
}

.movie-card--viewed {
    order: 3
}
.movie-card__heading {
    grid-column: span 2;
    display:flex;
    flex-direction:column;
    gap:var(--gap-small);
    padding-bottom:var(--gap-small);
}
.movie-card__name {
    width:100%;
    max-width:calc(100% - 40px);
    font-size: var(--font-size-extralarge);
    padding-right: var(--gap);
    line-height: 1.1;
}

.movie-card__media {
    position: relative;
}

.movie-card__poster {
    height: 100%;
    position: relative;
    background-color: var(--background-color-alt);
    border-radius: var(--border-radius);
    overflow: hidden;
    aspect-ratio: 0.6666666666666667;
    max-height:230px
}

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

.movie-card__meta {
    display: flex;
}

.movie-card__info {
    display: flex;
    flex-direction: column;
    position: relative;
}

.movie-card__options {
    position: absolute;
    right: calc(var(--gap-medium) + 5px);
    top: var(--gap-medium);
}

.movie-card__summary {
    display: flex;
    flex-direction: column;
}

.movie-card__owner {
    margin-left:var(--gap-small);
    display:flex;
    align-items: center;
    gap:2px
}

.movie-card__owner-name {
    font-size:var(--font-size-small)
}
.movie-card__user-avatar {
    width:20px;
    height:20px
}
.movie-card__user-avatar img{
    border-radius: 50%;
    display: block;
}

.movie-card__description {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    margin-bottom: var(--gap-medium)
}

.movie-card__props {
    width:100%;
    display:flex;
    align-items: center;
    justify-content: space-between;
    gap:var(--gap-small);
    grid-column: span 2;
    border-top: rgba(255, 255, 255, .02) 1px solid;
    padding-top:var(--gap-medium);
}

.movie-card__status {
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap:var(--gap-small);
}

.movie-card__quick-action button * {
    pointer-events:none
}

@media (max-width:1600px) {
    .movie-card {
        grid-column: span 3;
    }
}

@media (max-width:1200px) {
    .movie-card {
        grid-column: span 6;
    }
}

@media (max-width:720px) {
    .movie-card__description {
        -webkit-line-clamp: 5;
    }
}





/* GAMES */
.games-list {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-medium);
    padding-top: var(--gap-medium)
}

.game-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    gap: var(--gap-medium);
    border-radius: var(--border-radius);
    background-color: var(--background-color-main);
    box-shadow: var(--box-shadow-card);
    order: 2
}

.game-card--deleted {
    opacity: 0;
    visibility: hidden;
}

.game-card--planned {
    background-color: var(--accent-color-background);
    order: 1
}

.game-card--completed {
    order: 3
}

.game-card__media {
    position: relative;
}

.game-card__poster {
    position: relative;
    background-color: var(--background-color-main);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    aspect-ratio: 2.13953488372093
}

.game-card__poster img {
    display: block;
    object-fit: cover;
    width: 100%;
    aspect-ratio: 2.13953488372093
}

.game-card__info {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0 var(--gap-medium) var(--gap-medium) var(--gap-medium)
}

.game-card__options {
    position: absolute;
    right: var(--gap-medium);
    top: var(--gap-small);
}

.game-card__name {
    font-size: var(--font-size-extralarge);
    padding-right: var(--gap);
    line-height: 1.1;
}

.game-card__summary {
    display: flex;
    flex-direction: column;
    gap: var(--gap-medium);
    margin-bottom: var(--gap-medium)
}

.game-card__year {
    padding-top: 2px
}

.game-card__description {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    margin-bottom: var(--gap-medium)
}

.game-card__props {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.games-list .fetch-loading {
    grid-column: span 3;
}

@media (max-width:1280px) {
    .game-card__poster {
        min-height: initial
    }
}

@media (max-width:900px) {
    .games-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .game-card {
        gap: var(--gap);
    }

    .game-card__poster {
        min-height: initial
    }

    .game-card__info {
        padding: 0 var(--gap) var(--gap) var(--gap)
    }
}

@media (max-width:720px) {
    .games-list {
        grid-template-columns: 1fr;
        padding-top: var(--gap-medium)
    }

    .game-card__options {
        right: var(--gap)
    }
}

/* LOCATIONS */
.locations-list {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-medium);
    padding-top: var(--gap-medium);
}

.location-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    gap: var(--gap-medium);
    padding: var(--gap-medium);
    border-radius: var(--border-radius);
    background-color: var(--background-color-main);
    box-shadow: var(--box-shadow-card);
    order: 2;
}

.location-card--deleted {
    opacity: 0;
    visibility: hidden;
}

.location-card--planned {
    background-color: var(--accent-color-background);
    order: 1;
}

.location-card--visited {
    order: 3
}

.locations-list__item {
    display: grid;
    grid-template-columns: var(--avatar-size) 2fr 1fr 1fr 16px;
    gap: var(--gap-medium);
    position: relative;
}

.location-card__country-image img {
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    box-shadow: var(--box-shadow);
    display: block;
}

.location-card__country-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.location-card__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.location-card__title {
    font-size: var(--font-size-large);
}

.location-card__description {
    font-size: var(--font-size-small);
    opacity: .7;
}

.location-card__title::first-letter,
.location-card__description::first-letter {
    text-transform: uppercase;
}

.location-card__options {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width:720px) {
    .locations-list__item {
        grid-template-columns: var(--avatar-size) 2fr 1.5fr 16px;
    }

    .location-card__owner {
        display: none
    }
}


/* CHAT */
.category--chat .media__list {
    background-size: auto 100%;
    background-repeat: repeat-x;
    position: relative;
}

/* .template--day .category--chat .media__list {
    background-image:url('../../assets/images/chat-background-pattern-day.svg');
}
.template--night .category--chat .media__list {
    background-image:url('../../assets/images/chat-background-pattern-night.svg');
} */
.chat-list {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    min-width: 320px;
    max-width: 100%;
    padding: var(--gap-medium) 0 var(--gap) 0;
}

.chat-list .fetch-loading {
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 100%
}

.chat-message {
    display: grid;
    grid-template-columns: 1fr var(--icon-size);
    grid-template-rows: min-content;
    gap: var(--gap-small) var(--gap);
    border-radius: var(--border-radius-alt);
    padding: var(--gap-medium);
    background-color: var(--background-color-main);
    transition: all var(--transition);
    max-width: 70%;
    position: relative;
    margin-top: 1px;
}

.chat-message__header {
    display: flex;
    align-items: center;
    gap: var(--gap-small)
}

.chat-message__author {
    font-size: var(--font-size-small);
    opacity: .7
}

.chat-message__timestamp {
    font-size: var(--font-size-small);
    opacity: .7
}

.chat-message::before {
    display: block;
    position: absolute;
    bottom: -8px;
    left: var(--gap-medium);
    border-radius: 0 0 9px 9px;
    background-color: var(--background-color-main);
    width: 16px;
    height: 8px;
}

.chat-message::after {
    display: block;
    position: absolute;
    bottom: -16px;
    left: var(--gap-small);
    border-radius: 50%;
    background-color: var(--background-color-main);
    width: 9px;
    height: 9px;
}

.chat-message--own::before {
    left: initial;
    right: var(--gap-medium);
    background-color: var(--accent-color-background)
}

.chat-message--own::after {
    left: initial;
    right: var(--gap-small);
    background-color: var(--accent-color-background)
}

.chat-message--own:has(+ .chat-message--partner),
.chat-message--own:last-child {
    /* outline:red 1px solid; */
    border-radius: var(--border-radius-alt) var(--border-radius-alt) var(--border-radius) var(--border-radius);
    margin-bottom: var(--gap-medium)
}

.chat-message--own:has(+ .chat-message--partner)::before,
.chat-message--own:last-child::before,
.chat-message--own:has(+ .chat-message--partner)::after,
.chat-message--own:last-child::after,
.chat-message--partner:has(+ .chat-message--own)::before,
.chat-message--partner:last-child::before,
.chat-message--partner:has(+ .chat-message--own)::after,
.chat-message--partner:last-child::after {
    content: ''
}

.chat-message--partner:has(+ .chat-message--own),
.chat-message--partner:last-child {
    /* outline:blue 1px solid; */
    border-radius: var(--border-radius-alt) var(--border-radius-alt) var(--border-radius) var(--border-radius);
    margin-bottom: var(--gap-medium)
}

.chat-message--partner+.chat-message--own {
    /* border:pink 3px solid; */
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.chat-message--own+.chat-message--partner {
    /* border:green 3px solid; */
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.chat-message:first-child {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.chat .chat-message--own {
    align-self: flex-end;
    background-color: var(--accent-color-background);
}

.chat-message__body {
    grid-column: span 2;
}

/* Chat message partner dropdown position fix */
.chat-message--partner .dropdown--options {
    right:initial;
    left:0
}

/* If message is single emoji */
.chat-message--emoji .chat-message__body {
    font-size: var(--font-size-extralarge)
}

.chat-message__files {
    grid-column: span 2;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--gap-small);
    justify-self: end;
    max-width: 580px;
}

.chat-message--partner .chat-message__files {
    justify-self: start;
}

.chat-message__file {
    border-radius: var(--border-radius-alt);
    background-color: var(--background-color-alt);
    position: relative;
    overflow: hidden;
    max-height: 320px;
}

.chat-message__file--image>img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Сетка если 1 файл */
.chat-message__files--1 {
    grid-template-columns: 1fr;
    max-width: 320px;
    max-height: 720px
}

/* Сетка если 2 файла */
.chat-message__files--2 {
    grid-template-columns: repeat(2, auto);
}

/* Сетка если 3 файла */
.chat-message__files--3 {
    grid-template-columns: repeat(3, auto);
}

/* Сетка если 4 файла */
.chat-message__files--4 {
    grid-template-columns: repeat(3, auto);
}

.chat-message__files--4 .chat-message__file:last-child {
    grid-column: span 3;
}

/* Сетка если 5 файла */
.chat-message__files--5 {
    grid-template-columns: repeat(3, auto);
    grid-auto-rows: min-content;
}


.chat-message__options {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.chat-controls {
    position: sticky;
    width: 100%;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-medium);
}

.chat-controls::before {
    content: '';
    position: absolute;
    left: calc(0px - var(--gap-medium));
    bottom: calc(0px - var(--gap-medium));
    width: calc(100% + calc(var(--gap-medium) * 2));
    height: 80px;
    z-index: -1;
    background: linear-gradient(to bottom, transparent 0%, var(--background-color-alt) 60%, var(--background-color-alt) 100%);
    pointer-events: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius)
}

.chat-controls__emoji {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.emoji-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--gap-small);
}

.emoji-list__item::before {
    display: block;
    content: attr(data-id);
    font-size: var(--font-size-large);
    transition: transform var(--transition);
}

.emoji-list__item:hover::before {
    transform: scale(1.37);
}

.emoji-list__item:active::before {
    transform: scale(.9);
}

.chat-controls__attach {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}

.attach-counter {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1;
    width: 12px;
    height: 12px;
    background-color: var(--background-color-alt);
    box-shadow: var(--background-color-alt) 0 0 0 1px;
    border: var(--text-color) 1px solid;
    border-radius: 50%;
    bottom: 50%;
    right: -6px;
    opacity: 0;
    transition: opacity var(--transition);
}

.attach-counter:has(span) {
    opacity: 1
}

.chat-controls__message-input {
    resize: vertical;
    min-height: var(--input-height);
    max-height: 20vh
}

.chat-controls__send .button {
    width: var(--button-height);
    height: var(--button-height);
    padding: 0;
    border-radius: 50%;
}

.chat-controls__send .icon {
    width: var(--icon-size);
    height: var(--icon-size);
    fill: var(--text-color);
}

@media (max-width:720px) {
    .attach-counter {
        border: var(--text-color) 2px solid;
    }
}

/* UPLOADS */
.chat-attach {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.chat-attach__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-small);
}

.chat-attach__list .loader {
    grid-column: span 3;
}

.chat-attach__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.chat-attach__item label * {
    pointer-events: none;
}

.chat-attach__item input {
    width: 0;
    height: 0;
    opacity: 0;
    padding: 0;
    margin: 0;
    position: absolute;
}

.chat-attach__item img {
    width: 100%;
    border-radius: var(--border-radius-alt);
    transition: all var(--transition);
}

.chat-attach__item input:checked+label img {
    box-shadow: var(--accent-color) 0 0 0 2px;
}

.chat-attach__checkbox {
    position: absolute;
    top: var(--gap-small);
    left: var(--gap-small);
    border-radius: 50%;
    transition: all var(--transition);
    opacity: 0
}

.chat-attach__item input:checked+label .chat-attach__checkbox {
    opacity: 1;
    background-color: var(--background-color-main-opacity)
}

.chat-attach__checkbox,
.chat-attach__checkbox svg {
    width: var(--icon-size);
    height: var(--icon-size);
    pointer-events: none;
}

.chat-attach__checkbox svg {
    fill: var(--accent-color)
}

.upload {
    margin-top: var(--gap-medium);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-medium)
}

.upload__button {
    display: flex;
    align-items: center;
    gap: var(--gap-small);
    transition: color var(--transition);
    cursor: pointer
}

.upload__icon,
.upload__icon svg {
    width: var(--icon-size);
    height: var(--icon-size);
}

.upload__icon svg {
    fill: var(--text-color)
}

.upload__button:hover {
    color: var(--accent-color)
}

.upload__button:hover .upload__icon svg {
    fill: var(--accent-color)
}

/* BADGES */
.badge {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(var(--gap-medium) / 3);
    font-size: var(--font-size-small);
    padding: calc(var(--gap-small) / 2) var(--gap-small);
    line-height: 1;
    border-radius: var(--border-radius);
    background-color: var(--background-color-alt);
    box-shadow: var(--box-shadow-card);
}

.badge .icon,
.badge .icon svg {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
    fill: var(--text-color);
}

.badge__value {
    position: relative
}

/* RATING BADGES */
.badge--rating {
    z-index: 2
}

.badge--rating-3,
.badge--rating-4,
.badge--rating-5 {
    background-color: #013d6c
}

.badge--rating-6,
.badge--rating-7 {
    background-color: #016c46
}

.badge--rating-8,
.badge--rating-9,
.badge--rating-10 {
    background-color: #d38a22
}

/* BADGE TYPE */
.movie-card__meta:has(.badge--rating) .badge--type {
    margin-left: -15px;
    padding-left: 20px;
    z-index: 1;
}


/* STATUS */
.status {
    display: flex;
    align-items: center;
    transition: color var(--transition);
}

.status .icon {
    height: var(--icon-size-medium);
    width: var(--icon-size-medium);
}

.status .icon svg {
    width: var(--icon-size-medium);
    height: var(--icon-size-medium);
    fill: var(--accent-color);
}

.status__info {
    margin-left: calc(var(--font-size) / 2);
}
.status__title {
    font-size: var(--font-size-small);
}
.status__timestamp {
    font-size: var(--font-size-small);
    color:var(--text-color-alt);
}

/* TAGS */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gap) / 6);
    min-height: 100%;
}

.tags__item {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    font-size: var(--font-size-small);
    line-height: calc(var(--font-size-large) * 1.45);
    padding: 0 var(--font-size-small);
    background-color: var(--background-color-alt);
}

.tags__item:nth-of-type(1),
.tags__item:nth-of-type(2) {
    display: flex
}

.tags__more {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-small);
    line-height: calc(var(--font-size-large) * 1.45);
    padding: 0 var(--font-size-small);
    transition: color var(--transition);
    opacity: .7;
}

.tags__more:hover {
    color: var(--accent-color)
}

.tags--all .tags__item {
    display: flex;
}

.tags--all .tags__more {
    display: none;
}


/* OWNER */
.owner {
    display: flex;
    align-items: center;
    gap: var(--gap-small);
}

/* DROPDOWN OPTIONS*/
.options {
    cursor: pointer;
}

.options * {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.options svg {
    width: var(--icon-size);
    height: var(--icon-size);
    fill: var(--text-color);
    transition: fill var(--transition);
}

.options:hover svg {
    fill: var(--accent-color)
}


/* USER DROPDOWN */
.user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-small)
}

.user__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-small);
    padding: var(--gap-medium);
    box-shadow: var(--box-shadow-alt);
}

.user__info {
    display: flex;
    flex-direction: column;
    gap: var(--gap-small)
}

.user__name {
    font-size: var(--font-size-large);
    line-height: 1;
}

.user__role-alias {
    display: flex;
    gap: calc(var(--gap-medium) / 3);
    font-size: var(--font-size-small);
    line-height: 1;
}

.user__role-alias .icon,
.user__role-alias .icon svg {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
    fill: var(--text-color)
}

.user__logout {
    padding: var(--gap-medium)
}

.user__logout a {
    display: flex;
    gap: calc(var(--gap-medium) / 3);
    font-size: var(--font-size-small);
    line-height: 1;
    color: var(--alert-color);
}

.user__logout .icon,
.user__logout .icon svg {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
    fill: var(--alert-color);
}

.user__logout a span {
    pointer-events: none
}

/* USER SETTINGS */
.user__settings {
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--gap-medium) var(--gap-medium) 0 var(--gap-medium);
}

/* SETTINGS */
.settings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-medium)
}

.settings__item {
    display: grid;
    grid-template-columns: var(--icon-size) 1fr 32px;
    grid-template-rows: min-content;
    gap: var(--gap-small);
    padding: var(--gap-medium);
    border-radius: var(--border-radius);
    background-color: var(--background-color-alt);
    box-shadow: var(--box-shadow-card);
}

.settings__icon .icon svg {
    width: var(--icon-size);
    height: var(--icon-size);
    fill: var(--text-color);
}

.settings__title {}

.settings__description {
    font-size: var(--font-size-small);
    grid-column: span 2;
    opacity: .7
}

.settings__control {
    width: var(--switch-width);
    height: var(--switch-height);
}

.user__bottom {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* USER API KEY */
.user__api-key {
    flex: 1;
    display: flex;
    align-items: center;
    gap: calc(var(--gap-medium) / 3);
    font-size: var(--font-size-small);
    line-height: 1;
    padding: var(--gap-medium);
    opacity: .7
}

.user__api-key .icon,
.user__api-key .icon svg {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
    fill: var(--text-color)
}

.user__api-key span {
    text-overflow: ellipsis;
    max-width: 160px;
    overflow: hidden;
    white-space: nowrap;
}

@media (max-width:720px) {
    .user {
        gap: initial
    }

    .settings {
        grid-template-columns: 1fr;
    }

    .user__settings {
        max-height: initial;
        height: calc(100vh - 272px);
        overflow-y: auto;
        width: 100%;
        padding: var(--gap-medium) var(--gap);
    }

    .settings__item {
        grid-template-columns: var(--icon-size) 1fr 40px;
        padding: var(--gap)
    }

    .user__header {
        padding: var(--gap);
    }

    .user__api-key {
        padding: var(--gap);
    }

    .user__logout {
        padding: var(--gap)
    }
}

/* LOGO */
.logo {
    display: block;
    height: auto;
    text-transform: uppercase;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 32px;
    text-align: center;
    white-space: nowrap;
}

a .logo__name {
    color:var(--text-color);
    transition: color var(--transition);
}
a:hover .logo__name {
    color:var(--accent-color);
}

@media (max-width: 720px) {
    .logo {
        font-size: 24px;
    }

    .logo .logo__name {
        animation: none;
    }

    .logo--compact {
        transform: none;
    }
}

@media (max-width:720px) {
    .logo .logo__name {
        text-shadow: none
    }
}

/* NOTIFY */
.notify,
.notify * {
    pointer-events: none;
    user-select: none;
}

.notify {
    position: fixed;
    bottom: calc(var(--gap) * 3);
    right: var(--gap);
    height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.notify__wrapper {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: flex-end;
    gap: var(--gap-medium)
}

.notify__item {
    display: flex;
    align-items: center;
    gap: var(--gap-small);
    padding: var(--gap-medium);
    color: var(--text-color);
    border-radius: 25px;
    background-color: var(--background-color-alt);
    box-shadow: var(--background-color-main) 0 0 0 2px;
    animation: notify 4.4s forwards;
}

.notify__item .icon,
.notify__item .icon svg {
    width: var(--icon-size-medium);
    height: var(--icon-size-medium);
}

.notify__item .icon svg {
    fill: var(--text-color)
}

.notify__item--success .icon svg {
    fill: var(--accent-color)
}

.notify__item--warning .icon svg {
    fill: var(--warning-color)
}

@media (max-width: 720px) {
    .notify {
        left: 0;
        align-items: center;
        width: 100%
    }

    .notify__wrapper {
        align-items: center;
        width: 100%;
    }

    .notify__item {
        animation: notifyMobile 4.4s forwards;
    }

    .notify__item .icon,
    .notify__item .icon svg {
        width: var(--icon-size);
        height: var(--icon-size);
    }
}

@keyframes notify {
    0% {
        opacity: 0;
        transform: translateY(var(--gap));
    }

    8% {
        opacity: 1;
        transform: translateY(0);
    }

    92% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateX(var(--gap));
    }
}

@keyframes notifyMobile {
    0% {
        opacity: 0;
        transform: translateY(var(--gap));
    }

    8% {
        opacity: 1;
        transform: translateY(0);
    }

    92% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(var(--gap));
    }
}

/* CRITICAL */
.critical {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--background-color-main);
    text-align: center;
}

.critical__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap)
}

.critical__image img {
    display: block;
    width: 100%;
    max-width: 158px
}

.critical__code {
    display: block;
    text-align: center;
    opacity: .7;
    font-size: var(--font-size-small)
}

/* HIDE VIEWED */
.hide-viewed .movie-card--viewed,
.hide-viewed .game-card--completed,
.hide-viewed .location-card--visited {
    display: none
}


/* ENERGY SAVED MODE */
body .energy-saved {
    --transition: none;
}

.energy-saved *,
.energy-saved *::before,
.energy-saved *::after {
    animation-timing-function: steps(3) !important
}

.energy-saved .logo * {
    animation: none
}

.energy-saved .equalizer {
    background: url('../images/speaker.svg') 50% 50% / 16px 16px no-repeat
}

.energy-saved .equalizer svg {
    display: none
}

.energy-saved .track-info__backdrop,
.energy-saved .backdrop-cover {
    display: none
}

.energy-saved .playlist-summary__title,
.energy-saved .playlist-summary .tags,
.energy-saved .playlist-summary__description {
    opacity:1;
}


/* APP FOCUS LOST MODE */
.focus-lost *,
.focus-lost *::before,
.focus-lost *::after {
    animation-timing-function: steps(2) !important
}

.focus-lost .logo * {
    animation: none
}

.focus-lost .equalizer {
    background: url('../images/speaker.svg') 50% 50% / 16px 16px no-repeat
}

.focus-lost .equalizer svg {
    display: none
}



/* AUTHORIZATION */
.layout:has(.authorization) {
    position:relative;
    overflow: hidden;
}
.authorization {
    height:100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.authorization--error {
    animation: authError .5s linear;
}

.authorization__wrapper {
    width: 100%;
    max-width: 420px;
    padding: var(--gap);
    display: grid;
    grid-template-columns: 1fr 16px;
    gap: var(--gap);
    background-color: var(--background-color-alt);
    border-radius: var(--border-radius);
}

.authorization__title .logo {
    text-align: left;
    line-height: 1;
}

.authorization__theme-switcher {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.authorization .authorization__hidden-input {
    grid-column: span 2;
    position: absolute;
    height: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
}

.authorization__form {
    grid-column: span 2;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--gap-medium);
}

.input-digit {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    height: 60px;
    color: var(--accent-color);
    background-color: var(--background-color-main);
    border-radius: var(--border-radius);
    font-size: var(--font-size-extralarge);
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    transition: all var(--transition);
}

.input-digit--not-empty {
    text-shadow: 0 0 0 transparent, 0 0 10px var(--accent-color), 0 0 20px rgba(255, 215, 38, 0.5), 0 0 40px var(--accent-color), 0 0 100px var(--accent-color), 0 0 200px var(--accent-color), 0 0 300px var(--accent-color), 0 0 500px var(--accent-color);
}

.input-digit:first-child::before,
.input-digit--not-empty+.input-digit::before {
    content: '';
    width:16px;
    height:2px;
    position: absolute;
    bottom: var(--gap-medium);
    background-color: var(--accent-color);
    display: block;
    animation: caretPulse 1s linear infinite
}

.input-digit--not-empty::before {
    display: none !important;
}

.authorization--waiting .input-digit {
    opacity: .7;
    transform: scale(.8);
}

.authorization--success {
    opacity: 0;
    transform: scale(.8);
}

@keyframes caretPulse {
    0% {
        opacity: 0;
    }

    50% {
        opacity: .3
    }

    100% {
        opacity: 0
    }
}

@keyframes authError {

    8%,
    41% {
        transform: translateX(-10px);
    }

    25%,
    58% {
        transform: translateX(10px);
    }

    75% {
        transform: translateX(-5px);
    }

    92% {
        transform: translateX(5px);
    }

    0%,
    100% {
        transform: translateX(0);
    }
}

@media (max-width:720px) {
    .authorization {
        height:calc(100vh - 110px);
        padding:0 var(--gap-small);
    }
    .input-digit {
        aspect-ratio: 1;
    }
}
@media only screen and (max-width: 720px) and (max-height:900px){
    .authorization {
        height:60vh;
    }
}