/* =========================================
   1. VARIABLES & THEMING
========================================= */
:root {
    --bg-dark: #050505;
    --sheet-bg: #ffffff;
    --text-main: #1a1a1a;
    --line-color: rgba(0, 0, 0, 0.1);
    --transition: cubic-bezier(0.4, 0, 0.2, 1);
    --modal-bg: #121212;
    --border-color: rgba(255, 255, 255, 0.1);
    --text-color: #e5e5e5;
    --accent: #ffffff;
}

/* =========================================
   2. BASE STYLES & LAYOUT
========================================= */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #222;
    height: 100dvh;
    height: -webkit-fill-available;
    display: flex;
    align-items: center;
    justify-content: center;
}

#app-container {
    position: relative;
    overflow-x: hidden;
}

.ete-main {
    width: 100%;
    height: 100dvh;
    /*height: -webkit-fill-available;*/
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;

    &.the-drag {
        width: 100vw;
        height: 100dvh;
        /*height: -webkit-fill-available;*/
        cursor: grab;
        position: relative;
        overflow: hidden;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
    }
}

.ete-main-container,
.ete-content-container {
    width: 100%;
    height: 100%;
    display: flex;
    height: 100dvh;
    /*height: -webkit-fill-available;*/
    padding: calc(var(--main-adjuster) * (80/400)) calc(var(--main-adjuster) * (14/400));

    &:not(.home-page):not(.test-page){
        background: #171717;
    }

    .home-page,
    .test-page{
        background: transparent;
    }

    .the-drag &.home-page {
        width: unset;
        height: unset;
        padding: 0;	
        position: absolute !important;
        left: 0;
        top: 0;
        will-change: transform;
        pointer-events: none;
        transition: none;
    }
}

.loader-rounding{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: calc(var(--main-adjuster) * (40/400));
    width: calc(var(--main-adjuster) * (40/400));
}

/* =========================================
   3. HEADER
========================================= */
.ete-header {
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    position: fixed;
    z-index: 2;
    perspective: calc(var(--main-adjuster) * (1000/400));
}

.ete-header-container {
    width: 100%;
    padding: calc(var(--main-adjuster) * (16/400));
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
    position: relative;

    .ete-menu & {
        padding: calc(var(--main-adjuster) * (16/400)) calc(var(--main-adjuster) * (12/400));
    }
}

.ete-header-button {
    background: transparent;
    width: calc(var(--main-adjuster) * (50/400));
    height: calc(var(--main-adjuster) * (50/400));
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
    background: rgba(0, 0, 0, 0.20);
    box-shadow: inset 0 0 calc(var(--main-adjuster) * (10/400)) rgba(0, 0, 0, 0.250);
    border-radius: calc(var(--main-adjuster) * (40/400));
    backdrop-filter: blur(calc(var(--main-adjuster) * (5/400)));

    * { color: white; }
}

.ete-header-title {
    color: white;
    display: flex;
    align-items: center;
    width: fit-content;
    position: relative;
    padding: calc(var(--main-adjuster) * (6/400)) calc(var(--main-adjuster) * (16/400));
    padding-top: calc(var(--main-adjuster) * (9/400));
    border-radius: calc(var(--main-adjuster) * (40/400));
    backdrop-filter: blur(calc(var(--main-adjuster) * (10/400)));
    background: rgba(0, 0, 0, 0.20);
    box-shadow: inset 0 0 calc(var(--main-adjuster) * (10/400)) rgba(0, 0, 0, 0.250);

    &.active {
        padding-right: calc(var(--main-adjuster) * (80/400));

        &:after {
            content: attr(timer);
            font-size: 80%;
            background: red;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: inherit;
            position: absolute;
            top: calc(var(--main-adjuster) * (4/400));
            bottom: calc(var(--main-adjuster) * (4/400));
            right: calc(var(--main-adjuster) * (4/400));
            padding: calc(var(--main-adjuster) * (2/400)) 0 0 0;
            width: calc(var(--main-adjuster) * (64/400));
        }
    }
}

/* =========================================
   4. NAVIGATION
========================================= */
.ete-nav {
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    position: absolute;
    align-items: center;
    height: calc(var(--main-adjuster) * (80/400));
}

.ete-nav-container {
    width: 100%;
    display: flex;
    padding: calc(var(--main-adjuster) * (8/400));
    padding-top: calc(var(--main-adjuster) * (8/400));
    align-items: center;
    justify-content: space-between;
    margin: calc(var(--main-adjuster) * (5/400));
    border-radius: calc(var(--main-adjuster) * (40/400));
    backdrop-filter: blur(calc(var(--main-adjuster) * (5/400)));
    background: rgba(0, 0, 0, 0.20);
    box-shadow: inset 0 0 calc(var(--main-adjuster) * (10/400)) rgba(0, 0, 0, 0.50),
                inset 0 0 calc(var(--main-adjuster) * (5/400)) rgba(0, 0, 0, 0.50);
}

.ete-nav-button {
    transition: 0.3s background, 0.3s width;
    background: transparent;
    width: calc(var(--main-adjuster) * (50/400));
    height: calc(var(--main-adjuster) * (50/400));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    &:nth-child(3) {
        width: calc(var(--main-adjuster) * (50/400));
        height: calc(var(--main-adjuster) * (50/400));
    }

    & * { color: white; }

    &:before {
        content: attr(title);
        width: 100%;
        white-space: pre;
        color: white;
        font-size: calc(var(--main-adjuster) * (10/400));
        bottom: calc(var(--main-adjuster) * (-14/400));
        justify-content: center;
        text-transform: uppercase;
        display: none;
    }

    & svg:first-child {
        display: none;
    }

    &.active {
        width: calc(var(--main-adjuster) * (100/400));
        background: linear-gradient(-45deg, var(--primary), var(--secondary));
        border-radius: calc(var(--main-adjuster) * (50/400));
        border: none;
        outline: none;

        &:nth-child(4) {
            width: calc(var(--main-adjuster) * (80/400));
        }

        &::before {
            display: flex;
            margin-top: calc(var(--main-adjuster) * (5/400));
            width: auto;
            order: 1;
            margin-left: calc(var(--main-adjuster) * (5/400));
            font-size: calc(var(--main-adjuster) * (16/400));
        }

        &:nth-child(2)::before,
        &:nth-child(4)::before {
            margin-left: calc(var(--main-adjuster) * (8/400));
        }

        & > *:first-child {
            display: flex;
            stroke: white;

            * {
                fill: white;
                stroke: white;
            }
        }

        & > *:last-child {
            display: none;
        }
    }
}

/* =========================================
   5. MENUS, MODALS & POPUPS
========================================= */
.btn-open, .btn-trigger {
    background: transparent;
    color: white;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.3s;
    height: calc(var(--main-adjuster) * (50/400));
}

.btn-open {
    border: calc(var(--main-adjuster) * (1/400)) solid rgba(255, 255, 255, 0.2);
    padding: calc(var(--main-adjuster) * (12/400)) calc(var(--main-adjuster) * (24/400));
    letter-spacing: calc(var(--main-adjuster) * (2/400));
    font-size: calc(var(--main-adjuster) * (10/400));
}
.btn-open:hover {
    background: white;
    color: black;
}

.btn-trigger {
    border: calc(var(--main-adjuster) * (1/400)) solid var(--border-color);
    color: var(--text-color);
    padding: calc(var(--main-adjuster) * (15/400)) calc(var(--main-adjuster) * (30/400));
    letter-spacing: calc(var(--main-adjuster) * (2/400));
    font-size: calc(var(--main-adjuster) * (11/400));
}
.btn-trigger:hover {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.05);
}

.action-btn {
    background: var(--accent);
    color: black;
    border: none;
    padding: calc(var(--main-adjuster) * (12/400)) calc(var(--main-adjuster) * (24/400));
    font-size: calc(var(--main-adjuster) * (12/400));
    text-transform: uppercase;
    letter-spacing: calc(var(--main-adjuster) * (1/400));
    cursor: pointer;
    width: 100%;
    font-weight: 600;
    border-radius: calc(var(--main-adjuster) * (40/400));
}

.close-btn {
    position: absolute;
    top: calc(var(--main-adjuster) * (20/400));
    right: calc(var(--main-adjuster) * (20/400));
    background: none;
    border: none;
    color: #666;
    font-size: calc(var(--main-adjuster) * (24/400));
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
    width: calc(var(--main-adjuster) * (40/400));
    height: calc(var(--main-adjuster) * (40/400));
}
.close-btn:hover { color: var(--accent); }

/* Backdrop & Overlays */
.ete-menu-backdrop,
.ete-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ete-menu-backdrop {
    background: rgba(0, 0, 0, 0.6);
    z-index: 998;
}

.ete-popup {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(calc(var(--main-adjuster) * (10/400)));
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ete-menu-backdrop.active,
.ete-popup.active {
    opacity: 1;
    visibility: visible;
}

/* Bottom Sheet Menu */
.ete-menu {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #171717;
    border-radius: calc(var(--main-adjuster) * (32/400)) calc(var(--main-adjuster) * (32/400)) 0 0;
    transform: translateY(100%);
    transition: transform 0.3s var(--transition);
    z-index: 999;
    box-sizing: border-box;
    max-height: 90dvh;
    overflow: hidden;

    &.active { transform: translateY(0); }

    &:has(.ete-menu-container:nth-child(2)) {
        & .ete-menu-container:first-child { display: none !important; }
    }

    & .ete-header-button {
        background: transparent;
        width: calc(var(--main-adjuster) * (50/400));
        height: calc(var(--main-adjuster) * (50/400));
        border-radius: calc(var(--main-adjuster) * (40/400));
        display: flex;
        align-items: center;
        justify-content: center;
        * { color: white; }
    }
}

.ete-menu-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    max-height: inherit;
}

.ete-menu-header {
    width: 100%;
    display: flex;
}

.ete-menu-content {
    padding: calc(var(--main-adjuster) * (10/400)) calc(var(--main-adjuster) * (16/400)) calc(var(--main-adjuster) * (20/400)) calc(var(--main-adjuster) * (16/400));
}

.ete-menu-handler {
    width: 100%;
    padding: calc(var(--main-adjuster) * (16/400)) 0;
    display: flex;
    justify-content: center;
    cursor: grab;
    position: absolute;
    opacity: 0;
    z-index: 5;
    top: calc(var(--main-adjuster) * (-16/400));
}

.handle {
    background: #e0e0e0;
    width: calc(var(--main-adjuster) * (40/400));
    height: calc(var(--main-adjuster) * (5/400));
    border-radius: calc(var(--main-adjuster) * (10/400));
}

/* Modal Window Content */
.popup-content {
    background: var(--modal-bg);
    border: calc(var(--main-adjuster) * (1/400)) solid var(--border-color);
    width: calc(100vw - calc(var(--main-adjuster) * (40/400)));
    border-radius: calc(var(--main-adjuster) * (32/400));
    max-width: calc(var(--main-adjuster) * (400/400));
    padding: calc(var(--main-adjuster) * (30/400));
    position: relative;
    transform: scale(0.95) translateY(calc(var(--main-adjuster) * (10/400)));
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    box-shadow: 0 calc(var(--main-adjuster) * (25/400)) calc(var(--main-adjuster) * (50/400)) calc(var(--main-adjuster) * (-12/400)) rgba(0, 0, 0, 0.5);

    & p { margin: calc(var(--main-adjuster) * (20/400)) 0; color: white; line-height: 1.25;}
    & h2 { color: white; font-size: calc(var(--main-adjuster) * (20/400)); }
}

.ete-popup.active .popup-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* =========================================
   6. TRANSITIONS & ANIMATIONS
========================================= */
.page {
    width: 100%;
    transition: opacity 0.5s ease, transform 0.5s ease;
    will-change: opacity, transform;
}

.page-enter {
    opacity: 0;
    transform: translateX(calc(var(--main-adjuster) * (50/400)));
    position: absolute;
    top: 0;
    left: 0;

    .ete-back-navigation & {
        transform: translateX(calc(var(--main-adjuster) * (-50/400)));
    }
}

.page-exit-active {
    opacity: 0;
    transform: translateX(calc(var(--main-adjuster) * (-50/400)));

    .ete-back-navigation & {
        transform: translateX(calc(var(--main-adjuster) * (50/400)));
    }
}


/* =========================================
   7. COMPONENTS (PAPER ROLL)
========================================= */
.paper-container {
    perspective: calc(var(--main-adjuster) * (1000/400));
    position: fixed; 
    top: calc(var(--main-adjuster) * (20/400));
    right: calc(var(--main-adjuster) * (20/400));
    z-index: 9999;
    font-family: 'Georgia', serif;
}

.paper-roll {
    width: calc(var(--main-adjuster) * (250/400));
    background: linear-gradient(to bottom, #e6dbb9 0%, #fdf5e6 10%);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform-origin: top;
    transform: rotateX(-90deg);
    transition: max-height 0.6s ease-in-out, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
    box-shadow: 0 calc(var(--main-adjuster) * (10/400)) calc(var(--main-adjuster) * (30/400)) rgba(0, 0, 0, 0.2);
    border-radius: 0 0 calc(var(--main-adjuster) * (8/400)) calc(var(--main-adjuster) * (8/400));

    &.active {
        max-height: calc(var(--main-adjuster) * (400/400));
        opacity: 1;
        transform: rotateX(0deg);
    }
}

.content {
    padding: calc(var(--main-adjuster) * (20/400));
    color: #2c1e16;
    line-height: 1.5;
}

#toggleBtn {
    display: block;
    margin-left: auto;
    padding: calc(var(--main-adjuster) * (10/400)) calc(var(--main-adjuster) * (15/400));
    background: #8b4513;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (6/400)) rgba(0, 0, 0, 0.1);
}

