:root,
[data-theme="dark"],
.reu-theme-dark {
    color-scheme: dark;
    --color-scheme: dark;
    /* Surfaces & backgrounds */
    --color-bg: #111;
    --color-surface: #222;
    --color-surface-hover: #333;
    --color-surface-active: #444;
    --color-overlay-bg: #111D;
    --color-footer-bg: #1A1A1A;
    /* Text */
    --color-text-primary: #FFF;
    --color-text-secondary: #888;
    --color-text-muted: #666;
    /* Borders */
    --color-border: #333;
    --color-border-subtle: #3338;
    --color-border-strong: #555;
    /* Decorative / surface overlays (subtle lightening on dark) */
    --color-overlay-weak: #FFF1;
    --color-overlay-medium: #FFF2;
    --color-overlay-strong: #FFF5;
    /* Spinner / loader fill */
    --color-loader: #FFF;
    /* Scrollbar */
    --color-scrollbar-thumb: #555;
    /* Link Colors */
    --color-link: #4CB7FF;
    --color-link-hover: #66C1FF;
    /* Discord Brand Colors */
    --color-discord: #5865F2DD;
    --color-discord-hover: #6373EDDD;
    /* Ko-fi Brand Colors */
    --color-kofi: #FF4F19DD;
    --color-kofi-hover: #FF6433DD;
    --color-kofi-open: #FF8966DD;
    /* Blue Button Variant Colors */
    --color-blue: #1E72CCDD;
    --color-blue-hover: #2B7FD4DD;
    --color-blue-active: #3A8CDDDD;
    /* Yellow Button Variant Colors */
    --color-yellow: #FFCC11AA;
    --color-yellow-hover: #FFD633BB;
    --color-yellow-active: #FFE055BB;
    /* Red Button Variant Colors */
    --color-button-red: #CC3D3D;
    --color-button-red-hover: #FF6666DD;
    --color-button-red-active: #FF7777DD;
    /* Button Colors */
    --color-button-bg: #2228;
    --color-button-bg-hover: #333A;
    --color-button-bg-active: #333C;
    --color-button-bg-disabled: #3334;
    --color-button-border: #FFF3;
    /* Navigation Colors */
    --color-nav-bg: #111;
    --color-nav-item-bg: #3333;
    --color-nav-item-hover: #3338;
    --color-nav-item-active: #555A;
    --color-nav-border: #FFF3;
    /* Input Colors */
    --color-input-border: #333;
    --color-input-border-hover: #444;
    --color-input-bg: #1A1A1A;
    --color-input-bg-hover: #222;
    --color-input-bg-disabled: #282828;
    /* Tooltip Colors */
    --color-tooltip-bg: #3338;
    --color-tooltip-text: #FFF;
    /* Modal Colors */
    --color-modal-bg: #111C;
    /* Object Tree Colors */
    --color-object-tree-box-bg: #222;
    --color-object-tree-box: #2224;
    --color-object-tree-box-value: #2228;
    /* Upload Drop Zone Colors */
    --color-dropzone-border: #FFF5;
    --color-dropzone-bg: #FFF1;
    --color-dropzone-bg-hover: #FFF2;
    --color-dropzone-text: #AAA;
    --color-dropzone-note: #666;
    --color-tag-text: #DDD;
    --color-tag-gbx-bg: #257A;
    --color-tag-other-bg: #642A;
    /* Friendly Type (syntax) Colors */
    --color-syntax-keyword: #59B9FF;
    --color-syntax-enum: #DBFFC1;
    --color-syntax-struct: #63FFFF;
    --color-syntax-class: #5BFFDE;
    --color-syntax-generic: #B8D7A3;
    --color-syntax-interface: #B6D7A3;
    /* Control fill (checkbox / radio mark) */
    --color-control-mark: #FFF;
    /* Validation Colors */
    --color-red: #FF4C4C;
    --color-green: #42DC54;
    /* Fonts */
    --font-mono: "Chivo Mono";
}

