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

html, body {
    height: 100%
}

body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

img, video, canvas, svg {
    display: block;
    max-width: 100%
}

input, button, textarea, select {
    font: inherit
}
body{font-family:system-ui,Segoe UI,Arial,Helvetica,sans-serif;}


/* --- Spacing scale --- */
:root {
    --s-0: 0;
    --s-1: 0.25rem; /* 4px */
    --s-2: 0.5rem; /* 8px */
    --s-3: 1rem; /* 16px */
    --s-4: 1.5rem; /* 24px */
    --s-5: 3rem; /* 48px */
}

/* Padding */
.p-0 {
    padding: var(--s-0) !important
}

.p-1 {
    padding: var(--s-1) !important
}

.p-2 {
    padding: var(--s-2) !important
}

.p-3 {
    padding: var(--s-3) !important
}

.p-4 {
    padding: var(--s-4) !important
}

.p-5 {
    padding: var(--s-5) !important
}

.px-1 {
    padding-left: var(--s-1) !important;
    padding-right: var(--s-1) !important
}

.px-2 {
    padding-left: var(--s-2) !important;
    padding-right: var(--s-2) !important
}

.px-3 {
    padding-left: var(--s-3) !important;
    padding-right: var(--s-3) !important
}

.px-4 {
    padding-left: var(--s-4) !important;
    padding-right: var(--s-4) !important
}

.py-1 {
    padding-top: var(--s-1) !important;
    padding-bottom: var(--s-1) !important
}

.py-2 {
    padding-top: var(--s-2) !important;
    padding-bottom: var(--s-2) !important
}

.py-3 {
    padding-top: var(--s-3) !important;
    padding-bottom: var(--s-3) !important
}

.py-4 {
    padding-top: var(--s-4) !important;
    padding-bottom: var(--s-4) !important
}

.pt-2 {
    padding-top: var(--s-2) !important
}

.pt-3 {
    padding-top: var(--s-3) !important
}

.pt-4 {
    padding-top: var(--s-4) !important
}

.pb-2 {
    padding-bottom: var(--s-2) !important
}

.pb-3 {
    padding-bottom: var(--s-3) !important
}

.pb-4 {
    padding-bottom: var(--s-4) !important
}

/* Margin */
.m-0 {
    margin: var(--s-0) !important
}

.m-1 {
    margin: var(--s-1) !important
}

.m-2 {
    margin: var(--s-2) !important
}

.m-3 {
    margin: var(--s-3) !important
}

.m-4 {
    margin: var(--s-4) !important
}

.m-5 {
    margin: var(--s-5) !important
}

.mx-2 {
    margin-left: var(--s-2) !important;
    margin-right: var(--s-2) !important
}

.mx-3 {
    margin-left: var(--s-3) !important;
    margin-right: var(--s-3) !important
}

.my-2 {
    margin-top: var(--s-2) !important;
    margin-bottom: var(--s-2) !important
}

.my-3 {
    margin-top: var(--s-3) !important;
    margin-bottom: var(--s-3) !important
}

.mt-2 {
    margin-top: var(--s-2) !important
}

.mt-3 {
    margin-top: var(--s-3) !important
}

.mt-4 {
    margin-top: var(--s-4) !important
}

.mb-2 {
    margin-bottom: var(--s-2) !important
}

.mb-3 {
    margin-bottom: var(--s-3) !important
}

.mb-4 {
    margin-bottom: var(--s-4) !important
}

/* Hide outline when FocusOnNavigate puts focus on headings */
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus,
h3[tabindex="-1"]:focus {
    outline: none;
}

/* Still show focus when users actually tab around */
:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}