/* =========================================
   8. COMPONENTS (TEMPORARY VIEW)
========================================= */
.ete-temporary {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    height: 100dvh;
    max-height: 0;
    opacity: 0;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.40);
    overflow: hidden;
    transform-origin: top;
    transform: rotateX(-90deg);
    transition-delay: transform 8s;
    backdrop-filter: blur(calc(var(--main-adjuster) * (20/400)));
    transition: max-height 0.6s ease-in-out, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
    display: flex;

    &.active {
        opacity: 1;
        max-height: 100dvh;
        transform: rotateX(0deg);
        transition-delay: transform 0s;
    }
}

.ete-temporary-body {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    overflow-y: auto;
    padding: calc(var(--main-adjuster) * (80/400)) calc(var(--main-adjuster) * (16/400));
    align-content: start;
}

/* =========================================
   9. SIGNS SLIDER
========================================= */
.signs-sliders {
    width: 100%;
    height: 100dvh;
    /*height: -webkit-fill-available;*/
    position: fixed;
    left: 0;
    top: 0;
}

.swiper-sliders-container {
    width: 100%;
    height: 100dvh;
    /*height: -webkit-fill-available;*/
    display: flex;
    align-items: center;
}

.swiper-sliders-thumbnails {
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--main-adjuster) * (62/400));
    height: calc(var(--main-adjuster) * (38/400));

    color: white;
    display: flex;
    align-items: center;
    width: fit-content;
    position: relative;
    padding: calc(var(--main-adjuster) * (6/400)) calc(var(--main-adjuster) * (16/400));
    padding-top: calc(var(--main-adjuster) * (10/400));
    border-radius: calc(var(--main-adjuster) * (40/400));
    backdrop-filter: blur(calc(var(--main-adjuster) * (10/400)));
    background: rgba(0, 0, 0, 0.20);
    box-shadow: inset 0 0 calc(var(--main-adjuster) * (10/400)) rgba(0, 0, 0, 0.250);

    &:after{
        content: "Pergunta";
        text-transform: uppercase;
        color: white;
        text-align: center;
        display: block;
        position: absolute;
        bottom: calc(var(--main-adjuster) * (-14/400));
        font-size: calc(var(--main-adjuster) * (8/400));
    }

    .display-slider &{
        z-index: 2;
        position: absolute;
        pointer-events: none;
        bottom: calc(var(--main-adjuster) * (90/400));

    }
    
    .ete-temporary &:after{
        display: none;
    }
}

.test-score-container{

    position: absolute;
    left: 26%;
    min-width: calc(var(--main-adjuster) * (60/400));
    transform: translateX(-26%);
    bottom: calc(var(--main-adjuster) * (90/400));
    height: calc(var(--main-adjuster) * (38/400));

    color: white;
    display: flex;
    align-items: center;
    width: fit-content;
    justify-content: center;
    /*position: relative;*/
    padding: calc(var(--main-adjuster) * (6/400)) calc(var(--main-adjuster) * (16/400));
    padding-top: calc(var(--main-adjuster) * (10/400));
    border-radius: calc(var(--main-adjuster) * (40/400));
    backdrop-filter: blur(calc(var(--main-adjuster) * (10/400)));
    background: rgba(0, 0, 0, 0.20);
    box-shadow: inset 0 0 calc(var(--main-adjuster) * (10/400)) rgba(0, 0, 0, 0.250);
    z-index: 2;

    &:after{
        content: attr(title);
        text-transform: uppercase;
        color: white;
        text-align: center;
        display: block;
        position: absolute;
        bottom: calc(var(--main-adjuster) * (-13/400));
        font-size: calc(var(--main-adjuster) * (8/400));
    }

    & ~ .test-score-container{
        left: 75%;
        transform: translateX(-75%);
    }

    &.correct,
    &.score{
        display: none;
    }
}

.start-end-button{

    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--main-adjuster) * (84/400));

    position: absolute;
    display: flex;
    justify-content: center;
    color: white;
    display: flex;
    align-items: center;
    width: fit-content;
    height: calc(var(--main-adjuster) * (44/400));
    padding: calc(var(--main-adjuster) * (6/400)) calc(var(--main-adjuster) * (20/400));
    padding-top: calc(var(--main-adjuster) * (10/400));
    border-radius: calc(var(--main-adjuster) * (40/400));
    backdrop-filter: blur(calc(var(--main-adjuster) * (10/400)));
    background: rgba(0, 0, 0, 0.20);
    font-size: calc(var(--main-adjuster) * (18/400));
    text-transform: uppercase;
    box-shadow: inset 0 0 calc(var(--main-adjuster) * (10/400)) rgba(0, 0, 0, 0.250);
    background: green;
    z-index: 5;

    &.hide{
        display: none;
    }

    &.active{
        background: red;
    }

}

.swiper-sliders-button {
    display: flex;
    outline: none;
    position: absolute;
    align-items: center;
    justify-content: center;
    width: calc(var(--main-adjuster) * (50/400));
    height: calc(var(--main-adjuster) * (50/400));
    border-radius: calc(var(--main-adjuster) * (40/400));
    bottom: calc(var(--main-adjuster) * (20/400));
    top: unset;
    background: rgba(0, 0, 0, 0.20);
    box-shadow: inset 0 0 calc(var(--main-adjuster) * (10/400)) rgba(0, 0, 0, 0.250);
    backdrop-filter: blur(calc(var(--main-adjuster) * (5/400)));

    &.y { left: calc(var(--main-adjuster) * (20/400)); &:before { left: calc(var(--main-adjuster) * (-20/400)); } }
    &.x { right: calc(var(--main-adjuster) * (20/400)); &:before { right: calc(var(--main-adjuster) * (-20/400)); } }

    &:before {
        content: "";
        position: fixed;
        bottom: calc(var(--main-adjuster) * (-20/400));
        width: 50vw;
        height: 100dvh;
        display: flex;
        z-index: 1;
    }

    .display-slider &{
        bottom: calc(var(--main-adjuster) * (80/400));
        z-index: 2;
    }

    .display-slider &:before {
        left: calc(var(--main-adjuster) * (-20/400));
        bottom: calc(var(--main-adjuster) * (-20/400));
        width: calc(100% + calc(var(--main-adjuster) * (40/400)));
        height: calc(100% + calc(var(--main-adjuster) * (40/400)));
    }
}

.sign-item {
    width: 100%;
    height: 100dvh;
    display: flex;
    margin: calc(var(--main-adjuster) * (10/400)) auto;
    border-radius: 0;
}

.sign-item-container {
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-wrap: wrap;
    background: #111;
    align-content: start;
    border-radius: inherit;
    padding: calc(var(--main-adjuster) * (80/400)) calc(var(--main-adjuster) * (8/400)) calc(var(--main-adjuster) * (10/400));
}

.sign-item-cover {
    width: 100%;
    height: 35vh;
    height: 35dvh;
    margin-bottom: calc(var(--main-adjuster) * (10/400));
    border-radius: calc(var(--main-adjuster) * (22/400));
}

.sign-item-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
}

.sign-item-details {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: calc(var(--main-adjuster) * (10/400));
}

.sign-item-title {
    width: 100%;
    color: white;
    font-weight: normal;
    font-size: calc(var(--main-adjuster) * (26/400));
    margin-bottom: calc(var(--main-adjuster) * (10/400));
}

.sign-item-name {
    color: #888;
    font-size: calc(var(--main-adjuster) * (20/400));
    line-height: calc(var(--main-adjuster) * (22/400));
}

.sign-item-category {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: calc(var(--main-adjuster) * (10/400)) 0;

    & span {
        color: #fff;
        background: #171717;
        font-size: calc(var(--main-adjuster) * (14/400));
        border-radius: calc(var(--main-adjuster) * (20/400));
        padding: calc(var(--main-adjuster) * (10/400)) calc(var(--main-adjuster) * (16/400)) calc(var(--main-adjuster) * (8/400));
    }
}

/* =========================================
   10. UTILITIES (SVG & STROKE)
========================================= */
.svg-x-10{ width: calc(var(--main-adjuster) * (10/400)); } .svg-y-10{ height: calc(var(--main-adjuster) * (10/400)); } .svg-10{ width: calc(var(--main-adjuster) * (10/400)); height: calc(var(--main-adjuster) * (10/400)); }
.svg-x-12{ width: calc(var(--main-adjuster) * (12/400)); } .svg-y-12{ height: calc(var(--main-adjuster) * (12/400)); } .svg-12{ width: calc(var(--main-adjuster) * (12/400)); height: calc(var(--main-adjuster) * (12/400)); }
.svg-x-14{ width: calc(var(--main-adjuster) * (14/400)); } .svg-y-14{ height: calc(var(--main-adjuster) * (14/400)); } .svg-14{ width: calc(var(--main-adjuster) * (14/400)); height: calc(var(--main-adjuster) * (14/400)); }
.svg-x-16{ width: calc(var(--main-adjuster) * (16/400)); } .svg-y-16{ height: calc(var(--main-adjuster) * (16/400)); } .svg-16{ width: calc(var(--main-adjuster) * (16/400)); height: calc(var(--main-adjuster) * (16/400)); }
.svg-x-18{ width: calc(var(--main-adjuster) * (18/400)); } .svg-y-18{ height: calc(var(--main-adjuster) * (18/400)); } .svg-18{ width: calc(var(--main-adjuster) * (18/400)); height: calc(var(--main-adjuster) * (18/400)); }
.svg-x-20{ width: calc(var(--main-adjuster) * (20/400)); } .svg-y-20{ height: calc(var(--main-adjuster) * (20/400)); } .svg-20{ width: calc(var(--main-adjuster) * (20/400)); height: calc(var(--main-adjuster) * (20/400)); }
.svg-x-22{ width: calc(var(--main-adjuster) * (22/400)); } .svg-y-22{ height: calc(var(--main-adjuster) * (22/400)); } .svg-22{ width: calc(var(--main-adjuster) * (22/400)); height: calc(var(--main-adjuster) * (22/400)); }
.svg-x-24{ width: calc(var(--main-adjuster) * (24/400)); } .svg-y-24{ height: calc(var(--main-adjuster) * (24/400)); } .svg-24{ width: calc(var(--main-adjuster) * (24/400)); height: calc(var(--main-adjuster) * (24/400)); }
.svg-x-25{ width: calc(var(--main-adjuster) * (25/400)); } .svg-y-25{ height: calc(var(--main-adjuster) * (25/400)); } .svg-25{ width: calc(var(--main-adjuster) * (25/400)); height: calc(var(--main-adjuster) * (25/400)); }
.svg-x-26{ width: calc(var(--main-adjuster) * (26/400)); } .svg-y-26{ height: calc(var(--main-adjuster) * (26/400)); } .svg-26{ width: calc(var(--main-adjuster) * (26/400)); height: calc(var(--main-adjuster) * (26/400)); }
.svg-x-28{ width: calc(var(--main-adjuster) * (28/400)); } .svg-y-28{ height: calc(var(--main-adjuster) * (28/400)); } .svg-28{ width: calc(var(--main-adjuster) * (28/400)); height: calc(var(--main-adjuster) * (28/400)); }
.svg-x-30{ width: calc(var(--main-adjuster) * (30/400)); } .svg-y-30{ height: calc(var(--main-adjuster) * (30/400)); } .svg-30{ width: calc(var(--main-adjuster) * (30/400)); height: calc(var(--main-adjuster) * (30/400)); }
.svg-x-31{ width: calc(var(--main-adjuster) * (31/400)); } .svg-y-31{ height: calc(var(--main-adjuster) * (31/400)); } .svg-31{ width: calc(var(--main-adjuster) * (31/400)); height: calc(var(--main-adjuster) * (31/400)); }
.svg-x-32{ width: calc(var(--main-adjuster) * (32/400)); } .svg-y-32{ height: calc(var(--main-adjuster) * (32/400)); } .svg-32{ width: calc(var(--main-adjuster) * (32/400)); height: calc(var(--main-adjuster) * (32/400)); }
.svg-x-34{ width: calc(var(--main-adjuster) * (34/400)); } .svg-y-34{ height: calc(var(--main-adjuster) * (34/400)); } .svg-34{ width: calc(var(--main-adjuster) * (34/400)); height: calc(var(--main-adjuster) * (34/400)); }
.svg-x-36{ width: calc(var(--main-adjuster) * (36/400)); } .svg-y-36{ height: calc(var(--main-adjuster) * (36/400)); } .svg-36{ width: calc(var(--main-adjuster) * (36/400)); height: calc(var(--main-adjuster) * (36/400)); }
.svg-x-38{ width: calc(var(--main-adjuster) * (38/400)); } .svg-y-38{ height: calc(var(--main-adjuster) * (38/400)); } .svg-38{ width: calc(var(--main-adjuster) * (38/400)); height: calc(var(--main-adjuster) * (38/400)); }
.svg-x-40{ width: calc(var(--main-adjuster) * (40/400)); } .svg-y-40{ height: calc(var(--main-adjuster) * (40/400)); } .svg-40{ width: calc(var(--main-adjuster) * (40/400)); height: calc(var(--main-adjuster) * (40/400)); }
.svg-x-42{ width: calc(var(--main-adjuster) * (42/400)); } .svg-y-42{ height: calc(var(--main-adjuster) * (42/400)); } .svg-42{ width: calc(var(--main-adjuster) * (42/400)); height: calc(var(--main-adjuster) * (42/400)); }
.svg-x-44{ width: calc(var(--main-adjuster) * (44/400)); } .svg-y-44{ height: calc(var(--main-adjuster) * (44/400)); } .svg-44{ width: calc(var(--main-adjuster) * (44/400)); height: calc(var(--main-adjuster) * (44/400)); }
.svg-x-46{ width: calc(var(--main-adjuster) * (46/400)); } .svg-y-46{ height: calc(var(--main-adjuster) * (46/400)); } .svg-46{ width: calc(var(--main-adjuster) * (46/400)); height: calc(var(--main-adjuster) * (46/400)); }
.svg-x-48{ width: calc(var(--main-adjuster) * (48/400)); } .svg-y-48{ height: calc(var(--main-adjuster) * (48/400)); } .svg-48{ width: calc(var(--main-adjuster) * (48/400)); height: calc(var(--main-adjuster) * (48/400)); }
.svg-x-50{ width: calc(var(--main-adjuster) * (50/400)); } .svg-y-50{ height: calc(var(--main-adjuster) * (50/400)); } .svg-50{ width: calc(var(--main-adjuster) * (50/400)); height: calc(var(--main-adjuster) * (50/400)); }

