#rl-d11-exam-hub {
    --rl-d11-blue: #0066CD;
    --rl-d11-blue-dark: #00468D;
    --rl-d11-green: #00A84E;
    --rl-d11-green-dark: #00863E;
    --rl-d11-red: #D93025;
    --rl-d11-yellow: #E37400;
    --rl-d11-yellow-dark: #C26300;
    --rl-d11-purple: #8E24AA;
    --rl-d11-teal: #0097A7;
    --rl-d11-gray: #5F6368;
    --rl-d11-text: #202124;
    --rl-d11-muted: #6B7280;
    --rl-d11-border: #D7DCE2;
    --rl-d11-bg: #F8FAFC;
    --rl-d11-info-bg: #F0F6FF;
    --rl-d11-white: #FFFFFF;
    --rl-d11-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    --rl-d11-shadow-around: none;
    --rl-d11-radius: 10px;

    width: calc(100% - 30px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    color: var(--rl-d11-text);
}

#rl-d11-exam-hub *,
#rl-d11-exam-hub *::before,
#rl-d11-exam-hub *::after {
    box-sizing: border-box;
}

#rl-d11-exam-hub a,
#rl-d11-exam-hub button {
    -webkit-tap-highlight-color: transparent;
}

#rl-d11-exam-hub a {
    text-decoration: none;
}

#rl-d11-exam-hub button {
    font-family: inherit;
}

#rl-d11-exam-hub .rl-d11-nav-grid {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    width: 100% !important;
    margin: 10px 0 !important;
}

#rl-d11-exam-hub .rl-d11-nav-grid-bottom {
    margin: 10px 0 !important;
}

#rl-d11-exam-hub .rl-d11-nav-left {
    display: flex;
    justify-content: flex-start;
}

#rl-d11-exam-hub .rl-d11-nav-center {
    display: flex;
    justify-content: center;
}

#rl-d11-exam-hub .rl-d11-nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    color: #6B7280 !important;
    border: 2px solid #6B7280 !important;
    border-radius: 10px !important;
    padding: 5px 10px !important;
    font-family: "Inter", sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1) !important;
    transition: background-color 0.2s, box-shadow 0.2s !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    user-select: none;
    appearance: none !important;
}

#rl-d11-exam-hub .rl-d11-nav-btn .rl-d11-svg-icon {
    display: none !important;
}

#rl-d11-exam-hub .rl-d11-nav-btn::before {
    content: "«";
    display: inline-block;
    margin-left: 0;
    color: currentColor;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

#rl-d11-exam-hub .rl-d11-nav-btn[data-rl-d11-action="scroll-down"]::before {
    transform: rotate(-90deg);
}

#rl-d11-exam-hub .rl-d11-nav-btn[data-rl-d11-action="scroll-up"]::before {
    transform: rotate(90deg);
}

@media (hover: hover) {
    #rl-d11-exam-hub .rl-d11-nav-btn:hover {
        background-color: #E6E9ED !important;
        border-color: #202124 !important;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0) !important;
        color: #202124 !important;
        text-decoration: none !important;
    }
}

#rl-d11-exam-hub .rl-d11-nav-btn:focus-visible {
    background-color: #E6E9ED !important;
    border-color: #202124 !important;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0) !important;
    color: #202124 !important;
    text-decoration: none !important;
    outline: none !important;
}

#rl-d11-exam-hub .rl-d11-nav-btn.is-clicked {
    pointer-events: none !important;
    filter: brightness(0.8) !important;
    box-shadow: none !important;
}

#rl-d11-exam-hub .rl-d11-svg-icon {
    display: block;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

#rl-d11-exam-hub .rl-d11-main-card {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
}

#rl-d11-exam-hub .rl-d11-main-card::before,
#rl-d11-exam-hub .rl-d11-main-card::after {
    content: none;
}

#rl-d11-exam-hub .rl-d11-hero,
#rl-d11-exam-hub .rl-d11-actions-grid {
    display: contents;
}

