:root {
    color-scheme: dark;
    --bg-0: #100819;
    --bg-1: #241034;
    --bg-2: #160b22;
    --bg-3: #321947;
    --text-1: #eadbff;
    --text-2: #faf5ff;
    --accent-cyan: #b88aef;
    --accent-cyan-2: #cba5ff;
    --accent-cyan-light: #e4ccff;
    --ml-topbar-bg: #32134c;
    --radius-sm: 3px;
    --radius-md: 3px;
    --radius-lg: 4px;
}

body:not(.stream) {
    background: linear-gradient(135deg, #100819, #241034 55%, #160b22);
    color: #faf5ff;
}
body:not(.stream)::before { background: none; }

.top-line { background: #32134c; }

.modal-content, .context-menu-background,
.sidebar-content, .notification-element,
.user-panel, .role-panel {
    background: #29163b;
    color: #faf5ff;
    border: 1px solid #9368bc;
    border-radius: 4px;
    box-shadow: 0 12px 32px #0006;
}

.host-element, .app-element {
    background-color: #29163b;
    border: 1px solid #73508f;
    border-radius: 4px;
}
.host-element:hover, .app-element:hover {
    background-color: #3a2052;
    border-color: #cba5ff;
    border-radius: 4px;
}

button, .file-button {
    background-color: #67349a;
    border-color: #b88aef;
    border-radius: 3px;
    color: #ffffff;
    box-shadow: none;
}
button:hover:not(:disabled), .file-button:hover {
    background-color: #7b43af;
    border-color: #e4ccff;
    box-shadow: 0 0 0 2px #cba5ff33;
    transform: none;
}
button:disabled {
    background-color: #392b46;
    border-color: #64546f;
    color: #c1b3cd;
}

.textlike, textarea, select, .select-polyfill-display,
input[type=text], input[type=password], input[type=number] {
    background: #1c102a;
    color: #faf5ff;
    border: 1px solid #a27bbf;
    border-radius: 3px;
    box-shadow: none;
}
textarea:hover:enabled, select:hover:enabled,
.select-polyfill-display:hover,
input[type=text]:hover:enabled,
input[type=password]:hover:enabled,
input[type=number]:hover:enabled {
    background: #2c193e;
    border-color: #d6b5ff;
    box-shadow: none;
}
select option, .select-polyfill-list {
    background: #29163b;
    color: #faf5ff;
}
.select-polyfill-list p, .context-menu-element {
    color: #eadbff;
}
.context-menu-element:hover, .select-polyfill-list p:hover {
    background: #573078;
}
.context-menu-element-red { color: #ff9aab; }

input[type=checkbox] {
    background: #1c102a;
    border-color: #b88aef;
    border-radius: 3px;
    box-shadow: none;
}
input[type=checkbox]:checked {
    background: #67349a;
    border-color: #e4ccff;
    box-shadow: none;
}
input[type=range] { accent-color: #cba5ff; }

:focus-visible {
    outline: 3px solid #e4ccff;
    outline-offset: 3px;
}

/* Keep the actual streamed picture and letterboxing untouched. */
body.stream { background: #000; }
body.stream::before { background: #000; }

/* Loveless logos v1 */
.modal-content:has(#ml-api-password)::before {
    content: "";
    display: block;
    width: min(220px, 65vw);
    aspect-ratio: 1;
    margin: 0 auto 20px;
    background: url("../resources/loveless/LW.jpg") center / contain no-repeat;
}
.top-line > h1::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 42px;
    margin-right: 12px;
    vertical-align: middle;
    background: url("../resources/loveless/TEXT.png") center / contain no-repeat;
}

/* Login corner logo v2 */
.modal-content:has(#ml-api-password)::before {
    display: none;
}
body:has(#modal-overlay:not(.modal-disabled) #ml-api-password)::before {
    content: "";
    position: fixed;
    top: 16px;
    left: 16px;
    width: clamp(64px, 12vw, 150px);
    aspect-ratio: 1;
    background: url("../resources/loveless/LW-transparent.png") center / contain no-repeat;
    pointer-events: none;
    z-index: 10000;
}