.stroke-1{ stroke-width: calc(var(--main-adjuster) * (1/400)); }
.stroke-2{ stroke-width: calc(var(--main-adjuster) * (2/400)); }
.stroke-3{ stroke-width: calc(var(--main-adjuster) * (3/400)); }
.stroke-4{ stroke-width: calc(var(--main-adjuster) * (4/400)); }
.stroke-5{ stroke-width: calc(var(--main-adjuster) * (5/400)); }
.stroke-6{ stroke-width: calc(var(--main-adjuster) * (6/400)); }
.stroke-7{ stroke-width: calc(var(--main-adjuster) * (7/400)); }
.stroke-8{ stroke-width: calc(var(--main-adjuster) * (8/400)); }
.stroke-9{ stroke-width: calc(var(--main-adjuster) * (9/400)); }
.stroke-10{ stroke-width: calc(var(--main-adjuster) * (10/400)); }
.stroke-11{ stroke-width: calc(var(--main-adjuster) * (11/400)); }
.stroke-12{ stroke-width: calc(var(--main-adjuster) * (12/400)); }
.stroke-13{ stroke-width: calc(var(--main-adjuster) * (13/400)); }
.stroke-14{ stroke-width: calc(var(--main-adjuster) * (14/400)); }
.stroke-15{ stroke-width: calc(var(--main-adjuster) * (15/400)); }
.stroke-16{ stroke-width: calc(var(--main-adjuster) * (16/400)); }
.stroke-17{ stroke-width: calc(var(--main-adjuster) * (17/400)); }
.stroke-18{ stroke-width: calc(var(--main-adjuster) * (18/400)); }
.stroke-19{ stroke-width: calc(var(--main-adjuster) * (19/400)); }
.stroke-20{ stroke-width: calc(var(--main-adjuster) * (20/400)); }
.stroke-21{ stroke-width: calc(var(--main-adjuster) * (21/400)); }
.stroke-22{ stroke-width: calc(var(--main-adjuster) * (22/400)); }
.stroke-23{ stroke-width: calc(var(--main-adjuster) * (23/400)); }
.stroke-24{ stroke-width: calc(var(--main-adjuster) * (24/400)); }
.stroke-25{ stroke-width: calc(var(--main-adjuster) * (25/400)); }
.stroke-26{ stroke-width: calc(var(--main-adjuster) * (26/400)); }
.stroke-27{ stroke-width: calc(var(--main-adjuster) * (27/400)); }



/* ==========================================================================
   1. EXPLORE PAGE
   ========================================================================== */
.explore-page {
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  overflow-y: auto;
}

.explore-item {
  width: 100%;
  display: flex;
  margin-bottom: calc(var(--main-adjuster) * (16/400));

  &:nth-child(4) ~ div {
    display: none;
  }
}

.explore-item-container {
  display: flex;
  width: 100%;
  background: #111;
  overflow: hidden;
  position: relative;
  justify-content: space-between;
  height: calc(var(--main-adjuster) * (200/400));
  border-radius: calc(var(--main-adjuster) * (24/400));

  .explore-item:nth-child(odd) & {
    justify-content: end;
  }
}

.explore-item-details {
  position: relative;
  padding: calc(var(--main-adjuster) * (16/400));
  width: calc(100% - calc(var(--main-adjuster) * (150/400)));

  .explore-item:nth-child(odd) & {
    padding-left: calc(var(--main-adjuster) * (2/400));
  }

  .explore-item:nth-child(even) & {
    padding-right: calc(var(--main-adjuster) * (2/400));
  }
}

.explore-irem-name {
  font-size: calc(var(--main-adjuster) * (14/400));
}

.exlore-item-title {
  color: white;
  font-weight: bolder;
  font-size: calc(var(--main-adjuster) * (28/400));
  margin-top: calc(var(--main-adjuster) * (16/400));
  line-height: calc(var(--main-adjuster) * (35/400));
}

.explore-item-options {
  position: absolute;
  bottom: calc(var(--main-adjuster) * (2/400));;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  padding: calc(var(--main-adjuster) * (10/400));

  .explore-item:nth-child(odd) & {
    padding-left: calc(var(--main-adjuster) * (2/400));
  }

  .explore-item:nth-child(even) & {
    padding-right: calc(var(--main-adjuster) * (2/400));
  }
}

.explore-item-option {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--main-adjuster) * (10/400));
  border-radius: calc(var(--main-adjuster) * (40/400));
  background: #222;
  color: white;
  text-transform: uppercase;
  margin-right: calc(var(--main-adjuster) * (10/400));
  overflow-x: auto;
  padding: calc(var(--main-adjuster) * (10/400));
  padding-bottom: calc(var(--main-adjuster) * (8/400));
  min-width: fit-content;
}

.explore-option-text {
  color: white;
}

.explore-option-icon {
  display: none;
}

.explore-item-cover {
  top: 0;
  right: 0;
  position: absolute;
  width: calc(var(--main-adjuster) * (150/400));
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  border: calc(var(--main-adjuster) * (14/400)) solid transparent;

  .explore-item:nth-child(odd) & {
    order: 1;
    right: calc(100% - calc(var(--main-adjuster) * (150/400)));
  }
}

.explore-item-image {
  width: 100%;
  height: 100%;
  transform: scale(1.25);
  border-radius: inherit;
}

/* ==========================================================================
   2. PROFILE PAGE
   ========================================================================== */
.profile-page {
  height: 100dvh;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: start;
}

.profile-overlay {
  width: 100%;
  position: relative;
  height: calc(var(--main-adjuster) * (300/400));
  overflow: hidden;
  border-radius: 0 0 calc(var(--main-adjuster) * (30/400)) calc(var(--main-adjuster) * (30/400));
}

