*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #0d0f12;
    font-family: "Segoe UI", Arial, sans-serif;
    color: #e2e6ea;
}

/* Form controls don't inherit the page font by default in most
   browsers -- without this, every button/input/select in the app
   (collapse arrows, the active-layer "X" remove button, etc.) renders
   in the browser's default UI font instead of Segoe UI, most
   noticeable on small icon-only buttons. */
button, input, select, textarea {
    font: inherit;
}

main {
    position: relative;
    height: 100%;
    width: 100%;
}

:root {
    --mint: #6fffd2;
    --panel-bg: #1b1e23;
    --panel-border: #2f3338;
    --btn-bg: #2a2e33;
    --btn-hover: #353a40;
    --text-light: #cfd3d7;
    --scrollbar-thumb: #3a3f46;
    --scrollbar-thumb-hover: #4d535b;
    /* Native controls (selects, date pickers, scrollbar corners) render dark to match. */
    color-scheme: dark;
}

/* Themed scrollbars everywhere: a thin, low-contrast thumb on the panel background instead of the
   OS's light gutter. Standard properties cover Chrome/Edge 121+ and Firefox; the ::-webkit-* rules
   are for Safari, which ignores scrollbar-color. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}
/* Brighten the thumb while the pointer is over the scrollable area, so it's findable when needed. */
*:hover { scrollbar-color: var(--scrollbar-thumb-hover) transparent; }
@supports not (scrollbar-color: auto) {
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb);
        border-radius: 4px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }
    ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
}