#rl-d11-exam-hub .rl-d11-exam-label {
    order: 0;
    flex: 0 0 100%;
    position: relative;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 -5px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--rl-d11-text);
    font-family: "Inter", sans-serif;
    font-size: 24px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
    cursor: default;
    user-select: none;
    isolation: isolate;
}

#rl-d11-exam-hub .rl-d11-exam-label-text {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(215, 220, 226, 0.5);
    border-radius: 10px;
    background-clip: padding-box;
    box-shadow: var(--rl-d11-shadow-around);
    color: #202124;
    line-height: 1;
    backdrop-filter: blur(5px) saturate(1.15);
    -webkit-backdrop-filter: blur(5px) saturate(1.15);
    overflow: hidden; /* <-- ДОБАВИТЬ */
}

#rl-d11-exam-hub .rl-d11-exam-label-text::before {
    content: none;
}

#rl-d11-exam-hub .rl-d11-exam-label::before {
    content: none;
}

#rl-d11-exam-hub .rl-d11-exam-label::after {
    content: none;
}

#rl-d11-exam-hub .rl-d11-main-action,
#rl-d11-exam-hub .rl-d11-action-card,
#rl-d11-exam-hub .rl-d11-material-card {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

#rl-d11-exam-hub .rl-d11-main-action,
#rl-d11-exam-hub .rl-d11-action-card {
        --rl-d11-card-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M20.2%2020.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04%202.03-.02%207.36%204.5%2011.9%204.54%204.52%209.87%206.54%2011.9%204.5Z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M15.7%2015.7c4.52-4.54%206.54-9.87%204.5-11.9-2.03-2.04-7.36-.02-11.9%204.5-4.52%204.54-6.54%209.87-4.5%2011.9%202.03%202.04%207.36.02%2011.9-4.5Z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");

    position: relative;
    overflow: hidden;
    flex: 0 1 calc((100% - 30px) / 3);
    min-width: 0;
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rl-d11-radius);
    border: 0;
        background:
        linear-gradient(
            to bottom,
            var(--rl-d11-blue) 0%,
            var(--rl-d11-teal) 52%,
            var(--rl-d11-green) 100%
        );
    background-size: 100% var(--rl-d11-buttons-gradient-height, 100%);
    background-position: 0 var(--rl-d11-button-gradient-y, 0);
    background-repeat: no-repeat;
    color: #FFFFFF;
    box-shadow: var(--rl-d11-shadow);
    padding: 16px 18px 16px 62px;
    text-align: center;
    isolation: isolate;
    transition: background-color 0.2s, box-shadow 0.2s, filter 0.2s, transform 0.2s;
}

#rl-d11-exam-hub .rl-d11-main-action::before,
#rl-d11-exam-hub .rl-d11-action-card::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    z-index: 1;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.94);
    transform: translateY(-50%);
    mask-image: var(--rl-d11-card-icon);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: var(--rl-d11-card-icon);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    pointer-events: none;
}

#rl-d11-exam-hub .rl-d11-main-action::after,
#rl-d11-exam-hub .rl-d11-action-card::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    z-index: 0;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-50%) scale(0.78);
    opacity: 1;
    pointer-events: none;
    animation: rl-d11-icon-pulse 1s linear infinite;
}

#rl-d11-exam-hub .rl-d11-main-action:hover,
#rl-d11-exam-hub .rl-d11-main-action:focus-visible,
#rl-d11-exam-hub .rl-d11-action-card:hover,
#rl-d11-exam-hub .rl-d11-action-card:focus-visible {
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0);
    filter: brightness(0.8);
}

#rl-d11-exam-hub .rl-d11-main-action:active,
#rl-d11-exam-hub .rl-d11-main-action.is-clicked,
#rl-d11-exam-hub .rl-d11-action-card:active,
#rl-d11-exam-hub .rl-d11-action-card.is-clicked {
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0);
    filter: brightness(0.8);
}

