:root {
    --page-color: #F8FAF7;
    --page-text-color: #2F4D2F;
    --strong-border-color: #414141;
    --light-border-color: #ddd;
    --shadow-color: #808080;
    --shadow-text-color: #DDDDDD;
    --light-highlight-color: #f9f9f9;
    --highlight-color: rgb(215, 228,215);
    --strong-highlight-color: rgb(142, 178, 142);
    --highlight-text-color: #2F4D2F;
    --strong-highlight-text-color: rgb(255, 255, 255);
    --accent-color: rgb(53, 121, 53);
    --accent-text-color:  #FFFFFF;
    --card-background-color: #FFFFFF;
    --text-main-color: #111;
    --text-muted-color: #888;
    --scrollbar-color: #ddd;

    /* Общие алиасы, используемые на нескольких страницах (problems, sheets),
       чтобы обе страницы гарантированно опирались на одну и ту же палитру */
    --color-bg-hover: var(--highlight-color);
    --color-bg-active: var(--highlight-color);
    --color-text-main: var(--text-main-color);
    --color-text-body: var(--text-main-color);
    --color-text-sub: var(--text-muted-color);
    --color-text-muted: var(--text-muted-color);
    --color-active: var(--accent-color);
    --color-border: var(--light-border-color);
    --color-scrollbar: var(--scrollbar-color);

    --message-backgroud-color: #f7f0ff;
    --message-border-color: #c8a8f0;
    --message-text-color: #6b21a8;
    --message-background-hover-color: #ede9fe;
    --message-border-hover-color:  #a855f7;

    
    --green-color: rgb(53, 121, 53);
    --light-green-color: #e8fcec;
    --red-color: rgb(178, 34, 34);
    --light-red-color: #fff3f3;
    --blue-color: rgb(70, 130, 180);
    --orange-color: rgb(255, 165, 0);
    --yellow-color: rgb(255, 215, 0);
    --purple-color: rgb(128, 0, 128);
    
    counter-reset: example-counter problem-counter;

    --transition-fast: 0.12s ease;
    --transition-fade: 0.35s ease;

    --common-border-radius: 8px;
}


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


html {
    overflow-x: hidden;
    overscroll-behavior-x: none;
    background-color: var(--page-color);
    height: 100%;
}

 body {
    height: 100%;
    background-color: var(--page-color);
    overscroll-behavior-x: none;
    width: 100%;
    position: relative;
 }


img {
    max-width: 100%;
    height: auto;
}


svg {
    max-width: 100%;
    height: auto;
}


.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}


.page-layout {
    display: flex;
    flex-direction: column;
    margin: 84px auto 20px auto;
    padding: 20px 50px;
    background-color: var(--page-color);
    width: 100%;
    align-items: flex-start;
    flex: 1;
    max-width: 1800px;
}


.link {
    text-decoration: underline;
    color: var(--page-text-color);
}

.link:hover {
    color: var(--accent-color);
}


footer {
    flex: 0 0 auto;
}


@media (max-width: 800px) {

    .page-layout {
        padding: 31px 20px 20px 20px;
    }

    body {
        overflow-x: hidden;
    }
}

/* ─── Тост-уведомления ──────────────────────────────────────── */

.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 9999;
    pointer-events: none;
}

.toast {
    background: #1a1a1a;
    color: white;
    font-size: 0.875rem;
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    animation: toastIn 0.2s ease;
    pointer-events: auto;
}

.toast.toast-success {
    background: #1a5c2a;
}

.toast.toast-error {
    background: #8b1a1a;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
    to { opacity: 0; transform: translateY(8px); }
}

.toast.removing {
    animation: toastOut 0.2s ease forwards;
}