* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow: hidden;
    font-family: 'Segoe UI', 'Roboto', sans-serif;
}

input:focus, select:focus, button:focus {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

/* Inset focus ring for the tightly packed rows of the properties panel */
.properties-panel input:focus, .properties-panel select:focus, .properties-panel button:focus {
    outline-width: 1px;
    outline-offset: -1px;
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23a0a0a0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
}

button:hover {
    opacity: 0.9;
}

button:active {
    transform: translateY(1px);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Colors are published as custom properties by the renderer whenever the
   active palette changes; the fallbacks match the default dark palette. */
::-webkit-scrollbar-track {
    background: var(--scrollbar-track, #2b2b2b);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb, #454545);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover, #555555);
}

@keyframes menuFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}