.profile-overlay-image {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

.profile-cover {
  z-index: 1;
  position: absolute;
  left: calc(50% - calc(var(--main-adjuster) * (60/400)));
  width: calc(var(--main-adjuster) * (120/400));
  height: calc(var(--main-adjuster) * (120/400));
  top: calc(var(--main-adjuster) * (240/400));
  border-radius: calc(var(--main-adjuster) * (100/400));
  border: calc(var(--main-adjuster) * (5/400)) solid #171717;
}

.profile-cover-image {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.profile-details {
  display: flex;
  width: 100%;
  margin-top: calc(var(--main-adjuster) * (80/400));
}

.profile-details-container {
  width: 100%;
  display: block;
}

.profile-details-title {
  color: white;
  text-align: center;
  font-size: calc(var(--main-adjuster) * (30/400));
  margin-bottom: calc(var(--main-adjuster) * (5/400));
}

.profile-details-name {
  text-align: center;
  font-size: calc(var(--main-adjuster) * (16/400));
}

.profile-stats {
  width: 100%;
  display: flex;
  padding: calc(var(--main-adjuster) * (10/400));
  margin-top: calc(var(--main-adjuster) * (24/400));
}

.profile-stats-container {
  display: flex;
  width: 100%;
  padding: calc(var(--main-adjuster) * (14/400)) calc(var(--main-adjuster) * (10/400));
  padding-top: calc(var(--main-adjuster) * (18/400));
  justify-content: center;
  border-radius: calc(var(--main-adjuster) * (50/400));
  background: #111;
}

.profile-stats-item {
  display: flex;
  flex-wrap: wrap;
  width: calc(100%/5);
  align-items: center;
  align-content: center;
}

.profile-stats-title {
  width: 100%;
  text-align: center;
  color: white;
  font-size: calc(var(--main-adjuster) * (24/400));
  margin-bottom: calc(var(--main-adjuster) * (4/400));

  .profile-stats-item:nth-child(3) & {
    font-weight: bolder;
    font-size: calc(var(--main-adjuster) * (40/400));
  }
}

.profile-stats-name {
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-size: calc(var(--main-adjuster) * (11/400));
}

.profile-empty-exams {
  display: flex;
  color: white;
  outline: none;
  border: none;
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  margin: calc(var(--main-adjuster) * (40/400)) auto;
  border-radius: calc(var(--main-adjuster) * (40/400));
  padding: calc(var(--main-adjuster) * (10/400)) calc(var(--main-adjuster) * (16/400));
  padding-top: calc(var(--main-adjuster) * (12/400));
  font-size: calc(var(--main-adjuster) * (16/400));
}

.premium-button,
.logout-button {
  display: flex;
  width: fit-content;
  position: absolute;
  background: rgba(0, 0, 0, 0.2);
  border-radius: calc(var(--main-adjuster) * (40/400));
  padding: calc(var(--main-adjuster) * (12/400)) calc(var(--main-adjuster) * (18/400));
  padding-bottom: calc(var(--main-adjuster) * (10/400));
  color: white;
  text-transform: uppercase;
  backdrop-filter: blur(calc(var(--main-adjuster) * (16/400)));
  bottom: calc(var(--main-adjuster) * (10/400));
  z-index: 2;
  box-shadow: inset 0 0 calc(var(--main-adjuster) * (10/400)) rgba(0, 0, 0, 0.5),
              inset 0 0 calc(var(--main-adjuster) * (5/400)) rgba(0, 0, 0, 0.5);

        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(calc(var(--main-adjuster) * (5/400)));
        -webkit-backdrop-filter: blur(calc(var(--main-adjuster) * (5/400)));
        
        /* 2. The Liquid Magic */
        filter: url(#liquid-distortion);
        
        /* 3. Surface Detail */
        border: calc(var(--main-adjuster) * (1/400)) solid rgba(255, 255, 255, 0.3);
        box-shadow: 
          inset 0 0 calc(var(--main-adjuster) * (20/400)) rgba(255, 255, 255, 0.2), /* Inner Glow */
          0 calc(var(--main-adjuster) * (8/400)) calc(var(--main-adjuster) * (32/400)) rgba(0, 0, 0, 0.1);           /* Outer Depth */
          
        border-radius: calc(var(--main-adjuster) * (20/400));
}

.premium-button {
  left: calc(var(--main-adjuster) * (12/400));
}

.logout-button {
  right: calc(var(--main-adjuster) * (12/400));
}

/* ==========================================================================
   3. AI SEARCH PAGE
   ========================================================================== */
.ai-page {
  height: 100dvh;
}

.ai-search-footer {
  position: absolute;
  left: calc(var(--main-adjuster) * (10/400));
  bottom: calc(var(--main-adjuster) * (10/400));
  height: calc(var(--main-adjuster) * (140/400));
  display: flex;
  overflow: hidden;
  border-radius: calc(var(--main-adjuster) * (32/400));
  align-content: flex-end;
  align-items: end;
  width: calc(100% - calc(var(--main-adjuster) * (20/400)));
  justify-content: space-between;
  padding: calc(var(--main-adjuster) * (10/400));
  transition: 0.5s;
  z-index: 5;
  backdrop-filter: blur(calc(var(--main-adjuster) * (55/400)));
  background: #222;

  &:before {
    content: "";
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: calc(var(--main-adjuster) * (50/400));
    display: flex;
    position: absolute;
    pointer-events: none;
    background: linear-gradient(0deg, #222, transparent);
  }

  &.active {
    height: calc(var(--main-adjuster) * (190/400));
  }

  &.small-no-prompt {
    height: calc(var(--main-adjuster) * (65/400));

    & .ai-search-textarea {
      top: 0;
      color: transparent !important;

      &::placeholder,
      &::-ms-input-placeholder,
      &::-moz-placeholder {
        color: transparent !important;
      }
    }

    &.active {
      height: calc(var(--main-adjuster) * (115/400));
    }
  }

  .ai-page & {
    bottom: calc(var(--main-adjuster) * (80/400));
  }
}

.ai-search-textarea {
  width: 100%;
  height: calc(var(--main-adjuster) * (140/400));
  top: 0;
  left: 0;
  padding: calc(var(--main-adjuster) * (16/400));
  font-size: calc(var(--main-adjuster) * (16/400));
  position: absolute;
  background: transparent;
  outline: none;
  transition: 0.5s;
}

.ai-search-button {
  width: calc(var(--main-adjuster) * (50/400));
  height: calc(var(--main-adjuster) * (50/400));
  display: flex;
  border-radius: calc(var(--main-adjuster) * (32/400));
  align-items: center;
  position: relative;
  justify-content: center;
  z-index: 1;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(calc(var(--main-adjuster) * (16/400)));

  & * {
    color: white;
  }

  &:hover {
    background: var(--ceu);
    box-shadow: none;
  }

  & ~ .ai-generate-languages {
    bottom: calc(var(--main-adjuster) * (10/400));
    left: calc(var(--main-adjuster) * (80/400));
    width: calc(100% - calc(var(--main-adjuster) * (160/400)));
    height: calc(var(--main-adjuster) * (40/400));
    position: absolute;
    text-align: center;
    color: #aaa;
    outline: none;
    font-size: calc(var(--main-adjuster) * (18/400));
    padding-top: calc(var(--main-adjuster) * (4/400));
    background: inherit;
    border-bottom: calc(var(--main-adjuster) * (2/400)) solid silver;
    box-shadow: none;
    z-index: 2;

    & option:first-child {
      display: none;
    }
  }
}

.ai-search-languages {
  display: flex;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: inherit;
  align-items: center;
  padding: calc(var(--main-adjuster) * (10/400));
  background: linear-gradient(180deg, #222, transparent);
  overflow-x: auto;

  &:not(:empty) ~ .ai-search-textarea {
    top: calc(var(--main-adjuster) * (50/400));
    padding-top: calc(var(--main-adjuster) * (10/400));
  }

  &:empty ~ .ai-search-textarea {
    top: 0;
  }
}

.generate-ai-category {
  padding: calc(var(--main-adjuster) * (5/400)) calc(var(--main-adjuster) * (10/400));
  display: flex;
  align-items: center;
  border-radius: calc(var(--main-adjuster) * (10/400));
  background: black;
  margin-right: calc(var(--main-adjuster) * (10/400));
  padding-bottom: calc(var(--main-adjuster) * (4/400));
  white-space: pre;
}

.ai-category-text {
  color: white;
  font-size: calc(var(--main-adjuster) * (16/400));
  padding-top: calc(var(--main-adjuster) * (4/400));
}

.ai-category-button {
  background: transparent;
  margin-left: calc(var(--main-adjuster) * (8/400));
  display: flex;
  justify-content: center;
  align-items: center;
}

.ai-results {
  position: absolute;
  left: 0;
  top: 0;
  scroll-behavior: smooth;
  width: 100%;
  height: 100%;
  display: block;
  overflow-y: auto;
  padding: calc(var(--main-adjuster) * (16/400));
  padding-top: calc(var(--main-adjuster) * (90/400));
  padding-bottom: calc(var(--main-adjuster) * (250/400));
}

.user-message-item {
  width: 100%;
  display: flex;
  justify-content: end;

  &:after {
    content: attr(title);
    color: white;
    max-width: 70vw;
    background: #222;
    width: fit-content;
    display: inline-block;
    padding: calc(var(--main-adjuster) * (18/400)) calc(var(--main-adjuster) * (16/400));
    margin: calc(var(--main-adjuster) * (16/400)) 0;
    border-radius: calc(var(--main-adjuster) * (20/400));
    padding-bottom: calc(var(--main-adjuster) * (14/400));
    box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black;
  }

  &.active:after {
    animation: placeHolderShimmer 2s linear forwards infinite;
    background: #121212;
    background: linear-gradient(to right, #121212 8%, #222 18%, #121212 33%);
    background-size: calc(var(--main-adjuster) * (1000/400)) calc(var(--main-adjuster) * (104/400));
  }
}

.mdx-rendered-content {
  line-height: calc(var(--main-adjuster) * (22/400));
  color: white;
  max-width: 70vw;
  background: #222;
  width: fit-content;
  padding: calc(var(--main-adjuster) * (18/400)) calc(var(--main-adjuster) * (16/400));
  margin: calc(var(--main-adjuster) * (16/400)) 0;
  border-radius: calc(var(--main-adjuster) * (20/400));
  padding-bottom: calc(var(--main-adjuster) * (14/400));
  box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black;

  & ul, & p { margin: calc(var(--main-adjuster) * (14/400)) 0; }
  & li { margin: calc(var(--main-adjuster) * (10/400)) 0; }
  & * { color: white; }
  & img { width: 100%; }
  & b, & i, & mark, & span { color: white; }
}

/* ==========================================================================
   4. LEADERBOARD PAGE & COMPONENTS
   ========================================================================== */

.no-results-found{
    width: 100%;
}

.leaderboard-categories {
  display: flex;
  align-items: center;
  width: 100%;
  overflow-x: auto;
  z-index: 2;
  height: calc(var(--main-adjuster) * (50/400));
  position: absolute;
  left: 0;
  bottom: calc(var(--main-adjuster) * (75/400));

  .search-header & {
    margin-bottom: calc(var(--main-adjuster) * (16/400));
  }
}

.leaderboard-category-item {
  display: flex;
  align-items: center;
  border-radius: calc(var(--main-adjuster) * (16/400));
  background: rgba(0, 0, 0, 0.2);
  padding: calc(var(--main-adjuster) * (8/400)) calc(var(--main-adjuster) * (12/400));
  padding-top: calc(var(--main-adjuster) * (10/400));
  text-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black;
  white-space: pre;
  color: white;
  margin: 0 calc(var(--main-adjuster) * (6/400));
  backdrop-filter: blur(calc(var(--main-adjuster) * (16/400)));
  box-shadow: inset 0 0 calc(var(--main-adjuster) * (10/400)) rgba(0, 0, 0, 0.8);
  transition: .5s;

  &.active {
    transition: 0.5s;
    box-shadow: none;
    background: linear-gradient(-45deg, var(--primary), var(--secondary));
  }

  &:first-child {
    margin-left: calc(var(--main-adjuster) * (16/400));
  }

  & * { color: white !important; }
  & *[stroke="currentColor"] { stroke: white !important; }
  & *[fill="currentColor"] { fill: white !important; }
}

.leaderboard-category-icon {
  display: flex;
  margin-right: calc(var(--main-adjuster) * (6/400));
}

.leaderboard-category-title {
  color: #fff;
  font-size: calc(var(--main-adjuster) * (13/400));
  text-transform: uppercase;
  font-weight: normal;
}

.leaderboard-page {
  height: 100dvh;
  position: relative;
  --image: url(../media/images/placeholders/19.jpg);

  &::after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: rgba(0, 0, 0, 0.9);
    z-index: -1;
    display: flex;
    backdrop-filter: blur(calc(var(--main-adjuster) * (15/400)));
  }

  &::before {
    content: "";
    position: fixed;
    left: calc(var(--main-adjuster) * (5/400));
    top: calc(var(--main-adjuster) * (5/400));
    width: calc(100% - calc(var(--main-adjuster) * (10/400)));
    height: calc(100% - calc(var(--main-adjuster) * (10/400)));
    z-index: -1;
    border-radius: inherit;
    background: var(--image);
  }

  .leaderboard-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background: transparent;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow-y: auto;
    padding: calc(var(--main-adjuster) * (60/400)) calc(var(--main-adjuster) * (8/400)) calc(var(--main-adjuster) * (150/400));
  }

  & .gallery-grid {
    width: 100%;
    margin-left: 0;
    margin: calc(var(--main-adjuster) * (16/400)) 0;
  }
}

.leaderboard-item {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.leaderboard-podium-title {
  width: 100%;
  color: white;
  padding: calc(var(--main-adjuster) * (16/400));
  margin: calc(var(--main-adjuster) * (7/400));
  margin-bottom: calc(var(--main-adjuster) * (32/400)) !important;
  font-size: calc(var(--main-adjuster) * (28/400));
  line-height: 1.25;
  text-align: center;
  word-break: normal;
  text-transform: uppercase;
  font-family: "Monoton", sans-serif;
  text-shadow: 
    calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) 0 #eb452b, 
    calc(var(--main-adjuster) * (2/400)) calc(var(--main-adjuster) * (2/400)) 0 #efa032, 
    calc(var(--main-adjuster) * (3/400)) calc(var(--main-adjuster) * (3/400)) 0 #46b59b, 
    calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (4/400)) 0 #017e7f, 
    calc(var(--main-adjuster) * (5/400)) calc(var(--main-adjuster) * (5/400)) 0 #052939, 
    calc(var(--main-adjuster) * (6/400)) calc(var(--main-adjuster) * (6/400)) 0 #c11a2b, 
    calc(var(--main-adjuster) * (7/400)) calc(var(--main-adjuster) * (7/400)) 0 #c11a2b;

  .leaderboard-page & {
    font-size: calc(var(--main-adjuster) * (32/400));
  }
}

.leaderboard-item-button {
  display: flex;
  background: rgba(255, 255, 255, 0.02);
  position: absolute;
  align-items: center;
  justify-content: center;
  top: calc(var(--main-adjuster) * (-6/400));
  width: calc(var(--main-adjuster) * (46/400));
  height: calc(var(--main-adjuster) * (46/400));
  border-radius: calc(var(--main-adjuster) * (25/400));

  &:first-child { left: 0; }
  &:nth-child(2) { right: 0; }

  .leaderboard-item:not(.swiper-slide-active) & {
    display: none;
  }
}

.leaderboard-item-podium {
  display: flex;
  justify-content: center;
  padding: 0;
}

.leaderboard-podium-pillar {
  width: 25%;
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  align-content: end;
  justify-content: center;
  overflow: hidden;

  &:first-child { border-bottom-left-radius: 0; }
  &:nth-child(2) { margin: 0 calc(var(--main-adjuster) * (5/400)); }
  &:last-child { border-bottom-right-radius: 0; }
}

.leaderboard-podium-cover {
  width: calc(var(--main-adjuster) * (60/400));
  height: calc(var(--main-adjuster) * (60/400));
  padding: calc(var(--main-adjuster) * (4/400));
  border-radius: calc(var(--main-adjuster) * (60/400));
  margin-bottom: calc(var(--main-adjuster) * (10/400));
  border: calc(var(--main-adjuster) * (2/400)) solid var(--item-color);
}

.leaderboard-podium-image {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.leaderboard-pillar-name {
  font-size: calc(var(--main-adjuster) * (16/400));
  text-align: center;
  width: 100%;
  margin: calc(var(--main-adjuster) * (5/400)) 0;
  color: white;
}

.leaderboard-pillar-stats {
  color: var(--item-color);
  font-size: calc(var(--main-adjuster) * (14/400));
}

.leaderboard-pilar-stand {
  margin-top: calc(var(--main-adjuster) * (10/400));
  display: flex;
  width: 100%;
  color: var(--item-color);
  font-size: calc(var(--main-adjuster) * (32/400));
  background: rgba(255, 255, 255, 0.05);
  align-items: center;
  justify-content: center;
  font-weight: bolder;
  padding-top: calc(var(--main-adjuster) * (10/400));

  .leaderboard-podium-pillar:nth-child(1) & {
    height: calc(var(--main-adjuster) * (150/400));
    border-top-left-radius: calc(var(--main-adjuster) * (32/400));
  }
  .leaderboard-podium-pillar:nth-child(2) & {
    height: calc(var(--main-adjuster) * (200/400));
    border-radius: calc(var(--main-adjuster) * (32/400)) calc(var(--main-adjuster) * (32/400)) 0 0;
  }
  .leaderboard-podium-pillar:nth-child(3) & {
    height: calc(var(--main-adjuster) * (100/400));
    border-top-right-radius: calc(var(--main-adjuster) * (32/400));
  }
}

.leaderboard-item-runners {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.05);
  padding: calc(var(--main-adjuster) * (16/400));
  margin-top: calc(var(--main-adjuster) * (5/400));
  border-radius: calc(var(--main-adjuster) * (32/400)) calc(var(--main-adjuster) * (32/400)) calc(var(--main-adjuster) * (20/400)) calc(var(--main-adjuster) * (20/400));

  .library-page & {
    min-height: calc(var(--main-adjuster) * (225/400));
    max-height: calc(var(--main-adjuster) * (225/400));
    border-radius: calc(var(--main-adjuster) * (32/400));
  }
}

.leaderboard-runner-item {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  margin: calc(var(--main-adjuster) * (12/400)) 0;
}

.leaderboard-runner-cover {

  width: calc(var(--main-adjuster) * (40/400));
  height: calc(var(--main-adjuster) * (40/400));
  margin: 0 calc(var(--main-adjuster) * (16/400));
  border-radius: calc(var(--main-adjuster) * (40/400));
  border: calc(var(--main-adjuster) * (2/400)) solid white;

  &.placeholder-shimmer,
  &.placeholder-shimmerring{
    border: none;
    border-color: transparent;
  }

  .library-page &,
  .vote-active & {
    margin-left: 0;
  }

}

.leaderboard-runner-image {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.leaderboard-runner-initial,
.leaderboard-podium-initial{
    width: 100%;
    height: 100%;
    border-radius: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-weight: bolder;
    background: limegreen;
    color: white;
    padding-top: calc(var(--main-adjuster) * (5/400));
    font-size: calc(var(--main-adjuster) * (20/400));

    &.leaderboard-podium-initial{
        padding-top: calc(var(--main-adjuster) * (8/400));
        font-size: calc(var(--main-adjuster) * (30/400));
    }
}

.leaderboard-runner-details {
  width: calc(100% - calc(var(--main-adjuster) * (110/400)));
  display: flex;
  flex-wrap: wrap;

  .library-page &,
  .vote-active & {
    width: calc(100% - calc(var(--main-adjuster) * (125/400)));
  }

  .result-active & {
    width: calc(100% - calc(var(--main-adjuster) * (180/400)));
  }
}

.leaderboard-runner-title {
  color: white;
  font-size: calc(var(--main-adjuster) * (18/400));
  font-weight: bolder;
  margin-bottom: calc(var(--main-adjuster) * (5/400));
  width: 100%;
}

.leaderboard-runner-name {

  font-size: calc(var(--main-adjuster) * (12/400));
  width: 100%;
  display: flex;
  align-items: center;

  span{
    display: flex;
    margin: 0 calc(var(--main-adjuster) * (12/400));
    margin-right: calc(var(--main-adjuster) * (5/400));;
    font-size: 90%;
    text-transform: uppercase;
    align-items: center;
    &:first-child{
        margin-left: 0;
        /*padding-bottom: calc(var(--main-adjuster) * (1/400));*/
    }
  }

}

.leaderboard-runner-stats {
  width: calc(var(--main-adjuster) * (40/400));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  .library-page &,
  .vote-active & {
    display: none;
  }
}

.leaderboard-runner-position {
  text-align: center;
  color: white;
  font-size: calc(var(--main-adjuster) * (24/400));
  font-weight: bolder;
}

.leaderboard-runner-text {
  text-align: center;
  font-size: calc(var(--main-adjuster) * (12/400));
  margin-top: calc(var(--main-adjuster) * (2/400));
  width: 100%;
}

.leaderboard-runner-button {
  color: white;
  text-transform: uppercase;
  font-size: calc(var(--main-adjuster) * (12/400));
  border-radius: calc(var(--main-adjuster) * (20/400));
  padding: calc(var(--main-adjuster) * (10/400));
  padding-bottom: calc(var(--main-adjuster) * (4/400));
  width: calc(var(--main-adjuster) * (60/400));
  margin-left: calc(var(--main-adjuster) * (10/400));
  background: var(--ceu);
}

.leaderboard-runner-votes {
  position: absolute;
  flex-wrap: wrap;
  display: flex;
  right: calc(var(--main-adjuster) * (-20/400));
  width: calc(var(--main-adjuster) * (100/400));
}

.leaderboard-votes-title {
  width: 100%;
  color: white;
  text-align: center;
  font-size: calc(var(--main-adjuster) * (20/400));
}

.leaderboard-votes-name {
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-size: calc(var(--main-adjuster) * (10/400));
  margin-top: calc(var(--main-adjuster) * (5/400));
}

.leaderboard-thumbnails {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: calc(var(--main-adjuster) * (20/400));

  & ~ .leaderboard-paragraph {
    margin-top: calc(var(--main-adjuster) * (5/400));
  }
}

.leaderboard-thumbnails-bullet {
  width: calc(var(--main-adjuster) * (8/400));
  height: calc(var(--main-adjuster) * (8/400));
  margin: 0 calc(var(--main-adjuster) * (5/400));
  border-radius: calc(var(--main-adjuster) * (10/400));
  background: rgba(255, 255, 255, 0.5);

  &.swiper-pagination-bullet-active {
    background: red;
    width: calc(var(--main-adjuster) * (30/400));
  }
}

.leaderboard-paragraph {
  text-align: center;
  font-style: italic;
  padding: calc(var(--main-adjuster) * (16/400));
  font-size: calc(var(--main-adjuster) * (18/400));
  margin-top: calc(var(--main-adjuster) * (16/400));
}

.vote-search {
  width: calc(100% - calc(var(--main-adjuster) * (70/400))) !important;
  border-radius: 0;
  height: calc(var(--main-adjuster) * (60/400));
  padding: 0 calc(var(--main-adjuster) * (20/400));
  margin-left: calc(var(--main-adjuster) * (35/400));
  margin-bottom: calc(var(--main-adjuster) * (16/400));
  font-size: calc(var(--main-adjuster) * (20/400)) !important;
  background: transparent;
  text-align: center;
  border-bottom: calc(var(--main-adjuster) * (3/400)) solid rgba(255, 255, 255, 0.05) !important;
}

/* Gallery inside Leaderboard */
.gallery-button {
  color: white;
  font-size: calc(var(--main-adjuster) * (16/400));
  background: black;
  margin-left: calc(var(--main-adjuster) * (16/400));
  padding: calc(var(--main-adjuster) * (8/400)) calc(var(--main-adjuster) * (16/400));
  padding-bottom: calc(var(--main-adjuster) * (6/400));
  border-radius: calc(var(--main-adjuster) * (20/400));
  display: none;
}

.gallery-grid {
  position: relative;
  width: calc(100% - calc(var(--main-adjuster) * (16/400)));
  margin-left: calc(var(--main-adjuster) * (8/400));
  border-radius: calc(var(--main-adjuster) * (16/400));
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;

  .main-page & {
    margin-left: calc(var(--main-adjuster) * (12/400));
    width: calc(100% - calc(var(--main-adjuster) * (24/400)));
  }

  &:has(:nth-child(3)) .gallery-grid-cover {

    & img{
        width: 100%;
        height: 100%;
    }
    &:first-child {
      width: 60vw;
      height: 60vw;
      margin-right: calc(var(--main-adjuster) * (5/400));
    }

    &:nth-child(2),
    &:nth-child(3) {
      width: calc(40vw - calc(var(--main-adjuster) * (21/400)));
      height: calc(30vw - calc(var(--main-adjuster) * (3/400)));

      .main-page & {
        width: calc(40vw - calc(var(--main-adjuster) * (24/400)));
      }
    }

    &:nth-child(3) {
      position: absolute;
      right: 0;
      bottom: 0;
      margin-top: calc(var(--main-adjuster) * (5/400));

      &:after {
        content: "+5";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        color: white;
        display: flex;
        font-size: calc(var(--main-adjuster) * (50/400));
        align-items: center;
        font-weight: bolder;
        justify-content: center;
        background: rgba(0, 0, 0, 0.75);
      }
    }
  }
}

.gallery-grid-image {
  display: flex;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   5. DISPLAY SLIDER
   ========================================================================== */
.display-slider {
  display: flex;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  max-height: 100dvh;
  overflow: visible;
  background: transparent;
}

.display-slider-container {
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  overflow: visible;
  padding: 0;
  background: transparent;

  &.pointer-events .slider-item-options,
  .done .slider-item-options{
    pointer-events: none !important;
  }

}

.display-slider-item {
  min-height: 50dvh;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  /*margin: calc(var(--main-adjuster) * (16/400)) 0;*/
  border-radius: calc(var(--main-adjuster) * (0/400));
  /*box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;*/
  background: linear-gradient(180deg, var(--item-color), #111);
}

.slider-item-container {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: inherit;
  overflow-y: auto;
  padding: calc(var(--main-adjuster) * (80/400)) 0;
  padding-bottom: calc(var(--main-adjuster) * (140/400));
}

.slider-item-header {
  opacity: 0;
  position: absolute;
}

.slider-header-title {
  color: white;
}

.slider-item-cover {
  width: 100%;
  height: 35vh;
  position: relative;
  border-radius: inherit;
  padding: calc(var(--main-adjuster) * (8/400)) calc(var(--main-adjuster) * (16/400));
}

.slider-item-image {
  width: 100%;
  height: 100%;
  display: flex;
  box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
  border-radius: calc(var(--main-adjuster) * (26/400));
}

.slider-item-button{
    right: calc(var(--main-adjuster) * (20/400));
    bottom: calc(var(--main-adjuster) * (12/400));
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: calc(var(--main-adjuster) * (50/400));
    height: calc(var(--main-adjuster) * (50/400));
    border-radius: calc(var(--main-adjuster) * (40/400));
    background: linear-gradient(-90deg, var(--primary), var(--secondary));
    border: none;
    outline: none;

    .done &{
        display: flex;
    }
}

.slider-item-question {
  padding: calc(var(--main-adjuster) * (16/400));
  color: white;
  font-weight: normal;
  line-height: calc(var(--main-adjuster) * (24/400));
  font-size: calc(var(--main-adjuster) * (20/400));
}

.slider-item-options {
  list-style: upper-alpha;
  padding-right: calc(var(--main-adjuster) * (16/400));
  padding-left: calc(var(--main-adjuster) * (35/400));
  margin-top: calc(var(--main-adjuster) * (5/400));
}

.slider-item-option {
  margin-bottom: calc(var(--main-adjuster) * (16/400));
  padding: calc(var(--main-adjuster) * (10/400));
  padding-top: calc(var(--main-adjuster) * (12/400));
  background: rgba(255, 255, 255, 0.1);
  font-size: calc(var(--main-adjuster) * (16/400));
  border-radius: calc(var(--main-adjuster) * (12/400));
  color: white;
  backdrop-filter: blur(calc(var(--main-adjuster) * (20/400)));

  &::marker {
    word-spacing: calc(var(--main-adjuster) * (5/400));
  }

  &.active[item-correct="1"]{
    background: green;
  }

  &.active[item-correct="0"]{
    background: red;
  }
}

.slider-item-footer {
  left: 0;
  bottom: 0;
  width: 100%;
  display: none;
  align-self: end;
  position: absolute;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--main-adjuster) * (70/400));
  padding: calc(var(--main-adjuster) * (10/400)) calc(var(--main-adjuster) * (10/400));
}

.slider-footer-title {
  width: 100%;
  color: white;
  padding-top: calc(var(--main-adjuster) * (5/400));
  padding-left: calc(var(--main-adjuster) * (10/400));
}

.slider-footer-buttons {
  display: flex;
}

.slider-footer-button {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  width: calc(var(--main-adjuster) * (46/400));
  height: calc(var(--main-adjuster) * (46/400));
  border-radius: calc(var(--main-adjuster) * (40/400));
  margin-left: calc(var(--main-adjuster) * (12/400));
  font-size: calc(var(--main-adjuster) * (20/400));
  backdrop-filter: blur(calc(var(--main-adjuster) * (20/400)));
}

/* ==========================================================================
   6. COMMON LIST ITEMS (EXAMS, DOCUMENTS, LESSONS, FINES)
   ========================================================================== */

/* Shared Overlay Styles for Exams, Documents & Lessons */
.exams-overlay, .documents-overlay, .lessons-overlay {
  width: 100%;
  display: flex;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  height: fit-content;
}

.exams-overlay { background-image: url(../media/images/special/2.jpg); }
.documents-overlay { background-image: url(../media/images/special/5.png); }
.lessons-overlay { height: 100vw; }

.exams-overlay:before, .documents-overlay:before, .lessons-overlay:before {
  top: 0; left: 0; content: ""; width: 100%; height: 100%; position: absolute;
  background: linear-gradient(0deg, #171717, transparent);
  pointer-events: none;
}
.exams-overlay:before, .documents-overlay:before {
  mask: linear-gradient(0deg, #171717, #171717, transparent);
  backdrop-filter: blur(calc(var(--main-adjuster) * (20/400)));
}

.exams-overlay-container, .documents-overlay-container, .lessons-overlay-container {
  width: 100%; background: transparent; position: relative; border-radius: inherit;
}
.exams-overlay-container, .documents-overlay-container {
  height: fit-content; padding: calc(var(--main-adjuster) * (20/400)) calc(var(--main-adjuster) * (16/400));
  padding-top: calc(var(--main-adjuster) * (200/400));
}
.lessons-overlay-container { height: 100vw; padding: 0; }

/* Overlay Shared Internal Layouts */
.exams-overlay-header, .documents-overlay-header, .lessons-overlay-header {
  width: 100%; display: flex; align-items: start; justify-content: space-between; height: calc(var(--main-adjuster) * (50/400));
}
.exams-overlay-title, .documents-overlay-title, .lessons-overlay-title { font-size: calc(var(--main-adjuster) * (30/400)); width: 100%; }
.exams-overlay-button, .documents-overlay-button, .lessons-overlay-button {
  display: none; align-items: center; justify-content: center; width: calc(var(--main-adjuster) * (40/400));
  height: calc(var(--main-adjuster) * (40/400)); border-radius: calc(var(--main-adjuster) * (12/400));
  background: rgba(0, 0, 0, 0.4); color: white; font-size: calc(var(--main-adjuster) * (20/400));
}
.exams-overlay-body, .documents-overlay-body, .lessons-overlay-body { width: 100%; display: flex; }
.exams-body-left, .documents-body-left, .lessons-body-left { display: flex; align-items: center; }
.exams-body-left svg, .documents-body-left svg, .lessons-body-left svg { transform: scale(1.2); }
.documents-body-left svg path { fill: white; }

.documents-body-icon {
  display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.25);
  width: calc(var(--main-adjuster) * (50/400)); height: calc(var(--main-adjuster) * (50/400));
  border-radius: calc(var(--main-adjuster) * (50/400));
}

.exams-body-count, .lessons-body-count { padding-top: calc(var(--main-adjuster) * (11/400)); font-size: calc(var(--main-adjuster) * (40/400)); margin-left: calc(var(--main-adjuster) * (15/400)); }
.documents-body-count { padding-top: calc(var(--main-adjuster) * (11/400)); font-size: calc(var(--main-adjuster) * (40/400)); margin-left: calc(var(--main-adjuster) * (15/400)); }

.exams-body-right, .lessons-body-right { padding-top: calc(var(--main-adjuster) * (11/400)); margin-left: calc(var(--main-adjuster) * (15/400)); }
.documents-body-right { padding-top: calc(var(--main-adjuster) * (11/400)); margin-left: calc(var(--main-adjuster) * (15/400)); }

.exams-body-name, .documents-body-name, .lessons-body-name { margin-bottom: calc(var(--main-adjuster) * (3/400)); font-size: calc(var(--main-adjuster) * (14/400)); }
.exams-body-title, .documents-body-title, .lessons-body-title { font-size: calc(var(--main-adjuster) * (14/400)); }

.exams-overlay-progress, .documents-overlay-progress, .lessons-overlay-progress {
  width: 100%; margin: calc(var(--main-adjuster) * (15/400)) 0; height: calc(var(--main-adjuster) * (10/400));
  background: rgba(255, 255, 255, 0.2); border-radius: calc(var(--main-adjuster) * (32/400));
  overflow: hidden; box-shadow: inset 0 0 calc(var(--main-adjuster) * (5/400)) white;
}
.overlay-progress-indicator { display: flex; height: 100%; width: 50%; background: black; border-radius: calc(var(--main-adjuster) * (10/400)); }
.exams-overlay-footer, .documents-overlay-footer, .lessons-overlay-footer { display: flex; align-items: center; }
.overlay-footer-students { display: flex; align-items: center; }
.overlay-footer-student {
  display: flex; width: calc(var(--main-adjuster) * (20/400)); height: calc(var(--main-adjuster) * (20/400)); border-radius: calc(var(--main-adjuster) * (16/400));
  &:nth-child(n+2) { margin-left: calc(var(--main-adjuster) * (-10/400)); }
}
.overlay-student-image { width: 100%; height: 100%; border-radius: inherit; }
.overlay-footer-text { padding-top: calc(var(--main-adjuster) * (4/400)); font-size: calc(var(--main-adjuster) * (15/400)); font-weight: bolder; margin-left: calc(var(--main-adjuster) * (10/400)); }

/* Shared Container Styles */
.exams-container, .documents-container, .lessons-container {
  width: 100%; display: flex; flex-wrap: wrap; position: relative; background: #171717;
  padding: calc(var(--main-adjuster) * (12/400));
  padding-bottom: calc(var(--main-adjuster) * (120/400));
  border-radius: calc(var(--main-adjuster) * (40/400)) calc(var(--main-adjuster) * (40/400)) 0 0;
}
.lessons-container { padding-top: 0; align-content: start; }

/* Page Wrappers */
.exams-page, .documents-page, .lessons-page, .fines-page {
  height: 100dvh; display: flex; align-items: start; justify-items: start; align-content: start; flex-wrap: wrap; padding: 0; overflow-y: auto;
}
.exams-page *, .documents-page *, .lessons-page * { color: white; }
.fines-page { padding: calc(var(--main-adjuster) * (80/400)) calc(var(--main-adjuster) * (16/400)); padding-bottom: calc(var(--main-adjuster) * (140/400)); }

.exams-history {
  width: 100%; background: #222; box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) #111;
  border-radius: calc(var(--main-adjuster) * (32/400)) calc(var(--main-adjuster) * (32/400)) 0 0;
  padding: calc(var(--main-adjuster) * (16/400)) calc(var(--main-adjuster) * (10/400)); margin-top: calc(var(--main-adjuster) * (30/400));
  min-height: calc(var(--main-adjuster) * (500/400)); padding-bottom: calc(var(--main-adjuster) * (120/400));
}
.exams-history-title { width: 100%; color: white; text-align: center; font-size: calc(var(--main-adjuster) * (16/400)); margin-bottom: calc(var(--main-adjuster) * (16/400)); }
.exams-history-container { width: 100%; display: flex; flex-wrap: wrap; }

/* INDIVIDUAL ITEMS: EXAM/DOCUMENT */
.exam-item, .document-item {
  width: 100%; display: flex; flex-wrap: wrap; transition: 0.5s; border-radius: calc(var(--main-adjuster) * (16/400)); margin-bottom: calc(var(--main-adjuster) * (16/400));
  &.active {
    background: #111;
    & .exam-item-stats, & .document-item-stats { display: flex; }
  }
}

.exam-item-container, .document-item-container {
  width: 100%; display: flex; background: #222; position: relative; align-items: center; padding: calc(var(--main-adjuster) * (8/400)); padding-right: 0;
  box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) #111; border-radius: calc(var(--main-adjuster) * (16/400));

    .exams-history-container &{
        background: #171717;
    }
}

.exam-item-position, .document-item-position {
  background: black; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center;
  width: calc(var(--main-adjuster) * (50/400)); height: calc(var(--main-adjuster) * (50/400)); border-radius: calc(var(--main-adjuster) * (10/400));

  .pending &{ background: orange;}
  .fail &{ background: red;}
  .pass &{ background: green;}
}

.exam-position-count, .document-position-count {
  display: flex; width: 100%; justify-content: center; align-items: center; font-weight: bolder;
  padding-top: calc(var(--main-adjuster) * (4/400)); font-size: calc(var(--main-adjuster) * (20/400)); color: white;
  text-transform: uppercase;
}
.exam-position-text, .document-position-text {
  text-align: center; width: 100%; text-transform: uppercase; font-size: calc(var(--main-adjuster) * (8/400)); color: white; margin-top: calc(var(--main-adjuster) * (2/400));
}

.exam-item-details, .document-item-details {
  display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: calc(var(--main-adjuster) * (3/400));
  padding-left: calc(var(--main-adjuster) * (14/400)); width: calc(100% - calc(var(--main-adjuster) * (50/400)));
}

.exam-item-title, .document-item-title { width: 100%; font-weight: normal; margin-bottom: calc(var(--main-adjuster) * (5/400)); color: white; 
    /*.pending &{color: var(--primary); }*/
    /*.completed &{color: green; }*/
}
.exam-item-name { 
  width: 100%; display: flex; align-items: center; font-size: calc(var(--main-adjuster) * (12/400)); padding-top: calc(var(--main-adjuster) * (3/400));
  & span {
    color: white; display: flex; text-transform: uppercase; background: rgba(0, 0, 0, 0.2); font-size: calc(var(--main-adjuster) * (11/400));
    margin-top: calc(var(--main-adjuster) * (-3/400)); margin-right: calc(var(--main-adjuster) * (10/400)); border-radius: calc(var(--main-adjuster) * (4/400));
    box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black; padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (6/400)); padding-bottom: calc(var(--main-adjuster) * (1/400));
      .pending &{ background: orange;}
      .completed &{ background: green;}
  }
}
.document-item-name { width: 100%; max-width: 80%; font-size: calc(var(--main-adjuster) * (12/400)); }

.exam-item-button, .document-item-button {
  display: flex; position: absolute; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05);
  top: calc(var(--main-adjuster) * (8/400)); right: calc(var(--main-adjuster) * (8/400));
  width: calc(var(--main-adjuster) * (50/400)); height: calc(var(--main-adjuster) * (50/400)); border-radius: calc(var(--main-adjuster) * (50/400));
}
.document-item-button a { position: absolute; left: 0; top: 0; height: 100%; width: 100%; display: flex; z-index: 1; }

.exam-details-item, .document-details-item {
  text-align: center; position: relative; width: calc(100%/5); display: flex; justify-content: center; align-items: center; flex-wrap: wrap; padding-top: calc(var(--main-adjuster) * (4/400));
  &:last-child::after {
    content: ""; top: 50%; left: 50%; display: flex; position: absolute; transform: translate(-50%, -50%);
    width: calc(var(--main-adjuster) * (60/400)); height: calc(var(--main-adjuster) * (60/400)); border: calc(var(--main-adjuster) * (2/400)) solid #fff; border-radius: calc(var(--main-adjuster) * (100/400));
  }
}
.exam-details-title, .document-details-title {
  width: 100%; color: white; text-align: center; font-weight: normal; font-size: calc(var(--main-adjuster) * (20/400));
  .exam-details-item:last-child &, .document-details-item:last-child & { color: #fff; font-size: calc(var(--main-adjuster) * (30/400)); }
}
.exam-details-name, .document-details-name { width: 100%; text-align: center; text-transform: uppercase; margin-top: calc(var(--main-adjuster) * (4/400)); font-size: calc(var(--main-adjuster) * (8/400)); }

.exam-item-stats, .document-item-stats { display: none; width: 100%; padding: calc(var(--main-adjuster) * (16/400)) calc(var(--main-adjuster) * (10/400)); padding-top: calc(var(--main-adjuster) * (20/400)); }
.exam-item-stat, .document-item-stat { display: flex; flex-wrap: wrap; width: calc(100%/4); }
.exam-stat-title, .document-stat-title { width: 100%; color: white; text-align: center; font-size: calc(var(--main-adjuster) * (24/400)); }
.exam-stat-name, .document-stat-name { width: 100%; text-align: center; text-transform: uppercase; margin-top: calc(var(--main-adjuster) * (6/400)); font-size: calc(var(--main-adjuster) * (10/400)); }

/* INDIVIDUAL ITEMS: LESSONS */
.lessons-item { width: 100%; display: flex; margin-top: calc(var(--main-adjuster) * (14/400)); border-radius: calc(var(--main-adjuster) * (16/400)); }
.lessons-item-container { width: 100%; display: flex; background: #111; position: relative; border-radius: inherit; justify-content: space-between; padding: calc(var(--main-adjuster) * (5/400)); }
.lessons-item-cover { width: calc(var(--main-adjuster) * (100/400)); height: calc(var(--main-adjuster) * (100/400)); border-radius: calc(var(--main-adjuster) * (12/400)); }
.lessons-item-image { width: 100%; height: 100%; border-radius: inherit; }
.lessons-item-details { display: flex; flex-wrap: wrap; align-content: start; padding: calc(var(--main-adjuster) * (10/400)); padding-bottom: 0; position: relative; width: calc(100% - calc(var(--main-adjuster) * (100/400))); }
.lessons-item-play {
  display: flex; position: absolute; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1);
  width: calc(var(--main-adjuster) * (40/400)); height: calc(var(--main-adjuster) * (40/400)); right: calc(var(--main-adjuster) * (8/400)); bottom: calc(var(--main-adjuster) * (8/400));
  border-radius: calc(var(--main-adjuster) * (30/400)); box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black; backdrop-filter: blur(calc(var(--main-adjuster) * (10/400)));
}
.lessons-item-title { width: 100%; font-size: calc(var(--main-adjuster) * (20/400)); }
.lessons-item-name { width: 100%; color: #888; margin: calc(var(--main-adjuster) * (5/400)) 0; font-size: calc(var(--main-adjuster) * (11/400)); -webkit-line-clamp: 3; }
.lessons-item-footer { display: flex; width: 100%; position: absolute; bottom: calc(var(--main-adjuster) * (3/400)); align-items: center; }
.lessons-footer-item { color: white; display: flex; background: #000; justify-content: center; align-self: end; text-transform: uppercase; margin-right: calc(var(--main-adjuster) * (8/400)); font-size: calc(var(--main-adjuster) * (10/400)); border-radius: calc(var(--main-adjuster) * (16/400)); padding: calc(var(--main-adjuster) * (6/400)) calc(var(--main-adjuster) * (10/400)); padding-bottom: calc(var(--main-adjuster) * (4/400)); }

/* INDIVIDUAL ITEMS: FINES (MULTAS) */
.fines-container { display: flex; width: 100%; flex-wrap: wrap; align-content: start; overflow-y: auto; position: absolute; height: 100dvh; padding: inherit; top: 0; left: 0; }
.fines-item { width: 100%; background: #111; padding: calc(var(--main-adjuster) * (5/400)); margin: calc(var(--main-adjuster) * (10/400)) 0; border-radius: calc(var(--main-adjuster) * (20/400)); box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black; &.hidden { display: none; } }
.fines-item-header { width: 100%; display: flex; padding: calc(var(--main-adjuster) * (10/400)); font-size: calc(var(--main-adjuster) * (22/400)); }
.fines-headser-title { color: white; -webkit-line-clamp: 2; }
.fines-item-container { width: 100%; border-radius: inherit; align-content: start; }
.fines-item-paragraph { color: white; background: rgba(255, 255, 255, 0.03); padding: calc(var(--main-adjuster) * (16/400)) calc(var(--main-adjuster) * (14/400)); padding-bottom: calc(var(--main-adjuster) * (14/400)); border-radius: calc(var(--main-adjuster) * (16/400)); line-height: calc(var(--main-adjuster) * (24/400)); }
.fines-item-footer { display: flex; overflow-x: auto; align-items: center; padding: calc(var(--main-adjuster) * (12/400)) calc(var(--main-adjuster) * (6/400)); padding-bottom: calc(var(--main-adjuster) * (6/400)); }
.fines-footer-item { background: #000; color: white; display: flex; align-items: center; align-content: start; margin-right: calc(var(--main-adjuster) * (10/400)); text-transform: uppercase; min-width: fit-content; padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (10/400)); font-size: calc(var(--main-adjuster) * (11/400)); border-radius: calc(var(--main-adjuster) * (16/400)); padding-bottom: calc(var(--main-adjuster) * (4/400)); padding-right: calc(var(--main-adjuster) * (4/400)); &:last-child { margin-right: 0; } }
.fines-footer-icon { color: white; padding-top: calc(var(--main-adjuster) * (2/400)); font-size: calc(var(--main-adjuster) * (10/400)); }
.fines-footer-text { color: white; display: flex; background: #111; border-radius: calc(var(--main-adjuster) * (14/400)); padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (10/400)); padding-top: calc(var(--main-adjuster) * (8/400)); margin-left: calc(var(--main-adjuster) * (8/400)); }
.fines-footer-button{
    display: none;
}
.fines-page-bottom { display: flex; position: absolute; width: calc(100% - calc(var(--main-adjuster) * (20/400))); bottom: calc(var(--main-adjuster) * (80/400)); left: calc(var(--main-adjuster) * (10/400)); height: calc(var(--main-adjuster) * (50/400)); border-radius: calc(var(--main-adjuster) * (40/400)); z-index: 1; }
.fines-bottom-container { width: 100%; height: 100%; border-radius: inherit; backdrop-filter: blur(calc(var(--main-adjuster) * (5/400))); background: rgba(0, 0, 0, 0.2); justify-content: space-between; align-items: center; display: flex; padding: 0 calc(var(--main-adjuster) * (5/400)); box-shadow: inset 0 0 calc(var(--main-adjuster) * (10/400)) rgba(0, 0, 0, 0.5), inset 0 0 calc(var(--main-adjuster) * (5/400)) rgba(0, 0, 0, 0.5); }
.fines-bottom-input { width: 100%; height: 100%; border-radius: inherit; background: transparent; outline: none; border: none; font-size: calc(var(--main-adjuster) * (18/400)); height: calc(var(--main-adjuster) * (50/400)); padding-left: calc(var(--main-adjuster) * (60/400)); position: absolute; left: 0; top: 0; &::placeholder { color: white; } }
.fines-bottom-button { display: flex; background: #111; align-items: center; justify-content: center; z-index: 1; transform: rotate(90deg); width: calc(var(--main-adjuster) * (40/400)); height: calc(var(--main-adjuster) * (40/400)); border-radius: calc(var(--main-adjuster) * (20/400)); box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black; & * { color: white; } }

.fines-bottom-categories { position: fixed; display: none; flex-wrap: nowrap; align-items: center; overflow-x: auto; padding: 0 calc(var(--main-adjuster) * (10/400)); left: 0; width: 100vw; bottom: calc(var(--main-adjuster) * (140/400)); padding-right: calc(var(--main-adjuster) * (10/400)); .fines-page-bottom.active & { display: flex; } }
.fines-category-item { color: white; background: #111; display: flex; text-transform: uppercase; min-width: fit-content; margin: 0 calc(var(--main-adjuster) * (4/400)); font-size: calc(var(--main-adjuster) * (12/400)); border-radius: calc(var(--main-adjuster) * (20/400)); padding: calc(var(--main-adjuster) * (10/400)) calc(var(--main-adjuster) * (16/400)); padding-bottom: calc(var(--main-adjuster) * (8/400)); transition: 0.5s; &.active { background: var(--ceu); } }


/* ==========================================================================
   7. RULES PAGE & COMPONENTS
   ========================================================================== */
.rules-page {
  height: 100dvh;
}

.rules-page-top {
  display: flex; position: absolute; width: fit-content; top: calc(var(--main-adjuster) * (80/400)); left: 50%; transform: translateX(-50%); z-index: 1;
    display: none;
}
.rules-top-container {
  display: flex; padding: calc(var(--main-adjuster) * (5/400)); border-radius: calc(var(--main-adjuster) * (24/400)); background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(calc(var(--main-adjuster) * (5/400))); box-shadow: inset 0 0 calc(var(--main-adjuster) * (10/400)) rgba(0, 0, 0, 0.5), inset 0 0 calc(var(--main-adjuster) * (5/400)) rgba(0, 0, 0, 0.5);
}
.rules-top-item {
  color: white; transition: 0.5s; text-transform: uppercase; font-size: calc(var(--main-adjuster) * (14/400)); border-radius: calc(var(--main-adjuster) * (30/400)); padding: calc(var(--main-adjuster) * (10/400)) calc(var(--main-adjuster) * (16/400)); padding-bottom: calc(var(--main-adjuster) * (6/400));
  &.active { background: rgba(255, 255, 255, 0.2); }
}

.rules-page-middle { height: 100%; width: 100%; position: absolute; top: 0; left: 0; }
.rules-middle-container { height: 100%; width: 100%; display: flex; flex-wrap: wrap; overflow-y: auto; align-content: start; justify-content: space-between; padding: calc(var(--main-adjuster) * (90/400)) calc(var(--main-adjuster) * (16/400)); padding-bottom: calc(var(--main-adjuster) * (180/400)); }
.rules-middle-item { margin-bottom: calc(var(--main-adjuster) * (16/400)); width: calc(33% - calc(var(--main-adjuster) * (8/400))); &.hidden { display: none; } }
.rules-item-container { width: 100%; border-radius: calc(var(--main-adjuster) * (16/400)); }
.rules-item-cover { width: 100%; border-radius: inherit; margin-bottom: calc(var(--main-adjuster) * (12/400)); height: calc(33vw - calc(var(--main-adjuster) * (20/400))); }
.rules-item-image { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.rules-item-details { width: 100%; }
.rules-item-title { color: white; font-weight: normal; text-align: center; -webkit-line-clamp: 2; text-transform: uppercase; font-size: calc(var(--main-adjuster) * (14/400)); line-height: calc(var(--main-adjuster) * (20/400)); }

.rules-page-bottom { display: flex; position: absolute; width: calc(100% - calc(var(--main-adjuster) * (20/400))); bottom: calc(var(--main-adjuster) * (80/400)); left: calc(var(--main-adjuster) * (10/400)); height: calc(var(--main-adjuster) * (50/400)); border-radius: calc(var(--main-adjuster) * (40/400)); z-index: 1; }
.rules-bottom-container { min-width: 100%; height: 100%; border-radius: inherit; backdrop-filter: blur(calc(var(--main-adjuster) * (5/400))); background: rgba(0, 0, 0, 0.2); justify-content: space-between; align-items: center; display: flex; padding: 0 calc(var(--main-adjuster) * (5/400)); box-shadow: inset 0 0 calc(var(--main-adjuster) * (10/400)) rgba(0, 0, 0, 0.5), inset 0 0 calc(var(--main-adjuster) * (5/400)) rgba(0, 0, 0, 0.5); }
.rules-bottom-input { width: 100%; height: 100%; border-radius: inherit; background: transparent; outline: none; border: none; font-size: calc(var(--main-adjuster) * (18/400)); height: calc(var(--main-adjuster) * (50/400)); padding-left: calc(var(--main-adjuster) * (60/400)); position: absolute; left: 0; top: 0; &::placeholder { color: white; } }
.rules-bottom-button { display: flex; background: #111; align-items: center; justify-content: center; z-index: 1; transform: rotate(90deg); width: calc(var(--main-adjuster) * (40/400)); height: calc(var(--main-adjuster) * (40/400)); border-radius: calc(var(--main-adjuster) * (20/400)); box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black; & * { color: white; } }

.rules-bottom-categories { position: absolute; display: none; flex-wrap: nowrap; align-items: center; overflow-x: auto; padding: 0 calc(var(--main-adjuster) * (10/400)); left: calc(var(--main-adjuster) * (-8/400)); width: 100vw; bottom: calc(var(--main-adjuster) * (60/400)); padding-right: calc(var(--main-adjuster) * (10/400)); .rules-page-bottom.active & { display: flex; } }
.rules-category-item { color: white; background: #111; display: flex; text-transform: uppercase; min-width: fit-content; margin: 0 calc(var(--main-adjuster) * (4/400)); font-size: calc(var(--main-adjuster) * (12/400)); border-radius: calc(var(--main-adjuster) * (20/400)); padding: calc(var(--main-adjuster) * (10/400)) calc(var(--main-adjuster) * (16/400)); padding-bottom: calc(var(--main-adjuster) * (8/400)); transition: 0.5s; &.active { background: var(--ceu); } }

.code-tag{
    font-size: 80%;
    background: orange;
    color: white;
    border-radius: calc(var(--main-adjuster) * (4/400));
    padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (6/400));
    padding-bottom: calc(var(--main-adjuster) * (0/400));
    margin-left: calc(var(--main-adjuster) * (4/400));
}
/* ==========================================================================
   8. MENUS, MODALS & SETTINGS
   ========================================================================== */
.menu-page {
  width: 100%;
  display: flex;
  justify-content: center;
}

.ete-menu-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: calc(var(--main-adjuster) * (16/400)) 0;

  /* Overrides for horizontal scrolling when applied */
  &[style*="overflow-x: auto"], .category-item &, .start-menu & {
    padding-top: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
}

.ete-login-container ~ .ete-menu-content{
    display: none;
}

.ete-login-container.active ~ .ete-menu-content {
  display: flex;
}

.settings-form-field {
  display: flex;
  flex-wrap: wrap;
  width: calc(50% - calc(var(--main-adjuster) * (8/400)));
  margin: calc(var(--main-adjuster) * (10/400)) 0;

  &.large { width: 100%; }
  & ~ a { font-size: calc(var(--main-adjuster) * (14/400)); }
}

.settings-form-label {
  width: 100%;
  color: white;
  font-weight: bolder;
  text-transform: uppercase;
  font-size: calc(var(--main-adjuster) * (12/400));
  margin-bottom: calc(var(--main-adjuster) * (5/400));
}

.settings-form-input {
  width: 100%;
  outline: none;
  background: transparent;
  padding: 0 calc(var(--main-adjuster) * (0/400));
  padding-top: calc(var(--main-adjuster) * (4/400));
  height: calc(var(--main-adjuster) * (50/400));
  font-size: calc(var(--main-adjuster) * (18/400));
  border-bottom: calc(var(--main-adjuster) * (3/400)) solid #aaa;

  &::placeholder {
    font-size: calc(var(--main-adjuster) * (18/400));
  }
}

.settings-form-footer {
  width: 100%;
  display: flex;
}

.settings-form-button {
  color: white;
  display: flex;
  background: #171717;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  height: calc(var(--main-adjuster) * (40/400));
  font-size: calc(var(--main-adjuster) * (14/400));
  padding: 0 calc(var(--main-adjuster) * (16/400));
  padding-top: calc(var(--main-adjuster) * (3.75/400));
  border-radius: calc(var(--main-adjuster) * (16/400));
  margin-right: calc(var(--main-adjuster) * (16/400));
}

.login-bottom-button {
  width: 100%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--main-adjuster) * (50/400));
  border-radius: calc(var(--main-adjuster) * (32/400));
  background: linear-gradient(-90deg, var(--primary), var(--secondary));
  color: white;
  font-size: calc(var(--main-adjuster) * (16/400));

  & ~ a {
    z-index: 1;
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-top: calc(var(--main-adjuster) * (32/400));
  }
}

.ete-login-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: calc(var(--main-adjuster) * (20/400));

  &.active { margin-bottom: 0; }
}

.ete-login-item {
  border-radius: calc(var(--main-adjuster) * (40/400));
  padding: 0;
  display: flex;
  margin: calc(var(--main-adjuster) * (16/400)) calc(var(--main-adjuster) * (14/400));
  align-items: center;
  justify-content: center;
  width: calc(var(--main-adjuster) * (44/400));
  height: calc(var(--main-adjuster) * (44/400));
  margin-bottom: calc(var(--main-adjuster) * (50/400));
  outline: none;
  border: none;
  position: relative;

  .ete-login-container & { margin-bottom: calc(var(--main-adjuster) * (30/400)); }
  &.apple-login { background: black; }
  &.google-login { background: linear-gradient(135deg, var(--goo1), var(--goo2), var(--goo3), var(--goo4)); }
  &.facebook-login { background: var(--face); }
  &.whatsapp-login { background: var(--sap); }
  &.guest-login { background: #555; }
  & * { color: white; }
}

.ete-login-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.ete-login-text {
  padding-top: calc(var(--main-adjuster) * (5/400));
  font-size: calc(var(--main-adjuster) * (11/400));
  position: absolute;
  bottom: calc(var(--main-adjuster) * (-25/400));
  white-space: pre;
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

/* Specific Category/Menu Item Layouts */
.category-item {
  display: flex;
  width: calc(var(--main-adjuster) * (200/400));
  min-width: calc(var(--main-adjuster) * (200/400));
  height: calc(var(--main-adjuster) * (300/400));
  margin-right: calc(var(--main-adjuster) * (16/400));

  &:last-child { margin-right: 0; }
}

.category-item-container {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--main-adjuster) * (24/400));
  background: #111;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black;
}

.category-item-cover {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: inherit;
  padding: calc(var(--main-adjuster) * (4/400));
  height: 100%;
}

.category-item-image {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--main-adjuster) * (20/400));
}

.category-item-details {
  display: flex;
  width: 100%;
  position: absolute;
  bottom: 0;
  align-content: flex-end;
  flex-wrap: wrap;
  border-radius: inherit;
  height: 60%;
  padding: calc(var(--main-adjuster) * (10/400));
  margin-top: calc(var(--main-adjuster) * (8/400));
  padding-bottom: calc(var(--main-adjuster) * (60/400));

  &:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0 0 calc(var(--main-adjuster) * (20/400)) calc(var(--main-adjuster) * (20/400));
    mask: linear-gradient(0deg, #000, #000, transparent);
    backdrop-filter: blur(calc(var(--main-adjuster) * (50/400)));
    z-index: 0;
    display: flex;
    background: rgba(0, 0, 0, 0.2);
  }
}

.category-item-title {
  z-index: 1;
  width: 100%;
  color: white;
  position: relative;
  font-size: calc(var(--main-adjuster) * (20/400));
  margin-bottom: calc(var(--main-adjuster) * (8/400));
}

.category-item-name {
  width: 100%;
  position: relative;
  z-index: 1;
  font-size: calc(var(--main-adjuster) * (15/400));
}

.category-item-footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--main-adjuster) * (10/400));
}

.category-footer-stats {
  display: flex;
  align-items: center;
}

.category-footer-stat {
  display: flex;
  align-items: center;
  margin-right: calc(var(--main-adjuster) * (10/400));
}

.category-stat-count {
  margin-top: calc(var(--main-adjuster) * (6/400));
  margin-left: calc(var(--main-adjuster) * (4/400));
  font-size: calc(var(--main-adjuster) * (16/400));
}

.category-footer-button {
  color: black;
  width: fit-content;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.9);
  padding: calc(var(--main-adjuster) * (6/400)) calc(var(--main-adjuster) * (12/400));
  padding-top: calc(var(--main-adjuster) * (8/400));
  font-size: calc(var(--main-adjuster) * (14/400));
  border-radius: calc(var(--main-adjuster) * (20/400));
  backdrop-filter: blur(calc(var(--main-adjuster) * (10/400)));
  border: none;
  outline: none;
}



::view-transition-old(root) { animation: slide-out 0.3s ease-in-out forwards; }
::view-transition-new(root) { animation: slide-in 0.3s ease-in-out forwards; }

@keyframes slide-out {
    to { transform: translateX(calc(var(--main-adjuster) * (-50/400))); opacity: 0; }
}

@keyframes slide-in {
    from { transform: translateX(calc(var(--main-adjuster) * (50/400))); opacity: 0; }
}

@keyframes placeHolderShimmer {
    0% { background-position: calc(var(--main-adjuster) * (-468/400)) 0; }
    100% { background-position: calc(var(--main-adjuster) * (468/400)) 0; }
}

.placeholder-shimmer,
.placeholder-shimmerring {
    animation: placeHolderShimmer 2s linear infinite forwards;
    background: linear-gradient(to right, #121212 8%, #222 18%, #121212 33%);
    background-size: calc(var(--main-adjuster) * (1000/400)) calc(var(--main-adjuster) * (104/400));
    border-radius: calc(var(--main-adjuster) * (10/400));
    color: transparent !important;
    text-shadow: none !important;

    .profile-stats-item &,
    &.profile-stats-item:has(> :only-child),
    &.profile-stats-item:empty {
        --mix-color: color-mix(in oklab, var(--item-color), #121212);
        animation-duration: 20s;
        background: linear-gradient(to right, var(--mix-color) 8%, rgba(0, 0, 0, 0.60) 42%, var(--mix-color) 73%);
    }
}



/* ==========================================================================
   2. PROFILE PAGE
   ========================================================================== */

.learner-page,
.subscription-page,
.progress-page{
    padding: 0;
    width: 100%;
    flex-wrap: wrap;
    align-content: start;
    overflow-y: auto;
}

.top-overlayer{
    width: 100%;
    position: relative;
    height: calc(var(--main-adjuster) * (390/400));
}

.top-overlayer-container{
    width: 100%;
    height: 100%;
}

.top-overlayer-card{
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    align-items: center;
    align-content: center;
    justify-content: center;
    left: calc(var(--main-adjuster) * (16/400));
    bottom: calc(var(--main-adjuster) * (20/400));
    padding: calc(var(--main-adjuster) * (0/400)) calc(var(--main-adjuster) * (16/400));
    padding-bottom: calc(var(--main-adjuster) * (32/400));
    border-radius: calc(var(--main-adjuster) * (32/400));
    width: calc(100% - calc(var(--main-adjuster) * (32/400)));
    height: calc(100% - calc(var(--main-adjuster) * (105/400)));

    boutline: none;
    background: rgba(0, 0, 0, 0.20);
    box-shadow: inset 0 0 calc(var(--main-adjuster) * (10/400)) rgba(0, 0, 0, 0.250);
    border-radius: calc(var(--main-adjuster) * (40/400));
    backdrop-filter: blur(calc(var(--main-adjuster) * (5/400)));
      
    /*border-radius: calc(var(--main-adjuster) * (20/400));*/

}

.top-overlayer-cover{
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 0;

    &::before{
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        background: linear-gradient(0deg, #171717, transparent);
        /*z-index: -1;*/
    }
}

.top-overlayer-image{
    width: 100%;
    height: 100%;
}

.top-overlayer-category{
    width: 100%;
    color: white;
    text-align: center;
    text-transform: uppercase;
    font-size: calc(var(--main-adjuster) * (12/400));
    margin-bottom: calc(var(--main-adjuster) * (5/400));
}

.top-overlayer-class{
    width: 100%;
    color: white;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-top: calc(var(--main-adjuster) * (10/400));
    height: calc(var(--main-adjuster) * (30/400));
    font-size: calc(var(--main-adjuster) * (30/400));
}

.top-overlayer-code{
    color: white;
    background: transparent;
    /*text-transform: uppercase;*/
    min-width: calc(var(--main-adjuster) * (230/400));
    margin: calc(var(--main-adjuster) * (30/400)) 0;
    margin-top: calc(var(--main-adjuster) * (15/400));
    font-size: calc(var(--main-adjuster) * (24/400));
    border-radius: calc(var(--main-adjuster) * (50/400));
    border: calc(var(--main-adjuster) * (1/400)) solid rgba(255, 255, 255, .250);
    padding: calc(var(--main-adjuster) * (12/400)) calc(var(--main-adjuster) * (30/400));
    padding-bottom: calc(var(--main-adjuster) * (7/400));
}

.top-overlayer-buttons{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-overlayer-button{
    width: calc(var(--main-adjuster) * (50/400));
    height: calc(var(--main-adjuster) * (50/400));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 calc(var(--main-adjuster) * (8/400));
    border-radius: calc(var(--main-adjuster) * (50/400));
    background: black;

    boutline: none;
    background: rgba(0, 0, 0, 0.20);
    /*box-shadow: inset 0 0 calc(var(--main-adjuster) * (10/400)) rgba(0, 0, 0, 0.250);*/
    border-radius: calc(var(--main-adjuster) * (40/400));
    backdrop-filter: blur(calc(var(--main-adjuster) * (5/400)));

    &.active{
        border: none;
        background: linear-gradient(-45deg, var(--primary), var(--secondary));;

        & .top-overlayer-text{
            color: var(--primary);
            bottom: calc(var(--main-adjuster) * (-28/400));
        }
    }

}

.top-overlayer-text{
    color: white;
    position: absolute;
    bottom: calc(var(--main-adjuster) * (-30/400));
    font-size: calc(var(--main-adjuster) * (12/400));
    text-transform: uppercase;
    white-space: pre;
}

.bottom-layer{
    width: 100%;
    flex-wrap: wrap;
    overflow: hidden;
    position: relative;
    box-shadow: 0 calc(var(--main-adjuster) * (-5/400)) #111;
    border-radius: calc(var(--main-adjuster) * (32/400)) calc(var(--main-adjuster) * (32/400)) 0 0;
}

.learners-header{
    width: 100%;
    display: flex;

    &.hide{
        display: none;
    }

}

.learners-header-container{

    width: 100%;
    display: flex;
    padding: calc(var(--main-adjuster) * (10/400)) calc(var(--main-adjuster) * (10/400));
    padding-bottom: calc(var(--main-adjuster) * (4/400));
}

.learners-header-button{

    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--main-adjuster) * (50/400));
    padding: calc(var(--main-adjuster) * (10/400));
    border-radius: calc(var(--main-adjuster) * (20/400));

    &.active{
        transition: .5s;
        background: #111;
    }

}

.learners-header-text{
    color: white;
    text-transform: uppercase;
    padding-top: calc(var(--main-adjuster) * (3/400));
    font-size: calc(var(--main-adjuster) * (18/400));
}

.bottom-layer-container{
    width: 100%;
    padding: calc(var(--main-adjuster) * (16/400));
    padding-bottom: calc(var(--main-adjuster) * (100/400));
}



.subscription-item{
    width: 100%;
    display: flex;
    margin-bottom: calc(var(--main-adjuster) * (16/400));
}

.subscription-item-container{
    width: 100%;
    display: flex;
    background: #111;
    align-items: center;
    justify-content: space-between;
    border-radius: calc(var(--main-adjuster) * (20/400));
    padding: calc(var(--main-adjuster) * (10/400)) calc(var(--main-adjuster) * (16/400));
    padding-top: calc(var(--main-adjuster) * (20/400));
}

.subscription-item-balance{
    color: white;
    font-size: calc(var(--main-adjuster) * (40/400));
}

.subscription-item-date{
    display: flex;
    flex-wrap: wrap;
    max-width: 40vw;
    font-size: calc(var(--main-adjuster) * (14/400));

    &:before{
        width: 100%;
        color: white;
        content: "Activado aos:";
        text-transform: uppercase;
        font-size: calc(var(--main-adjuster) * (12/400));
        margin-bottom: calc(var(--main-adjuster) * (4/400));
    }
}




.progress-page{
    flex-wrap: wrap;
    padding-top: calc(var(--main-adjuster) * (80/400));
    padding-bottom: calc(var(--main-adjuster) * (80/400));
}

.progress-item{
    width: 100%;
    display: flex;
    padding: calc(var(--main-adjuster) * (10/400));
}

.progress-item-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: #111;
    overflow: hidden;
    border-radius: calc(var(--main-adjuster) * (24/400));
}

.progress-item-header{
    width: 100%;
    display: flex;
}

.progress-header-container{
    width: 100%;
    display: flex;
    align-items: center;
    padding: calc(var(--main-adjuster) * (16/400));
    padding-bottom: calc(var(--main-adjuster) * (8/400));
    border-bottom: calc(var(--main-adjuster) * (2/400)) solid #171717;
}

.progress-header-icon{
    margin-right: calc(var(--main-adjuster) * (14/400));
}

.progress-header-title{
    color: white;
}

.progress-item-body{
    width: 100%;
    display: flex;
}

.progress-body-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.progress-stat-list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding: calc(var(--main-adjuster) * (20/400)) calc(var(--main-adjuster) * (16/400));

    svg{
        position: absolute;
        top: calc(var(--main-adjuster) * (20/400));
        width: calc(var(--main-adjuster) * (90/400));
        height: calc(var(--main-adjuster) * (90/400));
    }

    &:first-child{
        svg{
            right: calc(var(--main-adjuster) * (30/400));
            top: calc(var(--main-adjuster) * (25/400));
            width: calc(var(--main-adjuster) * (80/400));
            height: calc(var(--main-adjuster) * (80/400));
        }
        border-bottom: calc(var(--main-adjuster) * (2/400)) solid #171717;
    }

    &:last-child{
        svg{
            left: calc(var(--main-adjuster) * (25/400));
        }
        justify-content: end;
    }
}

.progress-stat-item{

    width: 100%;
    display: flex;
    max-width: 55vw;
    font-size: white;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--main-adjuster) * (3/400)) 0;
    font-size: calc(var(--main-adjuster) * (16/400));

    .progress-stat-list:last-child &{
        /*justify-content: end;*/
    }

    span{
        color: white;
        padding: calc(var(--main-adjuster) * (6/400)) calc(var(--main-adjuster) * (10/400));
        padding-bottom: calc(var(--main-adjuster) * (2/400));
        border-radius: calc(var(--main-adjuster) * (20/400));
        background: #222;
        font-size: calc(var(--main-adjuster) * (16/400));
    }

}





.bottom-info-tab{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.info-tab-item{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: calc(var(--main-adjuster) * (15/400)) 0;
    border-top: calc(var(--main-adjuster) * (1/400)) solid #222;

    &:last-child{
        /*border: none;*/
    }
}

.info-tab-name{
    width: 100%;
    text-transform: uppercase;
    font-size: calc(var(--main-adjuster) * (12/400));
    padding-top: calc(var(--main-adjuster) * (5/400));
    margin-bottom: calc(var(--main-adjuster) * (10/400));

}

.info-tab-title{
    width: 100%;
    color: white;
    font-size: calc(var(--main-adjuster) * (24/400));
}




.info-attend-item{
    width: 100%;
    display: flex;
    background: #111;
    align-items: center;
    padding: calc(var(--main-adjuster) * (8/400));
    margin: calc(var(--main-adjuster) * (10/400)) 0;
    border-radius: calc(var(--main-adjuster) * (30/400));
}

.info-attend-name{
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .20);
    font-size: calc(var(--main-adjuster) * (14/400));
    width: calc(var(--main-adjuster) * (30/400));
    height: calc(var(--main-adjuster) * (30/400));
    padding-top: calc(var(--main-adjuster) * (5/400));
    margin-right: calc(var(--main-adjuster) * (12/400));
    border-radius: calc(var(--main-adjuster) * (20/400));
}

.info-attend-title{
    color: white;
    font-size: calc(var(--main-adjuster) * (20/400));
    padding-top: calc(var(--main-adjuster) * (5/400));
}



.bottom-info-documents{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border-radius: calc(var(--main-adjuster) * (20/400));;
}

.bottom-documents-top{
    width: 100%;
    display: flex;
}

.documents-top-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-radius: calc(var(--main-adjuster) * (16/400));
    padding: calc(var(--main-adjuster) * (5/400));
    box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
}

