:root {
    --tint: #2d2d7d;
    --tint-strength: 5%;
    --black: color-mix(in oklab, #101010, var(--tint) var(--tint-strength));
    --black-2: color-mix(in oklab, #202020, var(--tint) var(--tint-strength));
    --black-3: color-mix(in oklab, #303030, var(--tint) var(--tint-strength));;
    --black-4: color-mix(in oklab, #353535, var(--tint) var(--tint-strength));
    --black-trans: rgba(16, 16, 16, 0.9);
    --white: #efe9e7ff;
    --white-2: #ded5d2;
    --white-3: #d4c8c4;
    --white-4: #c7bbb7;
    --grey-light: #9f9f9f;
    --grey-dark: #646464;
    --grey-darker: #4c4848;
    --grey-darkest: #2f2e2e;

    --gradient-1: linear-gradient(-180deg, var(--black), color-mix(in oklab, var(--black), var(--black-2) 50%));
    --gradient-2: linear-gradient(-180deg, var(--black-2), color-mix(in oklab, var(--black-2), var(--black-3) 50%));

    --tint-main: color-mix(in oklab, #bdbdbd, var(--tint) calc(var(--tint-strength) * 2));
    --tint-present: color-mix(in oklab, #a9a9a9, var(--tint) calc(var(--tint-strength) * 2));
    --tint-transpresent: color-mix(in oklab, rgba(0, 0, 0, 0), var(--tint) calc(var(--tint-strength) * 2));
    --tint-muted: color-mix(in oklab, #525252, var(--tint) var(--tint-strength));
    --strong-tint: color-mix(in oklab, rgba(127, 127, 127, 0), var(--tint) calc(var(--tint-strength) * 4));
    --green: color-mix(in oklab, #37ac43, var(--tint) var(--tint-strength));
    --red: color-mix(in oklab, #f22e31, var(--tint) var(--tint-strength));
    --blue: color-mix(in oklab, #0b72bc, var(--tint) var(--tint-strength));
    --yellow: color-mix(in oklab, #f0c929ff, var(--tint) var(--tint-strength));
    --orange: #f09029;
    --purple: #6a4c93ff;
    --highlight: var(--yellow);

    --font-size-base: 18px;
    --gap-h: 7px;
    --gap-v: 14px;
    --jessc-gap: var(--gap-h);
    --input-padding-h: 0.75rem;
    --input-padding-v: 0.25rem;
    --input-border-radius: .5em;
    --attachment-border-radius: .5em;
    --input-border-width: 1px;
    --avatar-border-width: 2px;
    --animation-time: 0.25s;
    --message-padding-left: 3em;
    --tag-padding: 0.3em 0.3em 0.3em 0.6em;
    --tab-padding: .3em .8em;

    --jessc-border-radius-small: var(--input-border-radius);
    --jessc-interactive-background: var(--gradient-1);
    --jessc-interactive-background-hover: var(--gradient-2);
    --jessc-interactive-border-focused: var(--tint-present);
    --jessc-interactive-border-active: var(--tint-present);

    --default-font-family: "Inter Tight", serif;
    --jessc-font: var(--default-font-family);
    --mono-font: monospace;

    --bg: var(--black);
    --bg-2: var(--black-2);
    --bg-3: var(--black-3);
    --bg-4: var(--black-4);
    --text: var(--white);
    --text-2: var(--white-2);
    --text-3: var(--white-3);
    --text-4: var(--white-4);
    --neutral-light: var(--grey-light);
    --neutral-dark: var(--grey-dark);
    --flyout-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    --tint-shadow: 0 0 10px var(--tint-transpresent);

    --animation-duration: 0.2s;
}

@media (prefers-color-scheme: light) {
    :root {
        --black: #ffffff;
        --black-2: #f8f9fa;
        --black-3: #e9ecef;
        --black-4: #dee2e6;
        --black-trans: rgba(255, 255, 255, 0.9);
        --white: #212529;
        --white-2: #343a40;
        --white-3: #495057;
        --white-4: #6c757d;
        --grey-light: #6c757d;
        --grey-dark: #adb5bd;
        --grey-darker: #ced4da;
        --grey-darkest: #dee2e6;

        --bg: var(--black);
        --bg-2: var(--black-2);
        --bg-3: var(--black-3);
        --bg-4: var(--black-4);
        --text: var(--white);
        --text-2: var(--white-2);
        --text-3: var(--white-3);
        --text-4: var(--white-4);

        --blue: #0056b3;
        --tint-main: #004085;
        --tint-present: #003366;
        --tint-muted: #6c757d;

        --flyout-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        --tint-shadow: 0 0 10px rgba(0, 0, 0, 0.05);

        --gradient-1: linear-gradient(-180deg, var(--black), color-mix(in oklab, var(--black), var(--black-2) 50%));
        --gradient-2: linear-gradient(-180deg, var(--black-2), color-mix(in oklab, var(--black-2), var(--black-3) 50%));
    }
}

:root {
    --code-bg: #1C1D21;
}

html, body {
    height: 100dvh;
    max-height: 100dvh;
    width: 100dvw;
    margin: 0;
    padding: 0;
    font-family: var(--default-font-family);
}

body {
    background: var(--gradient-1);
    color: var(--text);
    font-size: var(--font-size-base);
    line-height: 1.5;
}

p {
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    font-weight: 700;
    margin: 0;
}

.clickable {
    cursor: pointer;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 1.75rem;
    font-weight: 500;
    margin-top: calc(var(--gap-v) * 2);
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.2rem;
}

span {
    text-align: start;
    height: max-content;
    word-break: break-word;
}

button, input, textarea, select {
    background-color: var(--bg);
    border: var(--input-border-width) solid var(--bg-4);
    border-radius: var(--input-border-radius);
    color: var(--text);
    font-family: var(--default-font-family);
    font-size: var(--font-size-base);
    margin: 0;
    padding: var(--input-padding-v) var(--input-padding-h);
    height: max-content;
}

input[type="color"] {
    height: 1.5em;
    width: 2.5em;
}

button.invalid, input.invalid, textarea.invalid, select.invalid {
    border-color: var(--red);
}

button.no-border, input.no-border, textarea.no-border, select.no-border {
    border: none;
    background: transparent;
}

.jessc {
    color: inherit;
}

button:hover {
    background: var(--gradient-2);
}

button.positive, input.positive, textarea.positive, select.positive {
    border: var(--input-border-width) solid var(--green);
    color: var(--green);
}

button.negative, input.negative, textarea.negative, select.negative {
    border: var(--input-border-width) solid var(--red);
    color: var(--red);
}

button * {
    color: inherit !important;
}

button.positive:hover, button.jessc.positive:hover {
    background: var(--green);
    border-color: var(--green);
    color: var(--bg);
}

button.negative:hover, button.jessc.negative:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--bg);
}

button.icon-button {
    background: var(--gradient-2);
    border: var(--input-border-width) solid var(--tint-muted);
    color: var(--text-4);
}

button.icon-button:hover {
    background: var(--gradient-2);
    border-color: var(--tint-present);
}

button.sensitive, input.sensitive, textarea.sensitive, select.sensitive {
    border: var(--input-border-width) solid var(--yellow);
    color: var(--yellow);
}

button.double, input.double, textarea.double, select.double {
    padding: var(--input-padding-v) calc(var(--input-padding-h) * 2);
}

button {
    align-items: center;
}

button.active {
    background-color: var(--bg-2);
    border-color: var(--blue);
}

div {
    box-sizing: border-box;
}

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

a .material-symbols-outlined {
    font-size: 0.9em !important;
}

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

.align-center {
    align-items: center;
}

.align-bottom {
    align-items: end;
}

button {
    cursor: pointer;
    align-items: center;
}

button:hover {
    background-color: var(--bg-3);
}

.material-symbols-outlined {
    font-size: 1em !important;
    color: var(--text) !important;
}

#toasts {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-h);
    padding: calc(var(--gap-v) * 2);
    z-index: 999;
}

.toast {
    animation: toast 5s ease-in-out;
}

@keyframes toast {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

#popups {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    z-index: 999;
    display: none;
}

#popups:has(.popup-container) {
    display: flex;
}

.popup-container {
    background: var(--black-trans);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.center-content {
    justify-content: center;
}

.toast {
    background: var(--gradient-1);
    border: var(--input-border-width) solid var(--tint-muted) !important;
    color: var(--tint-present);
    border-radius: var(--input-border-radius);
    padding: var(--gap-h) var(--gap-v);
    display: flex;
    gap: var(--gap-h);
    align-self: end;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
    max-width: max-content;
    pointer-events: none;
}

.no-pointer-events {
    pointer-events: none;
}

.toast.negative {
    border-color: var(--red);
}

.toast.positive {
    border-color: var(--tint-main);
}

.toast.sensitive {
    border-color: var(--yellow);
}

.toast.info {
    border-color: var(--blue);
}

.toast.special {
    border-color: var(--purple);
}

.status-text.positive {
    color: var(--tint-main);
}

.status-text.negative {
    color: var(--red);
}

.status-text.sensitive {
    color: var(--yellow);
}

.status-text.info {
    color: var(--blue);
}

.status-text.special {
    color: var(--purple);
}

textarea:focus-visible {
    outline: none;
}

.message-input {
    resize: none;
}

nav {
    background: var(--bg);
    border-bottom: 2px solid var(--text-3);
    padding: var(--gap-h) var(--gap-v);
    box-sizing: border-box;
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.flex, .flex-v {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-h);
}

.restrict-to-parent {
    max-height: 100%;
    max-width: 100%;
    height: 100%;
}

.flex-v {
    flex-direction: column;
    gap: var(--gap-v);
    flex-wrap: nowrap;
}

.allow-overflow {
    max-height: unset;
}

.no-wrap {
    flex-wrap: nowrap;
    overflow: hidden;
}

.flex-grow {
    flex-grow: 1;
}

.padded {
    padding: var(--gap-h);
}

.padded-big {
    padding: var(--gap-v);
}

.no-gap {
    gap: 0;
}

.small-gap {
    gap: var(--gap-h);
}

.big-gap {
    gap: var(--gap-v);
}

.bold {
    font-weight: bold;
}

hr {
    width: calc(100% - (var(--input-border-radius) * 2));
    margin: var(--gap-v) var(--input-border-radius);
    border: none;
    border-bottom: 1px solid var(--bg-4);
}

textarea {
    resize: vertical;
    font-family: var(--mono-font);
}

.error {
    color: var(--red);
    font-size: .8em;
}

input[type="datetime-local"] {
    position: relative;
    background: transparent;
    z-index: 1;
}

input[type="datetime-local"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: var(--bg);
    border-radius: var(--input-border-radius);
    border-right: 2.25em solid var(--text-4);
    z-index: -1;
}

label.required {
    font-weight: bold;
}

label {
    font-size: .8em;
}

::-webkit-scrollbar {
    width: var(--gap-h);
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: var(--bg-4);
    border-radius: 20px;
    border: transparent;
}

.relative {
    position: relative;
}

.layer-shadow {
    box-shadow: 0 0 15px 0px var(--bg);
}

.space-between {
    justify-content: space-between;
}