#rl-d11-exam-hub .rl-d11-action-title {
    position: relative;
    z-index: 1;
    display: block;
    color: inherit;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

#rl-d11-exam-hub .rl-d11-main-action .rl-d11-action-title {
    font-size: 16px;
    font-weight: 600;
}

#rl-d11-exam-hub .rl-d11-main-action {
    order: 1;
}

#rl-d11-exam-hub .rl-d11-action-teal {
    order: 2;
        --rl-d11-card-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4.5%203h15%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%203v16a2%202%200%200%200%202%202h8a2%202%200%200%200%202-2V3%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%2014h12%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

#rl-d11-exam-hub .rl-d11-action-blue {
    order: 4;
        --rl-d11-card-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%2018h8%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M3%2022h18%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14%2022a7%207%200%201%200%200-14h-1%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9%2014h2%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9%2012a2%202%200%200%201-2-2V6h6v4a2%202%200%200%201-2%202Z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12%206V3a1%201%200%200%200-1-1H9a1%201%200%200%200-1%201v3%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

#rl-d11-exam-hub .rl-d11-action-green {
    order: 3;
        --rl-d11-card-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9%202v17.5A2.5%202.5%200%200%201%206.5%2022A2.5%202.5%200%200%201%204%2019.5V2%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M20%202v17.5a2.5%202.5%200%200%201-2.5%202.5a2.5%202.5%200%200%201-2.5-2.5V2%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M3%202h7%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14%202h7%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9%2016H4%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M20%2016h-5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

#rl-d11-exam-hub .rl-d11-action-purple {
    order: 5;
        --rl-d11-card-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M14%202v6a2%202%200%200%200%20.245.96l5.51%2010.08A2%202%200%200%201%2018%2022H6a2%202%200%200%201-1.755-2.96l5.51-10.08A2%202%200%200%200%2010%208V2%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6.453%2015h11.094%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8.5%202h7%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

#rl-d11-exam-hub .rl-d11-action-yellow {
    order: 6;
        --rl-d11-card-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m10%2016%201.5%201.5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22m14%208-1.5-1.5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M15%202c-1.798%201.998-2.518%203.995-2.807%205.993%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22m16.5%2010.5%201%201%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22m17%206-2.891-2.891%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M2%2015c6.667-6%2013.333%200%2020-6%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22m20%209%20.891.891%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M3.109%2014.109%204%2015%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22m6.5%2012.5%201%201%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22m7%2018%202.891%202.891%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9%2022c1.798-1.998%202.518-3.995%202.807-5.993%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

#rl-d11-exam-hub .rl-d11-action-blue,
#rl-d11-exam-hub .rl-d11-action-teal,
#rl-d11-exam-hub .rl-d11-action-green,
#rl-d11-exam-hub .rl-d11-action-purple,
#rl-d11-exam-hub .rl-d11-action-yellow {
    color: #FFFFFF;
}

@keyframes rl-d11-icon-pulse {
    0%,
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1.05);
    }

    50% {
        opacity: 0;
        transform: translateY(-50%) scale(1.2);
    }
}

#rl-d11-exam-hub .rl-d11-materials-section {
    margin-top: 30px;
}

#rl-d11-exam-hub .rl-d11-section-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 10px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(215, 220, 226, 0.5);
    border-radius: 10px;
    background-clip: padding-box;
    box-shadow: var(--rl-d11-shadow-around);
    color: #202124;
    font-size: 24px;
    line-height: 1;
    backdrop-filter: blur(5px) saturate(1.15);
    -webkit-backdrop-filter: blur(5px) saturate(1.15);
    font-weight: 500;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    isolation: isolate;
    overflow: hidden; /* <-- ДОБАВИТЬ */
}

/* Анимация пробегающего блика */
@keyframes rl-d11-glass-glare {
    0%, 50% { /* Изменено с 70% на 50%, чтобы движение начиналось раньше и шло плавнее */
        transform: translateX(0) skewX(-25deg);
    }
    100% {
        transform: translateX(500%) skewX(-25deg);
    }
}