[data-theme="light"],
.reu-theme-light {
    color-scheme: light;
    --color-scheme: light;
    /* Surfaces & backgrounds */
    --color-bg: #F4F4F5;
    --color-surface: #FFF;
    --color-surface-hover: #E9E9EC;
    --color-surface-active: #DCDCE1;
    --color-overlay-bg: #FFFFFFEE;
    --color-footer-bg: #EEE;
    /* Text */
    --color-text-primary: #1A1A1A;
    --color-text-secondary: #666;
    --color-text-muted: #999;
    /* Borders */
    --color-border: #CCC;
    --color-border-subtle: #0000001A;
    --color-border-strong: #AAA;
    /* Decorative / surface overlays (subtle darkening on light) */
    --color-overlay-weak: #0000000A;
    --color-overlay-medium: #00000014;
    --color-overlay-strong: #00000033;
    /* Spinner / loader fill */
    --color-loader: #333;
    /* Scrollbar */
    --color-scrollbar-thumb: #BBB;
    /* Link Colors */
    --color-link: #1565C0;
    --color-link-hover: #1E88E5;
    /* Button Colors */
    --color-button-bg: #FFFFFFAA;
    --color-button-bg-hover: #FFFFFF;
    --color-button-bg-active: #EDEDED;
    --color-button-bg-disabled: #00000010;
    --color-button-border: #00000026;
    /* Navigation Colors */
    --color-nav-bg: #FAFAFA;
    --color-nav-item-bg: #00000006;
    --color-nav-item-hover: #0000000A;
    --color-nav-item-active: #00000026;
    --color-nav-border: #00000026;
    /* Input Colors */
    --color-input-border: #CCC;
    --color-input-border-hover: #999;
    --color-input-bg: #FFF;
    --color-input-bg-hover: #F4F4F5;
    --color-input-bg-disabled: #EBEBEB;
    /* Tooltip Colors */
    --color-tooltip-bg: #222222E6;
    --color-tooltip-text: #FFF;
    /* Modal Colors */
    --color-modal-bg: #FFFFFFCC;
    /* Object Tree Colors */
    --color-object-tree-box-bg: #E9E9EC;
    --color-object-tree-box: #00000004;
    --color-object-tree-box-value: #00000012;
    /* Upload Drop Zone Colors */
    --color-dropzone-border: #00000033;
    --color-dropzone-bg: #0000000A;
    --color-dropzone-bg-hover: #00000014;
    --color-dropzone-text: #555;
    --color-dropzone-note: #999;
    --color-tag-text: #222;
    /* Friendly Type (syntax) Colors */
    --color-syntax-keyword: #0033B3;
    --color-syntax-enum: #267F2A;
    --color-syntax-struct: #008080;
    --color-syntax-class: #267F99;
    --color-syntax-generic: #3E7C2A;
    --color-syntax-interface: #3E7C2A;
    /* Control fill (checkbox / radio mark) */
    --color-control-mark: #1565C0;
    /* Validation Colors */
    --color-red: #D32F2F;
    --color-green: #2E7D32;
}

@import url('CourierPrime-Regular.ttf');

@font-face {
    font-family: "Rubik";
    src: url('Rubik-VariableFont_wght.ttf');
}

@font-face {
    font-family: "Chivo Mono";
    src: url('ChivoMono-VariableFont_wght.ttf');
}

html, body {
    font-family: "Rubik";
    font-optical-sizing: auto;
    font-style: normal;
    margin: 0;
    padding: 0;
    font-size: 18px;
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    transition: background-color 0.2s ease, color 0.2s ease;
}