.documents-top-left{
    color: white;
    display: flex;
    flex-wrap: wrap;
    background: #111;
    align-items: center;
    align-content: center;
    justify-content: center;
    padding-top: calc(var(--main-adjuster) * (0/400));;
    height: calc(var(--main-adjuster) * (50/400));
    width:  calc(var(--main-adjuster) * (50/400));
    font-size: calc(var(--main-adjuster) * (24/400));
    border-radius: calc(var(--main-adjuster) * (10/400));
}


.documents-top-middle{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 calc(var(--main-adjuster) * (10/400));
    padding-top: calc(var(--main-adjuster) * (5/400));
    width: calc(100% - calc(var(--main-adjuster) * (150/400)));
}

.documents-middle-title{
    width: 100%;
    color: white;
    font-size: calc(var(--main-adjuster) * (20/400));
    margin-bottom: calc(var(--main-adjuster) * (5/400));
}

.documents-middle-name{
    font-size: calc(var(--main-adjuster) * (14/400));
}

.documents-top-right{
    height: 100%;
    color: white;
    display: flex;
    background: #111;
    align-items: center;
    justify-content: center;
    width: calc(var(--main-adjuster) * (80/400));
    padding-top: calc(var(--main-adjuster) * (7/400));
    border-radius: calc(var(--main-adjuster) * (12/400));
    font-size: calc(var(--main-adjuster) * (30/400));
}