/* Применяем блик к обеим стеклянным плашкам */
#rl-d11-exam-hub .rl-d11-exam-label-text::after,
#rl-d11-exam-hub .rl-d11-section-title::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    /* Более мягкий градиент: расширены границы перехода, пиковая непрозрачность снижена до 0.4 */
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.15) 30%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.15) 70%,
        rgba(255, 255, 255, 0) 100%
    );
    /* Длительность увеличена до 5s, изменена функция плавности на ease-in-out */
    animation: rl-d11-glass-glare 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

#rl-d11-exam-hub .rl-d11-materials-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

#rl-d11-exam-hub .rl-d11-material-card {
    --rl-d11-material-accent: var(--rl-d11-blue);
    --rl-d11-material-border: var(--rl-d11-blue);
    --rl-d11-material-icon-bg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%2022a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h8a2.4%202.4%200%200%201%201.704.706l3.588%203.588A2.4%202.4%200%200%201%2020%208v12a2%202%200%200%201-2%202z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14%202v5a1%201%200%200%200%201%201h5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10%209H8%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M16%2013H8%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M16%2017H8%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");

    position: relative;
    overflow: hidden;
    isolation: isolate;
    flex: 0 1 calc((100% - 30px) / 3);
    width: auto;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--rl-d11-material-border);
    border-radius: var(--rl-d11-radius);
    background: #F0F6FF;
    color: #202124;
    box-shadow: var(--rl-d11-shadow);
    padding: 10px 16px 10px 56px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, filter 0.2s;
}

#rl-d11-exam-hub .rl-d11-material-card::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    z-index: 1;
    width: 24px;
    height: 24px;
    background: var(--rl-d11-material-accent);
    opacity: 1;
    transform: translateY(-50%) rotate(-3deg);
    transform-origin: center;
    mask-image: var(--rl-d11-material-icon-bg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: var(--rl-d11-material-icon-bg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    pointer-events: none;
    animation: rl-d11-material-icon-rock 1s ease-in-out infinite;
}

#rl-d11-exam-hub .rl-d11-material-card:hover,
#rl-d11-exam-hub .rl-d11-material-card:focus-visible {
    background: #F0F6FF;
    border-color: var(--rl-d11-material-border);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0);
    filter: brightness(0.8);
}

#rl-d11-exam-hub .rl-d11-material-card:active,
#rl-d11-exam-hub .rl-d11-material-card.is-clicked {
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0);
    filter: brightness(0.8);
}

#rl-d11-exam-hub .rl-d11-material-card-locked {
    --rl-d11-material-accent: var(--rl-d11-yellow);
    --rl-d11-material-border: var(--rl-d11-yellow);
    --rl-d11-material-icon-bg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2216%22%20r%3D%221%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2210%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M7%2010V7a5%205%200%200%201%2010%200v3%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");

    background: #FFFBF0;
}

#rl-d11-exam-hub .rl-d11-material-card-locked:hover,
#rl-d11-exam-hub .rl-d11-material-card-locked:focus-visible {
    background: #FFFBF0;
    border-color: var(--rl-d11-material-border);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0);
    filter: brightness(0.8);
}

#rl-d11-exam-hub .rl-d11-material-body {
    position: relative;
    z-index: 2;
    min-width: 0;
    width: 100%;
}

#rl-d11-exam-hub .rl-d11-material-title {
    display: block;
    width: 100%;
    color: #202124;
    font-family: "Inter", sans-serif;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    text-align: center;
    hyphens: none;
    -webkit-hyphens: none;
    overflow-wrap: break-word;
    word-break: normal;
}

@keyframes rl-d11-material-icon-rock {
    0%,
    100% {
        transform: translateY(-50%) rotate(-9deg);
    }
    50% {
        transform: translateY(-50%) rotate(9deg);
    }
}