body {
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

button, input[type=submit], input[type=button] {
    all: unset;
}

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

    a:hover {
        color: var(--color-link-hover);
        text-decoration: underline;
    }

.reu-container {
    padding: 1rem;
    width: 75%;
    margin-right: auto;
    margin-left: auto;
    transition: width 0.2s ease, padding 0.2s ease;
}

main.reu-main {
    flex: 1;
}

@media (max-width: 850px) {
    .reu-container {
        width: calc(100% - 3rem);
    }
}

.reu-discord {
    background-color: var(--color-discord) !important;
}

    .reu-discord:hover {
        background-color: var(--color-discord-hover) !important;
    }

.reu-nuget {
    background-color: var(--color-blue) !important;
}

    .reu-nuget:hover {
        background-color: var(--color-blue-hover) !important;
    }

.reu-kofi {
    background-color: var(--color-kofi) !important;
    cursor: pointer;
}

    .reu-kofi:hover {
        background-color: var(--color-kofi-hover) !important;
    }

    .reu-kofi.open {
        background-color: var(--color-kofi-open) !important;
    }



.reu-button, input[type=submit], input[type=button] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-primary);
    background: var(--color-button-bg);
    border-bottom: 2px solid var(--color-button-border);
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.05s ease, color 0.05s ease;
    padding: 10px 5px;
    cursor: pointer;
}

    .reu-button:hover, input[type=submit]:hover, input[type=button]:hover {
        background-color: var(--color-button-bg-hover);
        color: var(--color-text-primary);
        text-decoration: none;
    }

    .reu-button.active {
        background-color: var(--color-button-bg-active);
    }

    .reu-button.disabled, .reu-button:disabled, input[type=submit]:disabled, input[type=button]:disabled {
        background-color: var(--color-button-bg-disabled);
        color: var(--color-text-secondary);
        cursor: not-allowed;
    }

.reu-button-blue {
    background-color: var(--color-blue);
    color: #FFF;
}

    .reu-button-blue:hover:enabled, .reu-button-blue:hover:not(.disabled) {
        background-color: var(--color-blue-hover);
        color: #FFF;
    }

    .reu-button-blue.active {
        background-color: var(--color-blue-active);
        color: #FFF;
    }

.reu-button-yellow {
    background-color: var(--color-yellow);
}

    .reu-button-yellow:hover:enabled, .reu-button-yellow:hover:not(.disabled) {
        background-color: var(--color-yellow-hover);
    }

    .reu-button-yellow.active {
        background-color: var(--color-yellow-active);
    }

.reu-button-red {
    background-color: var(--color-button-red);
    color: #FFF;
}

    .reu-button-red:hover:enabled, .reu-button-red:hover:not(.disabled) {
        background-color: var(--color-button-red-hover);
    color: #FFF;
    }

    .reu-button-red.active {
        background-color: var(--color-button-red-active);
    color: #FFF;
    }

.reu-button img {
    transition: filter 0.2s ease;
}

/* In the light theme, icons inside plain buttons are white SVGs designed for
   dark backgrounds — invert them so they are visible on the light surface. */
[data-theme="light"] .reu-button img,
.reu-theme-light .reu-button img {
    filter: invert(1);
    transition: filter 0.2s ease;
}

/* Colored-variant buttons keep their dark backgrounds so they are excluded. */
[data-theme="light"] .reu-button-blue img,
[data-theme="light"] .reu-button-yellow img,
[data-theme="light"] .reu-button-red img,
[data-theme="light"] .reu-discord img,
[data-theme="light"] .reu-kofi img,
[data-theme="light"] .reu-nuget img,
.reu-theme-light .reu-button-blue img,
.reu-theme-light .reu-button-yellow img,
.reu-theme-light .reu-button-red img,
.reu-theme-light .reu-discord img,
.reu-theme-light .reu-kofi img,
.reu-theme-light .reu-nuget img {
    filter: none;
}

.reu-upload-button {
    position: relative;
}

.reu-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reu-overflow {
    overflow-x: auto;
}

.reu-list {
    display: flex;
}

    .reu-list .reu-list-item {
        display: flex;
        border-radius: 5px;
        justify-content: center;
    }

    .reu-list.grow .reu-list-item {
        flex: 1;
    }

        .reu-list .reu-list-item:hover {
            background-color: var(--color-surface-hover);
            cursor: pointer;
        }

        .reu-list .reu-list-item.active {
            background-color: var(--color-surface-active);
        }

    .reu-list.panel {
        background-color: var(--color-input-bg);
        border: 1px solid var(--color-border);
        border-radius: 5px;
        transition: background-color 0.2s ease;
    }

    .reu-list.vertical {
        flex-direction: column;
        overflow: auto;
    }

    .reu-list.wrap {
        flex-flow: wrap;
    }

