: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;
}

/* Modern Wake Desk START */
body:not(.stream) {
    margin: 0;
    color: #f4effb;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 16px;
    text-shadow: none;
    background:
        radial-gradient(ellipse at 80% 0%, #28143d 0%, transparent 55%),
        #100c17 !important;
    min-height: 100vh;
}
body:not(.stream) {
    --ml-topbar-height: 76px;
    --ml-topbar-icon-button: 44px;
    --ml-topbar-icon-size: 24px;
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 4px;
}
body:not(.stream) .top-line {
    background: #191121 !important;
    border-bottom: 1px solid #3d2a50;
    box-shadow: 0 8px 30px #00000020;
    justify-content: space-between;
    padding: 12px 24px;
}
body:not(.stream) .top-line > h1 {
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 600;
    letter-spacing: -.5px;
    text-shadow: none;
}
body:not(.stream) .top-line-actions {
    gap: 8px;
}
body:not(.stream) button,
body:not(.stream) .file-button {
    background-color: #30203f !important;
    color: #f4effb !important;
    border: 1px solid #59416e !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    text-shadow: none;
    font-size: 15px;
    min-width: 44px;
    min-height: 44px;
}
body:not(.stream) button:hover:not(:disabled),
body:not(.stream) .file-button:hover {
    background-color: #49305f !important;
    border-color: #bc91e3 !important;
    transform: none;
}
body:not(.stream) button:disabled {
    opacity: .45;
    cursor: not-allowed;
}
body:not(.stream) :is(button, input, select, a):focus-visible {
    outline: 2px solid #d5afff !important;
    outline-offset: 3px;
}
body:not(.stream) input:not([type="checkbox"]):not([type="range"]):not([type="file"]),
body:not(.stream) select,
body:not(.stream) textarea {
    background: #120d1b !important;
    color: #f4effb !important;
    border: 1px solid #5c436f !important;
    border-radius: 3px !important;
    padding: 11px 12px;
    font: inherit;
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: none !important;
}
body:not(.stream) .modal-content {
    background: #1e1529 !important;
    border: 1px solid #513665 !important;
    border-radius: 4px !important;
    box-shadow: 0 24px 80px #00000070 !important;
    padding: clamp(20px, 4vw, 36px);
    box-sizing: border-box;
}
body:not(.stream) .modal-content:has(#ml-api-password) {
    width: calc(100% - 32px);
    max-width: 460px;
    margin: max(150px, 16vh) auto 24px;
}
body:not(.stream) .modal-content:has(#ml-api-password) .input-div {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
body:not(.stream) .modal-content:has(#ml-api-password) label {
    color: #d7c7e6;
    font-size: 14px;
}
body:not(.stream) .host-list {
    gap: 20px;
    padding: 24px;
}
body:not(.stream) .host-element {
    background: linear-gradient(145deg, #271a35, #1b1326) !important;
    border: 1px solid #493159 !important;
    border-radius: 4px !important;
    box-shadow: 0 8px 24px #00000025 !important;
    min-width: 180px;
}
body:not(.stream) .host-element > div {
    padding: 28px 24px;
    gap: 18px;
}
body:not(.stream) .host-element:hover {
    border-color: #b786df !important;
    background: #30203f !important;
}
body:not(.stream) .app-element {
    border: 1px solid #493159;
    border-radius: 4px !important;
    overflow: hidden;
}
body:not(.stream) .app-element:hover {
    background-color: #30203f !important;
    border-color: #b786df;
}
body:not(.stream) .notification-element,
body:not(.stream) .context-menu-list {
    background: #24182f !important;
    color: #f4effb !important;
    border: 1px solid #76508f !important;
    border-radius: 4px !important;
    box-shadow: 0 12px 32px #00000040 !important;
}
@media (max-width: 600px) {
    body:not(.stream) .top-line { padding: 10px 12px; }
    body:not(.stream) .top-line > h1 { font-size: 18px; }
    body:not(.stream) .top-line-actions { gap: 4px; }
    body:not(.stream) .host-list { padding: 16px; gap: 12px; }
    body:not(.stream) .host-element {
        min-width: 0;
        flex: 1 1 140px;
    }
}
/* Modern Wake Desk END */