#rl-d11-exam-hub .rl-d11-clickable.is-clicked {
    pointer-events: none;
}

div:where(.swal2-container.rl-d11-swal-container) {
    z-index: 50 !important;
    font-family: "Inter", sans-serif !important;
}

.swal2-container.swal2-top:has(.rl-d11-toast) {
    z-index: 50 !important;
    width: 100% !important;
    max-width: 100vw !important;
}

.rl-d11-toast {
    display: flex !important;
    background: #ffffff !important;
    border: 2px solid #E37400 !important;
    border-radius: 10px !important;
    padding: 10px 10px !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.18) !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 100% !important;
    width: auto !important;
}

.rl-d11-toast .swal2-title {
    color: #E37400 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    width: 100% !important;
}

.rl-d11-toast .swal2-html-container {
    color: #E37400 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    width: 100% !important;
}

.rl-d11-toast.swal2-show {
    animation: rl-d11-toast-show 0.3s ease-out forwards !important;
}

.rl-d11-toast.swal2-hide {
    animation: rl-d11-toast-hide 0.3s ease-in forwards !important;
}

@keyframes rl-d11-toast-show {
    0% {
        transform: translateY(-100px);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes rl-d11-toast-hide {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(-100px);
        opacity: 1;
    }
}

@media (max-width: 900px) {
    #rl-d11-exam-hub {
        width: calc(100% - 30px);
        padding-left: 0;
        padding-right: 0;
    }

#rl-d11-exam-hub .rl-d11-material-card {
        flex-basis: calc((100% - 15px) / 2);
    }

#rl-d11-exam-hub .rl-d11-main-action,
#rl-d11-exam-hub .rl-d11-action-card {
    flex-basis: calc((100% - 15px) / 2);
}

}

@media (max-width: 640px) {
#rl-d11-exam-hub {
    padding-top: 0;
    padding-bottom: 0;
}

#rl-d11-exam-hub .rl-d11-nav-grid {
    margin: 10px 0 !important;
}

#rl-d11-exam-hub .rl-d11-main-card {
    gap: 15px;
    padding: 0;
}

#rl-d11-exam-hub .rl-d11-exam-label {
    height: auto;
    padding: 0;
    font-size: 24px;
    line-height: 1;
    font-weight: 500;
}

#rl-d11-exam-hub .rl-d11-exam-label-text {
    padding: 10px 16px;
}

#rl-d11-exam-hub .rl-d11-exam-label::before {
    content: none;
}

#rl-d11-exam-hub .rl-d11-exam-label::after {
    content: none;
}

#rl-d11-exam-hub .rl-d11-main-action,
#rl-d11-exam-hub .rl-d11-action-card {
    flex-basis: 100%;
    min-height: 66px;
    padding: 13px 14px 13px 58px;
}

#rl-d11-exam-hub .rl-d11-action-title,
#rl-d11-exam-hub .rl-d11-main-action .rl-d11-action-title {
    font-size: 16px;
    font-weight: 600;
}

#rl-d11-exam-hub .rl-d11-section-title {
        font-size: 24px;
        margin-bottom: 10px;
        padding: 10px 16px;
    }

#rl-d11-exam-hub .rl-d11-materials-section {
    margin-top: 30px;
}

#rl-d11-exam-hub .rl-d11-material-card {
        flex-basis: 100%;
        min-height: auto;
        padding: 10px 16px 10px 56px;
    }

    #rl-d11-exam-hub .rl-d11-material-card::before {
        left: 16px;
        width: 24px;
        height: 24px;
    }

}

@media (prefers-reduced-motion: reduce) {
    #rl-d11-exam-hub *,
    #rl-d11-exam-hub *::before,
    #rl-d11-exam-hub *::after,
    .rl-d11-toast {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* Desktop-only: align outer page width with Variants 7 without touching tablet/mobile rules */
@media (min-width: 901px) {
    #rl-d11-exam-hub {
        width: 100%;
    }
}