.bottom-documents-body{
    display: flex;
    width: 100%;
}

.documents-body-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: calc(var(--main-adjuster) * (10/400)) 0;
}

.documents-body-item{
    width: 100%;
    display: flex;
    background: #111;
    position: relative;
    align-items: center;
    padding: calc(var(--main-adjuster) * (10/400));
    margin: calc(var(--main-adjuster) * (5/400)) 0;
    border-radius: calc(var(--main-adjuster) * (10/400));
}

.documents-item-name{

    width: calc(var(--main-adjuster) * (30/400));
    height: calc(var(--main-adjuster) * (30/400));
    margin-right: calc(var(--main-adjuster) * (15/400));

    & input{
        width: 100%;
        height: 100%;
    }

}

.documents-item-title{
    color: white;
    padding-top: calc(var(--main-adjuster) * (6/400));
}

.documents-item-count{
    float: right;
    color: white;
    position: absolute;
    right: calc(var(--main-adjuster) * (16/400));
    font-size: calc(var(--main-adjuster) * (18/400));
    padding-top: calc(var(--main-adjuster) * (4/400));
}




.bottom-legal-item{
    width: 100%;
    display: flex;
    margin-bottom: calc(var(--main-adjuster) * (20/400));
}

.legal-item-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.legal-item-side{
    display: flex;
    flex-wrap: wrap;
    background: #111;
    width: calc(var(--main-adjuster) * (140/400));
    border-radius: calc(var(--main-adjuster) * (16/400));
    padding: calc(var(--main-adjuster) * (10/400));
    padding-top: calc(var(--main-adjuster) * (14/400));
    box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
}

