/* Fullscreen canvas */
html,
body {
    margin: 0;
    height: 100%;
    background: transparent;
}

canvas {
    display: block;
    cursor: grab;
}

/* ---------------- GUI Styling ---------------- */
.dg.main.taller-than-window .close-button {
    border-top: 1px solid #ddd;
}

.dg.main .close-button {
    background-color: #e8e8e8;
}
 
.dg.main .close-button:hover {
    background-color: #ddd;
}

.dg {
    color: rgba(100,100,100,0.5);
    text-shadow: none !important;
}

.dg.main::-webkit-scrollbar {
    background: #fafafa;
}

.dg.main::-webkit-scrollbar-thumb {
    background: #bbb;
}
 
.dg li:not(.folder) {
    background: #fafafa;
    border-bottom: 1px solid #ddd;
}
 
.dg li.save-row .button {
    text-shadow: none !important;
}

.dg li.title {
    background: #e8e8e8 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;
}

.dg .cr.function:hover,.dg .cr.boolean:hover {
    background: #fff;
}
 
.dg .c input[type=text] {
    background: #e9e9e9;
}
 
.dg .c input[type=text]:hover {
    background: #eee;
}
 
.dg .c input[type=text]:focus {
    background: #eee;
    color: #555;
}
 
.dg .c .slider {
    background: #e9e9e9;
}

.dg .c .slider:hover {
    background: #eee;
}

/* dat.GUI select — dark/slate to match UI */
.dg .c select {
    width: 100%;
    padding: 1px 10px;
    padding-right: 28px;               /* room for caret */
    border-radius: 6px;
    font-size: 13px;
    color: #e5e7eb;                     /* text */
    border: 1px solid #334155;          /* slate-700 */
    background-color: #0b1220;          /* slate-950-ish */
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;

    /* custom caret */
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='%239ca3af'>\
<path d='M5.516 7.548a.625.625 0 0 1 .884-.884L10 10.264l3.6-3.6a.625.625 0 1 1 .884.884l-4.042 4.041a.625.625 0 0 1-.884 0L5.516 7.548z'/>\
</svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}

.dg .c select:hover {
    border-color: #475569;              /* slate-600 */
    background-color: #0f172a;          /* slate-900 */
}

.dg .c select:focus {
    border-color: #60a5fa;              /* blue-400 */
    box-shadow: 0 0 0 2px rgba(96,165,250,.35);
    background-color: #0f172a;
}

.dg .c select:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Optional: dark dropdown items (best-effort; support varies by browser) */
.dg .c select option {
    color: #e5e7eb;
    background-color: #0b1220;
}