:root {
    --color-background: #fdf7fa;
    --color-on-background: #1a1a1a;
    --color-background-hover: #f7eef4;
    --color-on-background-hover: #1a1a1a;

    --color-primary: #ff69b4;
    --color-on-primary: #1a1a1a;
    --color-primary-light: #ffe3f0;
    --color-primary-hover: #ff4da6;

    --color-error: #ff4f7b;
    --color-on-error: white;

    --color-border: #f1dce6;
    --color-text-secondary: #6a5f6d;
    --color-text-plus: #00214d;
    --color-text-level-warning: #ff6b00;
    --color-text-version: #1d1f1e5c;

    --sctrollbar-secondary: #fff2fa;
}

main.dark,
header.dark {
    color-scheme: dark;

    --color-background: #111016;
    --color-on-background: #f0f0f5;
    --color-background-hover: #1a1820;

    --color-primary: #ff66c4;
    --color-primary-level: #ffb3e6;
    --color-primary-light: #331f2c;
    --color-primary-hover: #ff4db8;
    --color-primary-disabled: #2b2442;
    --color-on-primary: #1a1a1a;

    --color-error: #ff4f7b;
    --color-on-error: white;

    --color-border: #2a2a2a55;
    --color-text-secondary: #c5a9c9;
    --color-text-plus: #d8e6ff;
    --color-text-level-warning: #ff6b00cc;
    --color-text-version: #ffd8f52d;

    --sctrollbar-secondary: #1b1620;
}


    html,
    body {
        height: 100%;
        zoom: 90%;
    }

    body {
        display: flex;
        flex-direction: column;
        margin: 0;
    }

    header,
    main {
        background-color: var(--color-background);
        color: var(--color-on-background);
        display: grid;
        grid-template-columns: minmax(16rem, 1fr) minmax(16rem, 2fr) minmax(
                16em,
                1fr
            );
        column-gap: 2rem;
    }

    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        background: var(--color-border);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--color-primary);
        border-radius: 4px;
    }

    ::-webkit-scrollbar-track {
        border-radius: 4px;
    }

    .warning-lable {
        color: var(--color-text-level-warning);
        font-size: 15 px;
    }

    header {
        display: flex;
        padding-inline: calc(25vw - 10rem);
        height: 4rem;
        background-color: var(--color-primary);
        color: var(--color-on-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        z-index: 100;
    }
    @media screen and (min-width: 1366px) {
        header {
            display: grid;
            padding-inline: 0;
        }
    }
    header .logo {
        justify-self: end;
        align-self: center;
        display: flex;
        align-items: flex-end;
        gap: 1rem;
        font-weight: 600;
    }
    header .nav {
        flex: 1;
    }

    main {
        height: 0;
        flex: 1;
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        column-gap: 2rem;
    }
    main > div {
        overflow-y: auto;
    }

    input[type="checkbox"] {
        height: 1.25rem;
        width: 1.25rem;
        cursor: pointer;
        margin: 0;
        accent-color: var(--color-primary);
    }

    /* Smooth transitions for interactive elements */
    * {
        transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
    }