.legal-item-title{
    width: 100%;
    color: white;
    text-align: center;
    margin-bottom: calc(var(--main-adjuster) * (5/400));
}

.legal-item-name{
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: calc(var(--main-adjuster) * (12/400));
}

.legal-item-middle{

}

.legal-item-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .20);
    width: calc(var(--main-adjuster) * (50/400));
    height: calc(var(--main-adjuster) * (50/400));
    border-radius: calc(var(--main-adjuster) * (50/400));
}

.legal-item-text{
    color: white;
    text-align: center;
    text-transform: uppercase;
    margin-top: calc(var(--main-adjuster) * (10/400));
    font-size: calc(var(--main-adjuster) * (12/400));
}


.bottom-fees-tab{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.bottom-fee-item{
    width: 100%;
    display: flex;
    background: #111;
    position: relative;
    justify-content: space-between;
    padding: calc(var(--main-adjuster) * (14/400));
    margin: calc(var(--main-adjuster) * (8/400)) 0;
    padding-top: calc(var(--main-adjuster) * (20/400));
    border-radius: calc(var(--main-adjuster) * (16/400));
}

.bottom-fee-title{
    color: white;
}

.bottom-fee-icon{
    color: white;
    display: flex;
    position: absolute;
    align-items: center;
    background: #171717;
    justify-content: center;
    top: calc(var(--main-adjuster) * (8/400));
    right: calc(var(--main-adjuster) * (8/400));
    width: calc(var(--main-adjuster) * (50/400));
    height: calc(var(--main-adjuster) * (50/400));
    font-size: calc(var(--main-adjuster) * (24/400));
    padding-top: calc(var(--main-adjuster) * (2/400));
    border-radius: calc(var(--main-adjuster) * (40/400));
}