.reu-document {
    max-width: 800px;
    line-height: 1.6;
    margin-bottom: 2rem;
}

    .reu-document .last-updated {
        font-style: italic;
        font-size: 0.9em;
        margin-bottom: 2rem;
        border-left: 3px solid var(--color-border);
        padding-left: 1rem;
    }

    .reu-document h2 {
        margin-top: 2.5rem;
        margin-bottom: 1rem;
    }

    .reu-document ul {
        margin-bottom: 1rem;
        padding-left: 1.5rem;
    }

    .reu-document li {
        margin-bottom: 0.5rem;
    }

select {
    cursor: pointer;
}

input[type=text],
input:not([type]),
input.text,
select,
input[type=date],
input[type=color],
input[type=datetime-local],
input[type=time],
input[type=month],
input[type=password],
input[type=search],
input[type=week],
input[type=url],
input[type=tel],
input[type=email],
input[type=number] {
    border: 1px solid var(--color-input-border);
    border-radius: 5px;
    font-family: inherit;
    color: inherit;
    padding: 2px 10px;
    background-color: var(--color-input-bg);
    font-size: inherit;
    color-scheme: var(--color-scheme, dark);
    transition: background-color 0.2s ease, color 0.2s ease;
}

    input[type=text]:hover,
    input:not([type]):hover,
    input.text:hover,
    select:hover,
    input[type=date]:hover,
    input[type=datetime-local]:hover,
    input[type=color]:hover,
    input[type=time]:hover,
    input[type=month]:hover,
    input[type=password]:hover,
    input[type=search]:hover,
    input[type=week]:hover,
    input[type=url]:hover,
    input[type=tel]:hover,
    input[type=email]:hover,
    input[type=number]:hover {
        border-color: var(--color-input-border-hover);
        background-color: var(--color-input-bg-hover);
    }

    input[type=text].disabled,
    input[type=text]:disabled,
    input:not([type]).disabled,
    input:not([type]):disabled,
    input.text.disabled,
    input.text:disabled,
    select.disabled,
    select:disabled,
    input[type=date].disabled,
    input[type=date]:disabled,
    input[type=datetime-local].disabled,
    input[type=datetime-local]:disabled,
    input[type=color].disabled,
    input[type=color]:disabled,
    input[type=time].disabled,
    input[type=time]:disabled,
    input[type=month].disabled,
    input[type=month]:disabled,
    input[type=password].disabled,
    input[type=password]:disabled,
    input[type=search].disabled,
    input[type=search]:disabled,
    input[type=week].disabled,
    input[type=week]:disabled,
    input[type=url].disabled,
    input[type=url]:disabled,
    input[type=tel].disabled,
    input[type=tel]:disabled,
    input[type=email].disabled,
    input[type=email]:disabled,
    input[type=number].disabled,
    input[type=number]:disabled {
        background-color: var(--color-input-bg-disabled);
        border-color: var(--color-input-border);
        color: var(--color-text-secondary);
        cursor: not-allowed;
    }

    input[type=text]:read-only,
    input:not([type]):read-only,
    input.text:read-only,
    input[type=date]:read-only,
    input[type=datetime-local]:read-only,
    input[type=time]:read-only,
    input[type=month]:read-only,
    input[type=password]:read-only,
    input[type=search]:read-only,
    input[type=week]:read-only,
    input[type=url]:read-only,
    input[type=tel]:read-only,
    input[type=email]:read-only,
    input[type=number]:read-only {
        background-color: var(--color-input-bg-hover);
        border: 1px solid var(--color-input-bg-disabled);
    }

        input[type=text]:read-only:hover,
        input:not([type]):read-only:hover,
        input.text:read-only:hover,
        input[type=date]:read-only:hover,
        input[type=datetime-local]:read-only:hover,
        input[type=time]:read-only:hover,
        input[type=month]:read-only:hover,
        input[type=password]:read-only:hover,
        input[type=search]:read-only:hover,
        input[type=week]:read-only:hover,
        input[type=url]:read-only:hover,
        input[type=tel]:read-only:hover,
        input[type=email]:read-only:hover,
        input[type=number]:read-only:hover {
            border-color: var(--color-input-border);
            border: 1px solid var(--color-input-bg-disabled);
        }

