:root {
    --main: #2d2726;
    --bg: #FDFDFD;
    --border-subtle: #d4d7e1;
    --text-main: #191919;
    --text-muted: #5e5e5e;
    --paddingSite: 20px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --main: #f0f0f0; /* Flipped to a bright off-white for main accents/highlights */
        --bg: #121212; /* Dark background (replacing the near-white #FDFDFD) */
        --border-subtle: #2d2d2d; /* Soft, dark border that won't clip harshly against the background */
        --text-main: #f5f5f5; /* Light grey/white for high readability */
        --text-muted: #a0a0a0; /* Mid-tone grey for secondary text */
        --paddingSite: 20px; /* Kept identical for layout consistency */
    }
}

/* --- BASE & TYPOGRAPHY --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

b {
    font-weight: 600;
}

body {
    margin: 0;
    width: 100vw;
    background: var(--bg);
    color: var(--text-main);
    overflow-x: hidden;
    overscroll-behavior: none;
    font-optical-sizing: auto;
}

.bgSection {
    position: relative;
    width: 100vw;
    margin: 100px auto 80px auto;
    padding: var(--paddingSite);
    max-width: 1800px;
}

@media (max-width: 600px) {
    .bgSection {
        margin-top: 100px;
    }
}

.headerWrapper {
    margin: 40px 0;
    color: var(--main);
    text-align: center;
}

.headerMain {
    margin: 0 0 10px 0;
    font-weight: 200;
    font-size: clamp(34px, 6vw, 3.5rem);
    letter-spacing: 12px;
    position: relative;
    z-index: 4;
}

.headerWrapper > h4 {
    margin: 0 0 10px 0;
    letter-spacing: 3px;
    font-weight: 300;
}

.headerAbt {
    margin: 0;
    font-weight: 400;
    color: var(--main);
    font-size: 1.5rem;
}

.tableCutter {
    height: 120px;
    z-index: 3;
    width: 100%;
    position: fixed;
    top: 0;
    background: var(--bg);
}

.tableWraper {
    margin: 20px 0 80px 0;
}

.customDisplayEditorTable th {
    top: 120px !important;
}