.reu-mono,
code,
pre,
kbd,
samp,
tt,
var,
textarea {
    font-family: var(--font-mono), monospace !important;
    font-variant-ligatures: no-common-ligatures;
    font-weight: 200;
}

textarea {
    padding: 5px;
    border-radius: 5px 0 0 5px;
    background: var(--color-input-bg);
    color: var(--color-text-primary);
    border: 1px solid var(--color-input-border);
    transition: background-color 0.2s ease, color 0.2s ease;
}

    textarea:read-only {
        background-color: var(--color-input-bg-hover);
        border: 1px solid var(--color-input-bg-disabled);
    }

    textarea:disabled {
        background-color: var(--color-input-bg-disabled);
        border-color: var(--color-input-border);
        color: var(--color-text-secondary);
        cursor: not-allowed;
    }

progress {
    border: 1px solid var(--color-input-border);
    border-radius: 5px;
}
    progress::-webkit-progress-bar {
        border-radius: 5px;
        background-color: var(--color-input-bg);
    }

    progress::-webkit-progress-value {
        border-radius: 5px;
        background-color: var(--color-blue);
    }

    progress::-moz-progress-bar {
        border-radius: 0px !important;
        background-color: var(--color-blue);
    }

footer.reu-footer {
    background: var(--color-footer-bg);
    transition: background-color 0.2s ease;
}

    footer.reu-footer small {
        color: var(--color-text-secondary);
    }

.footer-discover-more {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
    font-size: 75%;
}

    .footer-discover-more code {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: right;
        font-size: 80%;
        color: var(--color-text-secondary);
        white-space: nowrap;
        gap: 0.2rem;
    }

    .footer-discover-more .footer-buttons {
        flex: 1;
        display: flex;
        justify-content: end;
    }

.reu-upload-button input {
    position: absolute;
    top: 0;
    width: 100%;
    height: calc(100% + 3px);
    cursor: pointer;
    opacity: 0;
}

.reu-theme-icon {
    cursor: pointer;
    width: 20px;
    height: 20px;
    opacity: 0.7;
    transition: opacity 0.15s ease;
    background: url('icons/light.svg') no-repeat center / contain;
}

    .reu-theme-icon:hover {
        opacity: 1;
    }

[data-theme="light"] .reu-theme-icon {
    background-image: url('icons/light_fill.svg');
    filter: invert(0.6);
}

.invalid {
    outline: 1px solid var(--color-red);
}

.validation-message {
    font-size: 80%;
    padding: 0.5rem 0;
    color: var(--color-red);
}

.valid {
    color: var(--color-green);
}

#components-reconnect-modal {
    display: none;
    background-color: var(--color-modal-bg);
    text-align: center;
    position: fixed;
    top: 0;
    z-index: 10001;
    width: calc(100% - 4rem);
    height: calc(100vh - 4rem);
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.5s;
    flex-direction: column;
    gap: 20px;
    padding: 2rem;
}

    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected {
        display: flex;
    }

    #components-reconnect-modal .reu-connection-lost {
        font-size: 200%
    }

    #components-reconnect-modal .reu-connection-lost-detail {
        font-size: 75%;
        color: var(--color-text-secondary);
    }

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes reu-modal-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes reu-modal-panel-in {
    from { opacity: 0; transform: scale(0.96) translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* Scrollbar */
* {
    scrollbar-color: var(--color-scrollbar-thumb) var(--color-input-bg);
}

.reu-scrollbar-thin {
    scrollbar-color: var(--color-scrollbar-thumb) var(--color-input-bg);
}