.rl-course-wrapper, .rl-lesson-wrapper, .rl-quiz-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.rl-admin-lesson-review-warning {
    background: #fff1f3;
    border: 1px solid #f1aeb5;
    border-left: 5px solid #dc3545;
    border-radius: 8px;
    color: #8a1f2d;
    font-weight: 700;
    margin: 0 0 18px;
    padding: 14px 16px;
}

.rl-locked-lesson-message {
    border: 1px solid #d7e4ec;
    border-radius: 8px;
    margin: 24px auto;
    max-width: 720px;
    padding: 22px;
}

.rl-locked-lesson-message h2 {
    margin: 0 0 8px;
}

.rl-locked-lesson-message p {
    margin: 0 0 16px;
}

.rl-locked-lesson-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rl-course-header {
    text-align: center;
    margin-bottom: 30px;
}

.rl-course-image {

    max-width: 400px;
    height: fit-content;
    max-height: 300px;
    object-fit: contain;
    border-radius: 8px;
    margin: 0 auto 20px auto;
    display: block;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 15px;
}

.rl-course-meta {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
    font-size: 18px;
}

.rl-price {
    font-weight: bold;
    color: #0073aa;
}

.rl-free {
    color: #28a745;
}

.rl-enroll-box {
    text-align: center;
    margin: 30px 0;
}

.rl-lessons-list {
    margin-top: 30px;
}

.rl-lesson-item {
    padding: 12px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rl-lesson-item.rl-complete {
    background: #f0fff4;
}

.rl-lesson-item.rl-locked {
    opacity: 0.6;
}

.rl-lesson-item a {
    text-decoration: none;
    color: #0073aa;
    font-weight: 500;
}

.rl-lesson-item a:hover {
    text-decoration: underline;
}

.rl-lesson-content {
    margin-bottom: 30px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.rl-video-container {
    position: relative;
    overflow: hidden;
    margin: 0 auto 20px;
    max-width: 960px;
}

.rl-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.rl-video-embed {
    padding-bottom: 56.25%;
    height: 0;
}

.rl-video-direct {
    height: auto;
}

.rl-video-direct video {
    width: 100%;
    height: auto;
    display: block;
    max-height: 520px;
}

.rl-video-direct video::cue,
.rl-lesson-video video::cue {
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.35;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.rl-lesson-wrapper .video-js.rl-videojs-player {
    background: #111827;
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
    color: #ffffff;
    overflow: hidden;
    width: 100%;
}

.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-tech {
    background: #111827;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover;
    width: 100% !important;
}

.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-poster img {
    object-fit: cover;
}

.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-control-bar {
    align-items: center;
    background: rgba(32, 44, 40, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    bottom: 16px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
    color: #ffffff;
    height: 44px;
    left: 50%;
    max-width: calc(100% - 48px);
    overflow: visible;
    padding: 0 10px;
    right: auto;
    text-shadow: none;
    transform: translateX(-50%);
    transition: opacity 0.16s ease, visibility 0.16s ease;
    width: min(86%, 880px);
}

@media (hover: hover) and (pointer: fine) {
    .rl-lesson-wrapper .video-js.rl-videojs-player.vjs-has-started:not(:hover):not(:focus-within) .vjs-control-bar {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }
}

.rl-lesson-wrapper .video-js.rl-videojs-player:hover .vjs-control-bar,
.rl-lesson-wrapper .video-js.rl-videojs-player:focus-within .vjs-control-bar {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

@supports (backdrop-filter: blur(10px)) {
    .rl-lesson-wrapper .video-js.rl-videojs-player .vjs-control-bar {
        backdrop-filter: blur(12px);
    }
}

.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-control-bar button,
.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-control-bar .vjs-control {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}

.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-control:hover,
.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-control:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-control,
.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-time-control,
.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-button > .vjs-icon-placeholder::before {
    color: #ffffff !important;
    text-shadow: none !important;
}

.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-control-bar .vjs-button > .vjs-icon-placeholder::before {
    line-height: 42px !important;
}

.rl-lesson-wrapper .video-js.rl-videojs-player.vjs-playing .vjs-play-control .vjs-icon-placeholder::before {
    content: "\f103";
}

.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-play-progress,
.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-volume-level {
    background: var(--rl-course-accent, var(--rl-course-button, #5eead4));
}

.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-slider {
    background: rgba(255, 255, 255, 0.28);
}

.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-load-progress,
.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-load-progress div {
    background: rgba(255, 255, 255, 0.18);
}

.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-progress-control {
    min-width: 10em;
}

.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-time-control {
    font-size: 1.1em;
    padding-left: 0.6em;
    padding-right: 0.6em;
}

.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-volume-panel {
    color: #ffffff !important;
}

.rl-lesson-wrapper .video-js.rl-videojs-player .rl-video-audio-select-wrap {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    height: 100%;
    padding: 0 4px !important;
    width: auto;
}

.rl-lesson-wrapper .video-js.rl-videojs-player .rl-video-audio-select {
    appearance: none;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    box-shadow: none;
    color: #ffffff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    height: 28px;
    line-height: 1;
    max-width: 112px;
    min-height: 0;
    padding: 0 18px 0 9px;
}

.rl-lesson-wrapper .video-js.rl-videojs-player .rl-video-audio-select:focus {
    border-color: var(--rl-course-accent, var(--rl-course-button, #5eead4));
    outline: 2px solid rgba(94, 234, 212, 0.28);
    outline-offset: 1px;
}

.rl-lesson-wrapper .video-js.rl-videojs-player .rl-video-audio-select option {
    background: #ffffff;
    color: #111827;
}

.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-volume-panel-vertical .vjs-volume-control {
    width: 3.2em;
}

.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-volume-panel-vertical .vjs-volume-bar.vjs-slider-vertical {
    width: 0.65em;
}

.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-volume-panel-vertical .vjs-volume-level {
    width: 100%;
}

.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-big-play-button {
    background: rgba(32, 44, 40, 0.66);
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
    color: #ffffff;
    height: 76px;
    line-height: 72px;
    margin-left: -38px;
    margin-top: -38px;
    width: 76px;
}

.rl-lesson-wrapper .video-js.rl-videojs-player:hover .vjs-big-play-button,
.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-big-play-button:focus {
    background: rgba(32, 44, 40, 0.86);
    border-color: var(--rl-course-accent, var(--rl-course-button, #5eead4));
    color: #ffffff;
}

.rl-lesson-wrapper .video-js.rl-videojs-player.vjs-has-started .vjs-big-play-button,
.rl-lesson-wrapper .video-js.rl-videojs-player.vjs-playing .vjs-big-play-button {
    display: none !important;
}

.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-text-track-cue {
    bottom: var(--rl-caption-bottom, 6px) !important;
    height: auto !important;
    left: 50% !important;
    max-width: calc(100% - 32px) !important;
    right: auto !important;
    text-align: center !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
}

html.rl-dark-mode body .rl-quiz-wrapper .rl-check-answer,
html.rl-dark-mode body .rl-int-fillinline .rl-check-fill {
    background: var(--rl-course-button, #0073aa) !important;
    border-color: var(--rl-course-button, #0073aa) !important;
    color: #ffffff !important;
}

html.rl-dark-mode body .rl-quiz-wrapper .rl-check-answer:hover,
html.rl-dark-mode body .rl-quiz-wrapper .rl-check-answer:focus-visible,
html.rl-dark-mode body .rl-int-fillinline .rl-check-fill:hover,
html.rl-dark-mode body .rl-int-fillinline .rl-check-fill:focus-visible {
    background: var(--rl-course-button, #005a87) !important;
    border-color: var(--rl-course-button, #005a87) !important;
    color: #ffffff !important;
}

.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-text-track-cue > div {
    background: rgba(15, 23, 42, var(--rl-caption-bg-opacity, 0.78)) !important;
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    color: #ffffff !important;
    display: inline-block !important;
    font-size: var(--rl-caption-font-size, 0.88rem) !important;
    line-height: var(--rl-caption-line-height, 1.3) !important;
    padding: 2px 7px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65) !important;
}

.rl-lesson-wrapper .video-js.rl-videojs-player .vjs-text-track-display {
    bottom: var(--rl-caption-bottom, 6px);
}

.rl-lesson-wrapper .video-js.rl-videojs-player video::-webkit-media-text-track-display {
    transform: translateY(0);
}

@media (max-width: 640px) {
    .rl-lesson-wrapper .video-js.rl-videojs-player {
        border-radius: 10px;
    }

    .rl-lesson-wrapper .video-js.rl-videojs-player .vjs-control-bar {
        bottom: 10px;
        height: 40px;
        max-width: calc(100% - 20px);
        opacity: 1;
        padding: 0 6px;
        pointer-events: auto;
        visibility: visible;
        width: calc(100% - 20px);
    }

    .rl-lesson-wrapper .video-js.rl-videojs-player .vjs-time-control,
    .rl-lesson-wrapper .video-js.rl-videojs-player .vjs-volume-panel {
        display: none;
    }

    .rl-lesson-wrapper .video-js.rl-videojs-player .vjs-control-bar .vjs-button > .vjs-icon-placeholder::before {
        line-height: 40px !important;
    }

    .rl-lesson-wrapper .video-js.rl-videojs-player .vjs-progress-control {
        min-width: 4em;
    }

    .rl-lesson-wrapper .video-js.rl-videojs-player .rl-video-audio-select {
        font-size: 10px;
        max-width: 82px;
        padding-left: 7px;
        padding-right: 12px;
    }

    .rl-lesson-wrapper .video-js.rl-videojs-player .vjs-text-track-display {
        bottom: var(--rl-caption-bottom, 5px);
    }

    .rl-lesson-wrapper .video-js.rl-videojs-player .vjs-text-track-cue > div {
        font-size: min(var(--rl-caption-font-size, 0.88rem), 0.72rem) !important;
        line-height: min(var(--rl-caption-line-height, 1.3), 1.18) !important;
        padding: 1px 5px !important;
    }

    .rl-lesson-wrapper .video-js.rl-videojs-player video::-webkit-media-text-track-display {
        transform: translateY(0);
    }
}

.rl-video-play-wrap {
    display: inline-block;
    max-width: 100%;
    position: relative;
}

.rl-course-review-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    color: #172033;
    margin: 22px 0 0;
    max-width: 760px;
    padding: 20px;
}

.rl-course-review-inline {
    max-width: 860px;
}

.rl-course-review-banner {
    align-items: center;
    background: rgba(0, 124, 186, 0.08);
    border: 1px solid rgba(0, 124, 186, 0.22);
    border-radius: 8px;
    color: #172033;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin: 0 0 22px;
    padding: 14px 16px;
}

.rl-course-review-banner strong,
.rl-course-review-banner span {
    display: block;
}

.rl-course-review-banner span {
    color: #475569;
    font-size: 0.94rem;
    margin-top: 2px;
}

.rl-course-review-banner-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.rl-course-review-banner-actions .rl-btn {
    padding: 8px 14px;
    white-space: nowrap;
}

.rl-course-review-banner-dismiss {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 999px;
    color: #172033;
    cursor: pointer;
    display: inline-flex;
    font-size: 20px;
    height: 32px;
    justify-content: center;
    line-height: 1;
    width: 32px;
}

.rl-course-review-banner-dismiss:hover,
.rl-course-review-banner-dismiss:focus {
    background: var(--rl-course-button, #0b7fab);
    color: #ffffff;
}

.rl-course-review-banner-status {
    color: #64748b;
    font-size: 0.86rem;
}

.rl-course-review-banner-status.rl-error {
    color: #b91c1c;
}

.rl-course-review-modal {
    align-items: center;
    display: none;
    inset: 0;
    justify-content: center;
    padding: 18px;
    position: fixed;
    z-index: 10020;
}

.rl-course-review-modal-open {
    display: flex;
}

.rl-course-review-backdrop {
    background: rgba(15, 23, 42, 0.58);
    inset: 0;
    position: absolute;
}

.rl-course-ack-modal {
    align-items: center;
    display: none;
    inset: 0;
    justify-content: center;
    padding: 18px;
    position: fixed;
    z-index: 10030;
}

.rl-course-ack-modal-open {
    display: flex;
}

.rl-course-ack-backdrop {
    background: rgba(15, 23, 42, 0.58);
    inset: 0;
    position: absolute;
}

.rl-course-ack-panel {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    box-shadow: 0 18px 60px rgba(15, 23, 42, 0.18);
    color: #172033;
    max-height: calc(100vh - 36px);
    overflow: auto;
    padding: 24px;
    position: relative;
    width: min(560px, 100%);
    z-index: 1;
}

.rl-course-ack-panel h2 {
    color: var(--rl-course-primary, #007cba);
    font-size: 1.35rem;
    margin: 0 0 12px;
}

.rl-course-ack-copy {
    color: #475569;
    line-height: 1.55;
}

.rl-course-ack-copy p {
    margin: 0 0 12px;
}

.rl-course-ack-check {
    align-items: flex-start;
    color: #172033;
    display: flex;
    font-weight: 700;
    gap: 10px;
    margin: 18px 0;
}

.rl-course-ack-check input {
    margin-top: 3px;
}

.rl-course-ack-actions {
    display: flex;
    justify-content: flex-end;
}

.rl-course-ack-status {
    color: #64748b;
    font-size: 0.92rem;
    margin-top: 10px;
    min-height: 20px;
}

.rl-course-ack-status.rl-error {
    color: #b91c1c;
}

.rl-course-ack-locked {
    background: rgba(0, 124, 186, 0.06);
    border: 1px solid rgba(0, 124, 186, 0.22);
    border-radius: 8px;
    color: #334155;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 20px;
    padding: 16px;
}

.rl-course-review-modal-panel {
    margin: 0;
    max-height: calc(100vh - 36px);
    overflow: auto;
    position: relative;
    width: min(760px, 100%);
    z-index: 1;
}

.rl-course-review-close {
    align-items: center;
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    color: #172033;
    cursor: pointer;
    display: inline-flex;
    font-size: 22px;
    height: 34px;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: 12px;
    top: 12px;
    width: 34px;
}

.rl-course-review-close:hover,
.rl-course-review-close:focus {
    background: var(--rl-course-button, #0b7fab);
    color: #ffffff;
}

.rl-course-review-card h3 {
    font-size: 1.25rem;
    margin: 0 0 6px;
    padding-right: 38px;
}

.rl-course-review-card p {
    color: #475569;
    margin: 0;
}

.rl-course-review-sentiment {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
}

.rl-review-choice {
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.16);
    border-radius: 6px;
    color: #172033;
    cursor: pointer;
    font-weight: 700;
    padding: 9px 14px;
}

.rl-review-choice:hover,
.rl-review-choice:focus,
.rl-review-choice-active {
    background: var(--rl-course-button, #0b7fab);
    border-color: var(--rl-course-button, #0b7fab);
    color: #ffffff;
}

.rl-course-review-form {
    border-top: 1px solid rgba(15, 23, 42, 0.1);
    margin-top: 16px;
    padding-top: 16px;
}

.rl-review-rating-row,
.rl-review-text-label {
    display: block;
    font-weight: 700;
    margin: 0 0 12px;
}

.rl-review-rating-row select,
.rl-review-text-label textarea {
    border: 1px solid rgba(15, 23, 42, 0.22);
    border-radius: 6px;
    display: block;
    margin-top: 6px;
    max-width: 100%;
    padding: 10px;
    width: 100%;
}

.rl-course-review-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rl-course-review-status {
    color: #475569;
    font-weight: 700;
    margin-top: 10px;
}

.rl-course-review-status.rl-error {
    color: #b91c1c;
}

.rl-course-review-thanks,
.rl-course-review-submitted {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rl-public-reviews {
    margin: 28px 0;
}

.rl-public-reviews-header h2 {
    margin: 0 0 14px;
}

.rl-public-reviews-empty {
    color: #64748b;
}

.rl-public-reviews-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.rl-public-review-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    color: #172033;
    padding: 18px;
}

.rl-public-review-stars {
    color: #d97706;
    font-size: 1rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.rl-public-review-card p {
    color: #334155;
    margin: 0 0 14px;
}

.rl-public-review-card footer {
    color: #64748b;
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    gap: 2px;
}

.rl-public-review-card footer strong {
    color: #172033;
}

.rl-dark-mode .rl-course-review-card {
    background: #111827;
    border-color: rgba(148, 163, 184, 0.28);
    color: #f8fafc;
}

.rl-dark-mode .rl-course-review-banner {
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(125, 211, 252, 0.22);
    color: #f8fafc;
}

.rl-dark-mode .rl-course-review-card p,
.rl-dark-mode .rl-course-review-status,
.rl-dark-mode .rl-course-review-banner span,
.rl-dark-mode .rl-course-review-banner-status {
    color: #cbd5e1;
}

.rl-dark-mode .rl-review-choice {
    background: #1f2937;
    border-color: rgba(148, 163, 184, 0.34);
    color: #f8fafc;
}

.rl-dark-mode .rl-review-rating-row select,
.rl-dark-mode .rl-review-text-label textarea {
    background: #0f172a;
    border-color: rgba(148, 163, 184, 0.34);
    color: #f8fafc;
}

.rl-dark-mode .rl-course-review-close {
    background: #1f2937;
    border-color: rgba(148, 163, 184, 0.34);
    color: #f8fafc;
}

.rl-dark-mode .rl-course-review-banner-dismiss {
    background: #1f2937;
    border-color: rgba(148, 163, 184, 0.34);
    color: #f8fafc;
}

.rl-dark-mode .rl-course-ack-panel {
    background: #111827;
    border-color: rgba(148, 163, 184, 0.28);
    color: #f8fafc;
}

.rl-dark-mode .rl-course-ack-copy,
.rl-dark-mode .rl-course-ack-check,
.rl-dark-mode .rl-course-ack-status,
.rl-dark-mode .rl-course-ack-locked {
    color: #e5e7eb;
}

.rl-dark-mode .rl-course-ack-locked {
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(125, 211, 252, 0.22);
}

.rl-dark-mode .rl-public-review-card {
    background: #111827;
    border-color: rgba(148, 163, 184, 0.28);
    color: #f8fafc;
}

.rl-dark-mode .rl-public-reviews-empty,
.rl-dark-mode .rl-public-review-card p,
.rl-dark-mode .rl-public-review-card footer {
    color: #cbd5e1;
}

.rl-dark-mode .rl-public-review-card footer strong {
    color: #f8fafc;
}

.rl-lesson-video iframe,
.rl-lesson-video video,
.rl-lesson-video .rl-video-play-wrap,
.rl-lesson-content .rl-video-play-wrap,
.rl-lesson-content .wp-video {
    display: block;
    margin: 0 auto 20px;
    max-width: 100%;
}

.rl-lesson-video iframe {
    max-width: 960px;
    width: 100%;
}

.rl-lesson-video .rl-video-play-wrap,
.rl-lesson-content .rl-video-play-wrap,
.rl-lesson-content .wp-video {
    width: fit-content;
}

.rl-video-direct .rl-video-play-wrap {
    display: block;
}

.rl-video-play-overlay {
    align-items: center;
    background: rgba(0, 0, 0, 0.58) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 999px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    height: 82px;
    justify-content: center;
    left: 50%;
    line-height: 1 !important;
    max-width: 82px !important;
    min-height: 82px !important;
    min-width: 82px !important;
    opacity: 1;
    padding: 0 !important;
    pointer-events: auto;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.18s ease, transform 0.18s ease;
    width: 82px;
    z-index: 4;
}

.rl-video-play-overlay:hover,
.rl-video-play-overlay:focus {
    background: rgba(0, 0, 0, 0.72) !important;
    transform: translate(-50%, -50%) scale(1.04);
}

.rl-video-play-overlay.rl-is-hidden {
    opacity: 0;
    pointer-events: none;
}

.rl-video-play-overlay span {
    background: #ffffff;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    display: block;
    height: 34px;
    margin: 0 auto;
    width: 28px;
}

.rl-lesson-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #eee;
}

.rl-nav-left a, .rl-nav-right a {
    text-decoration: none;
    color: #0073aa;
}

.rl-btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s;
}

.rl-btn-primary {
    background: var(--rl-course-button, #0073aa) !important;
    border-color: var(--rl-course-button, #0073aa) !important;
    color: #fff !important;
}

.rl-btn-primary:hover {
    background: var(--rl-course-button, #005a87) !important;
    border-color: var(--rl-course-button, #005a87) !important;
    color: #fff !important;
}


.rl-btn-secondary {
    background: transparent !important;
    color: var(--rl-course-primary, #333) !important;
    border: 1px solid var(--rl-course-primary, #ccc) !important;
}

.rl-btn-secondary:hover {
    background: color-mix(in srgb, var(--rl-course-primary, #e0e0e0) 12%, transparent) !important;
    color: var(--rl-course-primary, #333) !important;
}

.rl-audio-btn {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding-left: 0;
    padding-right: 0;
    width: 44px;
}

.rl-audio-btn.rl-audio-loading {
    min-width: 44px;
}

.rl-audio-btn.rl-audio-loading,
.rl-audio-btn.rl-audio-playing {
    background: color-mix(in srgb, var(--rl-course-primary, #0073aa) 14%, #fff) !important;
}

.rl-audio-btn[hidden],
.rl-audio-restart-btn[hidden],
.rl-audio-restart-btn:disabled {
    display: none !important;
}

.rl-audio-control-wrap {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    position: relative;
}

.rl-audio-control-wrap::before {
    bottom: 100%;
    content: "";
    height: 12px;
    left: -12px;
    position: absolute;
    right: -12px;
}

.rl-audio-restart-btn {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding-left: 12px;
    padding-right: 12px;
}

.rl-lesson-wrapper .rl-audio-btn,
.rl-lesson-wrapper .rl-audio-restart-btn {
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, 0.16) !important;
    box-shadow: none !important;
    color: var(--rl-course-primary, #007cba) !important;
}

.rl-lesson-wrapper .rl-audio-btn:hover,
.rl-lesson-wrapper .rl-audio-restart-btn:hover,
.rl-lesson-wrapper .rl-audio-btn:focus-visible,
.rl-lesson-wrapper .rl-audio-restart-btn:focus-visible {
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.22) !important;
    color: var(--rl-course-primary, #007cba) !important;
}

.rl-lesson-wrapper .rl-audio-btn.rl-audio-loading,
.rl-lesson-wrapper .rl-audio-btn.rl-audio-playing {
    background: #fff !important;
    border-color: var(--rl-course-primary, #007cba) !important;
}

.rl-audio-volume-popover {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 8px;
    bottom: calc(100% + 4px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    color: #0f172a;
    display: flex;
    left: 50%;
    opacity: 0;
    padding: 10px 12px;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    visibility: hidden;
    width: 190px;
    z-index: 40;
}

.rl-audio-control-wrap .rl-audio-btn[data-rl-tooltip]::before,
.rl-audio-control-wrap .rl-audio-btn[data-rl-tooltip]::after {
    display: none !important;
}

.rl-audio-volume-popover label {
    align-items: center;
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr auto;
    margin: 0;
    width: 100%;
}

.rl-audio-volume-popover span {
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.rl-audio-volume-popover input[type="range"] {
    accent-color: var(--rl-course-primary, #007cba);
    grid-column: 1 / -1;
    margin: 0;
    width: 100%;
}

.rl-audio-volume-popover strong {
    color: var(--rl-course-primary, #007cba);
    font-size: 12px;
    font-weight: 800;
}

html.rl-dark-mode body .rl-audio-volume-popover {
    background: #111827;
    border-color: rgba(148, 163, 184, 0.24);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
    color: #f8fafc;
}

html.rl-dark-mode body .rl-audio-volume-popover span {
    color: #cbd5e1;
}

.rl-audio-control-wrap:hover .rl-audio-volume-popover,
.rl-audio-btn:hover + .rl-audio-volume-popover,
.rl-audio-btn:focus-visible + .rl-audio-volume-popover,
.rl-audio-volume-popover:hover,
.rl-audio-volume-popover:focus-within {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    visibility: visible;
}

.rl-lesson-wrapper [data-rl-tooltip] {
    position: relative;
}

.rl-lesson-wrapper [data-rl-tooltip]::after {
    background: #0f172a;
    border-radius: 6px;
    bottom: calc(100% + 8px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
    color: #fff;
    content: attr(data-rl-tooltip);
    font-size: 12px;
    font-weight: 700;
    left: 50%;
    line-height: 1.2;
    opacity: 0;
    padding: 6px 8px;
    pointer-events: none;
    position: absolute;
    text-align: center;
    transform: translate(-50%, 4px);
    transition: opacity 0.14s ease, transform 0.14s ease;
    white-space: nowrap;
    z-index: 1000;
}

.rl-lesson-wrapper [data-rl-tooltip]:hover::after,
.rl-lesson-wrapper [data-rl-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.rl-lesson-wrapper .rl-slide-progress[data-rl-tooltip] {
    overflow: visible !important;
}

.rl-lesson-wrapper .rl-slide-progress[data-rl-tooltip] .rl-slide-progress-bar {
    border-radius: inherit;
}

.rl-mark-complete.rl-completed {
    background: #28a745;
}

/* ===== MODERN QUIZ UI ===== */
.rl-quiz-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.rl-quiz-header {
    text-align: center;
    margin-bottom: 30px;
}

.rl-quiz-header h1 {
    font-size: 28px;
    margin-bottom: 8px;
}

.rl-quiz-progress-wrap {
    margin-bottom: 8px;
}

.rl-quiz-progress {
    height: 10px;
    background: #e9ecef;
    border-radius: 5px;
    overflow: hidden;
}

.rl-quiz-progress-bar {
    height: 100%;
    background: #0073aa;
    transition: width 0.4s cubic-bezier(.4, 0, .2, 1);
    border-radius: 5px;
}

.rl-quiz-counter {
    font-size: 13px;
    color: #6c757d;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.rl-quiz-mode-badge {
    display: inline-block;
    background: #e3f2fd;
    color: #1565c0;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
}

.rl-quiz-timer {
    font-size: 18px;
    font-weight: 700;
    color: #d32f2f;
    margin-bottom: 15px;
    text-align: center;
}

.rl-quiz-attempts {
    color: #666;
    margin-bottom: 20px;
    text-align: center;
    font-size: 14px;
}

/* Question cards */
.rl-question {
    display: none;
    animation: rl-fadeInUp 0.35s ease;
}

.rl-question.rl-active {
    display: block;
}

.rl-question-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
}

.rl-question-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.rl-question-number {
    width: 36px;
    height: 36px;
    background: #0073aa;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

.rl-question-text {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.35;
    flex: 1;
}

.rl-points {
    color: #0073aa;
    font-size: 13px;
    font-weight: 700;
    display: inline-block;
    background: #e3f2fd;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 24px;
}

.rl-question-image {
    margin: 20px 0;
    text-align: center;
}

.rl-question-image img {
    max-width: 100%;
    max-height: 420px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Answer options */
.rl-answer-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rl-answer-label {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.18s ease;
    font-size: 16px;
    color: #333;
    line-height: 1.4;
}

.rl-answer-label:hover {
    background: #e9ecef;
    border-color: #dee2e6;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.rl-answer-label input[type="radio"] {
    display: none;
}

.rl-radio-circle {
    width: 24px;
    height: 24px;
    border: 2px solid #adb5bd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.rl-radio-circle::after {
    content: '';
    width: 12px;
    height: 12px;
    background: #0073aa;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s cubic-bezier(.34, 1.56, .64, 1);
}

.rl-answer-label.selected {
    background: #e3f2fd;
    border-color: #0073aa;
}

.rl-answer-label.selected .rl-radio-circle {
    border-color: #0073aa;
}

.rl-answer-label.selected .rl-radio-circle::after {
    opacity: 1;
    transform: scale(1);
}

.rl-answer-label.correct {
    background: #d4edda;
    border-color: #28a745;
    animation: rl-pop 0.3s ease;
}

.rl-answer-label.correct .rl-radio-circle {
    border-color: #28a745;
}

.rl-answer-label.correct .rl-radio-circle::after {
    opacity: 1;
    transform: scale(1);
    background: #28a745;
}

.rl-answer-label.wrong {
    background: #f8d7da;
    border-color: #dc3545;
    animation: rl-shake 0.4s ease;
}

.rl-answer-label.wrong .rl-radio-circle {
    border-color: #dc3545;
}

.rl-answer-label.wrong .rl-radio-circle::after {
    opacity: 1;
    transform: scale(1);
    background: #dc3545;
}

/* Text inputs */
.rl-text-answer, .rl-essay-answer {
    width: 100%;
    padding: 16px;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 16px;
    transition: border-color 0.2s;
    background: #fff;
}

.rl-text-answer:focus, .rl-essay-answer:focus {
    outline: none;
    border-color: #0073aa;
}

.rl-essay-answer {
    min-height: 160px;
    resize: vertical;
}

/* Matching */
.rl-matching-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
    padding: 14px 18px;
    background: #f8f9fa;
    border-radius: 12px;
}

.rl-match-left {
    font-weight: 600;
    min-width: 150px;
    color: #333;
}

.rl-matching-row select {
    padding: 10px 14px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 15px;
    min-width: 200px;
    background: #fff;
}

/* Navigation */
.rl-quiz-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    gap: 12px;
}

.rl-quiz-nav .rl-btn {
    padding: 14px 28px;
    font-size: 16px;
    border-radius: 10px;
}

.rl-btn-prev {
    background: #f0f0f0;
    color: #333;
    border: 1px solid #ddd;
}

.rl-btn-prev:hover {
    background: #e0e0e0;
}

.rl-btn-prev:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Actions & feedback */
.rl-question-actions {
    margin-top: 24px;
}

.rl-check-answer {
    padding: 12px 24px;
    font-size: 15px;
    border-radius: 10px;
}

.rl-question-feedback {
    margin-top: 20px;
    padding: 20px;
    border-radius: 14px;
    font-size: 16px;
    display: none;
}

.rl-question-feedback.visible {
    display: block;
    animation: rl-fadeInUp 0.3s ease;
}

.rl-feedback-correct {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 10px;
}

.rl-feedback-incorrect {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 10px;
}

.rl-feedback-explanation {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 15px;
    color: #555;
}

.rl-inline-notice {
    display: none;
    margin-top: 10px;
    border-radius: 4px;
}

.rl-lesson-nav .rl-inline-notice,
.rl-slide-nav .rl-inline-notice {
    align-items: center;
    align-self: center;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #475569 !important;
    display: none;
    font-size: 13px;
    font-weight: 600;
    margin: 0 !important;
    max-width: 180px;
    padding: 0 !important;
    white-space: nowrap;
}

/* Unified Rally Learn forms */
.rl-login-container form,
.rl-dashboard-container form,
.rl-quiz-form,
.rl-partner-signup,
.rl-org-signup,
.rl-org-dashboard form,
.rl-student-affiliate-dashboard,
.rl-certificates,
.rl-graduation-actions,
.rl-scenario-ui {
    --rl-form-border: #d7dde5;
    --rl-form-border-focus: #0073aa;
    --rl-form-bg: #fff;
    --rl-form-muted: #667085;
    --rl-form-shadow: rgba(0, 115, 170, 0.14);
}

.rl-login-container input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.rl-dashboard-container input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.rl-dashboard-container select,
.rl-dashboard-container textarea,
.rl-quiz-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.rl-quiz-form select,
.rl-quiz-form textarea,
.rl-partner-signup input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.rl-partner-signup select,
.rl-partner-signup textarea,
.rl-org-signup input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.rl-org-signup select,
.rl-org-signup textarea,
.rl-org-dashboard input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.rl-org-dashboard select,
.rl-org-dashboard textarea,
.rl-certificates select,
.rl-graduation-actions select,
.rl-scenario-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.rl-scenario-ui select,
.rl-scenario-ui textarea {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    background: var(--rl-form-bg);
    border: 1px solid var(--rl-form-border);
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    color: inherit;
    font-size: 15px;
    line-height: 1.4;
    padding: 10px 12px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.rl-certificates select,
.rl-graduation-actions select {
    width: auto;
    min-width: 190px;
}

.rl-graduation-actions .rl-download-certificate-btn {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    line-height: 1.2;
}

.rl-login-container textarea,
.rl-dashboard-container textarea,
.rl-quiz-form textarea,
.rl-partner-signup textarea,
.rl-org-signup textarea,
.rl-org-dashboard textarea,
.rl-scenario-ui textarea {
    min-height: 110px;
    resize: vertical;
}

.rl-login-container input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):focus,
.rl-dashboard-container input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):focus,
.rl-dashboard-container select:focus,
.rl-dashboard-container textarea:focus,
.rl-quiz-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):focus,
.rl-quiz-form select:focus,
.rl-quiz-form textarea:focus,
.rl-partner-signup input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):focus,
.rl-partner-signup select:focus,
.rl-partner-signup textarea:focus,
.rl-org-signup input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):focus,
.rl-org-signup select:focus,
.rl-org-signup textarea:focus,
.rl-org-dashboard input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):focus,
.rl-org-dashboard select:focus,
.rl-org-dashboard textarea:focus,
.rl-certificates select:focus,
.rl-graduation-actions select:focus,
.rl-scenario-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):focus,
.rl-scenario-ui select:focus,
.rl-scenario-ui textarea:focus {
    border-color: var(--rl-form-border-focus);
    box-shadow: 0 0 0 3px var(--rl-form-shadow);
    outline: none;
}

.rl-org-signup input[aria-invalid="true"],
.rl-org-signup select[aria-invalid="true"],
.rl-org-signup textarea[aria-invalid="true"],
.rl-partner-signup input[aria-invalid="true"],
.rl-partner-signup select[aria-invalid="true"],
.rl-partner-signup textarea[aria-invalid="true"],
.rl-org-invite-register input[aria-invalid="true"],
.rl-org-invite-register select[aria-invalid="true"],
.rl-org-invite-register textarea[aria-invalid="true"],
.rl-checkout-register input[aria-invalid="true"],
.rl-checkout-register select[aria-invalid="true"],
.rl-checkout-register textarea[aria-invalid="true"] {
    border-color: #b42318;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.14);
}

.rl-field-error {
    color: #b42318;
    display: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 6px;
}

.rl-field-help {
    color: var(--rl-form-muted, #667085);
    display: block;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 6px;
}

.rl-login-container label,
.rl-dashboard-container label,
.rl-quiz-form label,
.rl-partner-signup label,
.rl-org-signup label,
.rl-org-dashboard label,
.rl-scenario-ui label {
    color: inherit;
}

.rl-login-container label,
.rl-dashboard-container form label,
.rl-partner-signup label,
.rl-org-signup label,
.rl-org-dashboard form label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
}

.rl-partner-signup,
.rl-org-signup,
.rl-org-dashboard > form {
    width: 100%;
    max-width: none;
    background: #fff;
    border: 1px solid #e0e6ee;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(16, 24, 40, 0.06);
    padding: 26px;
}

.rl-login-container {
    width: 100%;
    max-width: none;
    background: #fff;
    border: 1px solid #e0e6ee;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(16, 24, 40, 0.06);
    padding: 26px;
}

.rl-login-container .rl-org-invite-register .rl-btn,
.rl-login-container .rl-checkout-register .rl-btn {
    width: 100%;
}

.rl-captcha-field {
    margin-bottom: 18px;
}

.rl-captcha-label {
    color: var(--rl-form-muted);
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 4px 0 7px;
}

.rl-captcha-field .cf-turnstile {
    display: block;
    max-width: 100%;
}

.rl-partner-signup p,
.rl-org-signup p,
.rl-org-dashboard > form p {
    margin: 0 0 18px;
}

.rl-org-package-picker {
    margin: 0 0 22px;
}

.rl-org-package-picker h3 {
    margin: 0 0 6px;
}

.rl-org-package-note {
    color: var(--rl-form-muted);
    margin: 0 0 14px !important;
}

.rl-org-package-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.rl-org-signup .rl-org-package-card {
    cursor: pointer;
    display: block;
    font-weight: inherit;
    margin: 0;
}

.rl-org-package-card input {
    opacity: 0;
    position: absolute;
}

.rl-org-package-card-body {
    background: #f8fafc;
    border: 1px solid #dce4ee;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    display: block;
    min-height: 144px;
    padding: 16px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.rl-org-package-card:hover .rl-org-package-card-body,
.rl-org-package-card input:focus-visible + .rl-org-package-card-body {
    border-color: var(--rl-form-border-focus);
    box-shadow: 0 0 0 3px var(--rl-form-shadow);
}

.rl-org-package-card input:checked + .rl-org-package-card-body {
    background: #eef8ff;
    border-color: #0073aa;
    box-shadow: 0 10px 24px rgba(0, 115, 170, 0.12);
    transform: translateY(-1px);
}

.rl-org-package-seats,
.rl-org-package-price,
.rl-org-package-term,
.rl-org-package-per-seat {
    display: block;
}

.rl-org-package-seats {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rl-org-package-price {
    color: inherit;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 16px;
}

.rl-org-package-term,
.rl-org-package-per-seat {
    color: var(--rl-form-muted);
    font-size: 13px;
    margin-top: 4px;
}

.rl-partner-terms {
    background: #f8fafc;
    border: 1px solid #dce4ee;
    border-radius: 8px;
    color: inherit;
    margin: 0 0 18px;
    padding: 16px;
}

.rl-partner-terms h3 {
    margin: 0 0 10px;
}

.rl-partner-terms p {
    margin: 0 0 12px;
}

.rl-partner-terms p:last-child {
    margin-bottom: 0;
}

.rl-copy-link {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    max-width: 100%;
}

.rl-copy-link code {
    overflow-wrap: anywhere;
}

.rl-copy-link-btn {
    align-items: center;
    background: #f4f7fb;
    border: 1px solid #cfd7df;
    border-radius: 7px;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 32px;
    justify-content: center;
    line-height: 1;
    min-width: 32px;
    padding: 0 8px;
}

.rl-copy-link-btn:hover,
.rl-copy-link-btn.rl-copied {
    background: #e8f3fb;
    border-color: #0073aa;
}

.rl-store-shop {
    margin: 28px 0;
}

.rl-store-intro {
    background: color-mix(in srgb, var(--rl-course-accent, #00bcd4) 9%, #fff);
    border: 1px solid color-mix(in srgb, var(--rl-course-accent, #00bcd4) 24%, #dbeafe);
    border-radius: 8px;
    color: #334155;
    line-height: 1.55;
    margin: 0 0 16px;
    padding: 14px 16px;
}

.rl-store-intro p {
    margin: 0;
}

.rl-shop-completion-banner {
    align-items: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--rl-course-primary, #0073aa) 12%, #fff), color-mix(in srgb, var(--rl-course-accent, #00bcd4) 14%, #fff));
    border: 1px solid color-mix(in srgb, var(--rl-course-primary, #0073aa) 22%, #dbeafe);
    border-radius: 8px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin: 22px 0 0;
    padding: 18px;
}

.rl-shop-completion-banner strong,
.rl-shop-completion-banner span {
    display: block;
}

.rl-shop-completion-banner strong {
    color: #172033;
    font-size: 1.05rem;
    margin-bottom: 3px;
}

.rl-shop-completion-banner span {
    color: #475569;
}

.rl-shop-page-button-dashboard {
    animation: rl-shop-soft-pulse 4.5s ease-in-out infinite;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--rl-course-primary, #0073aa) 32%, transparent);
}

@keyframes rl-shop-soft-pulse {
    0%, 72%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--rl-course-primary, #0073aa) 28%, transparent);
        transform: translateY(0);
    }
    82% {
        box-shadow: 0 0 0 8px transparent;
        transform: translateY(-1px);
    }
}

.rl-store-nav {
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin: 0 0 14px;
    padding: 12px;
}

.rl-store-nav-links,
.rl-store-nav-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rl-store-nav button {
    align-items: center;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
    line-height: 1;
    min-height: 36px;
    padding: 9px 12px;
}

.rl-store-nav-button {
    background: color-mix(in srgb, var(--rl-course-accent, #00bcd4) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--rl-course-accent, #00bcd4) 26%, #dbeafe);
    color: var(--rl-course-primary, #0073aa);
}

.rl-store-nav-action {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #334155;
}

.rl-store-nav button:hover,
.rl-store-nav button:focus {
    border-color: var(--rl-course-primary, #0073aa);
    outline: none;
}

.rl-store-toolbar {
    align-items: end;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 240px);
    margin: 0 0 18px;
    padding: 14px;
}

.rl-store-toolbar label {
    display: grid;
    gap: 6px;
    margin: 0;
}

.rl-store-toolbar label span {
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.rl-store-toolbar input,
.rl-store-toolbar select {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    color: #0f172a;
    min-height: 42px;
    padding: 9px 11px;
    width: 100%;
}

.rl-store-accordions {
    display: grid;
    gap: 14px;
}

.rl-store-category {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.rl-store-category:nth-of-type(even) {
    background: #fbfdff;
}

.rl-store-category:nth-of-type(odd) {
    background: #fff;
}

.rl-store-category summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-weight: 900;
    justify-content: space-between;
    list-style: none;
    padding: 14px 16px;
}

.rl-store-category summary::-webkit-details-marker {
    display: none;
}

.rl-store-category summary::after {
    color: var(--rl-course-primary, #0073aa);
    content: "+";
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    margin-left: 12px;
}

.rl-store-category[open] summary::after {
    content: "-";
}

.rl-store-category-count {
    background: color-mix(in srgb, var(--rl-course-accent, #00bcd4) 14%, #fff);
    border-radius: 999px;
    color: var(--rl-course-accent, #008c9e);
    font-size: 12px;
    font-weight: 900;
    margin-left: auto;
    padding: 5px 9px;
}

.rl-store-grid {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0 16px 16px;
}

.rl-store-columns-1 {
    grid-template-columns: 1fr;
}

.rl-store-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rl-store-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rl-store-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rl-store-single {
    margin: 28px 0;
}

.rl-store-single .rl-store-product {
    max-width: 760px;
}

.rl-store-product {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.rl-store-product-link:hover,
.rl-store-product-link:focus {
    border-color: color-mix(in srgb, var(--rl-course-accent, #00bcd4) 55%, #cbd5e1);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.13);
    color: inherit;
    outline: none;
    text-decoration: none;
    transform: translateY(-2px);
}

.rl-store-product-image {
    aspect-ratio: 4 / 3;
    background: #f8fafc;
    display: block;
    overflow: hidden;
}

.rl-store-product-image img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.rl-store-product-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
}

.rl-store-product-meta {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.rl-store-product-badge,
.rl-store-product-price {
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    padding: 7px 9px;
}

.rl-store-product-badge {
    background: color-mix(in srgb, var(--rl-course-accent, #00bcd4) 14%, #fff);
    color: var(--rl-course-accent, #008c9e);
}

.rl-store-product-price {
    background: #f1f5f9;
    color: #334155;
}

.rl-store-product h3 {
    color: #101828;
    font-size: 1.18rem;
    line-height: 1.22;
    margin: 0;
}

.rl-store-product-button {
    align-items: center;
    align-self: flex-start;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--rl-course-primary, #0073aa) 36%, #cbd5e1);
    border-radius: 6px;
    color: var(--rl-course-primary, #0073aa);
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
    margin-top: auto;
    padding: 10px 16px;
    text-decoration: none;
}

.rl-store-product-button:hover,
.rl-store-product-button:focus {
    color: var(--rl-course-primary, #0073aa);
}

.rl-store-product-button-disabled {
    background: #94a3b8;
    cursor: default;
}

.rl-store-empty {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #475569;
    padding: 18px;
}

html.rl-dark-mode body .rl-store-intro,
html.rl-dark-mode body .rl-shop-completion-banner,
html.rl-dark-mode body .rl-store-nav,
html.rl-dark-mode body .rl-store-toolbar,
html.rl-dark-mode body .rl-store-category,
html.rl-dark-mode body .rl-store-product {
    background: #111827;
    border-color: #334155;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

html.rl-dark-mode body .rl-store-category:nth-of-type(even) {
    background: #0f172a;
}

html.rl-dark-mode body .rl-store-intro,
html.rl-dark-mode body .rl-shop-completion-banner span {
    color: #cbd5e1;
}

html.rl-dark-mode body .rl-shop-completion-banner strong {
    color: #f8fafc;
}

html.rl-dark-mode body .rl-store-nav-button {
    background: color-mix(in srgb, var(--rl-course-accent, #00bcd4) 16%, #0f172a);
    border-color: color-mix(in srgb, var(--rl-course-accent, #00bcd4) 34%, #334155);
    color: #dbeafe;
}

html.rl-dark-mode body .rl-store-nav-action {
    background: #0f172a;
    border-color: #334155;
    color: #dbeafe;
}

html.rl-dark-mode body .rl-store-toolbar input,
html.rl-dark-mode body .rl-store-toolbar select {
    background: #0f172a;
    border-color: #334155;
    color: #f8fafc;
}

html.rl-dark-mode body .rl-store-toolbar label span,
html.rl-dark-mode body .rl-store-category summary {
    color: #dbeafe;
}

html.rl-dark-mode body .rl-store-product-image {
    background: #0f172a;
}

html.rl-dark-mode body .rl-store-product h3 {
    color: #f8fafc;
}

html.rl-dark-mode body .rl-store-product-price,
html.rl-dark-mode body .rl-store-empty {
    background: #1e293b;
    border-color: #334155;
    color: #dbeafe;
}

html.rl-dark-mode body .rl-store-product-button {
    background: #0f172a;
    border-color: #334155;
    color: #dbeafe;
}

@media (max-width: 900px) {
    .rl-store-columns-3,
    .rl-store-columns-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .rl-shop-completion-banner {
        align-items: stretch;
        flex-direction: column;
    }

    .rl-shop-completion-banner .rl-btn {
        text-align: center;
    }

    .rl-store-toolbar {
        grid-template-columns: 1fr;
    }

    .rl-store-columns-2,
    .rl-store-columns-3,
    .rl-store-columns-4 {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rl-shop-page-button-dashboard {
        animation: none;
    }
}

.rl-referral-notice {
    background: #eef8ff;
    border: 1px solid #b9e0f7;
    border-radius: 9px;
    color: #12384f;
    margin: 0 0 18px;
    padding: 14px 16px;
}

.rl-org-payment-alert {
    align-items: center;
    background: #b91c1c;
    border: 1px solid #7f1d1d;
    border-radius: 9px;
    color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    margin: 0 0 18px;
    padding: 14px 16px;
}

.rl-org-payment-alert a,
.rl-org-payment-alert a:visited,
.rl-org-payment-alert a:hover,
.rl-org-payment-alert a:focus,
.rl-org-payment-alert a:active {
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rl-partner-card,
.rl-org-branding-card {
    align-items: center;
    background: #ffffff;
    border: 1px solid #d9e3ec;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    color: #172033;
    display: flex;
    gap: 16px;
    margin: 18px 0;
    padding: 16px 18px;
}

.rl-partner-card-logo {
    background: #ffffff;
    border: 1px solid #edf1f5;
    border-radius: 8px;
    flex: 0 0 auto;
    height: 72px;
    object-fit: contain;
    padding: 8px;
    width: 96px;
}

.rl-partner-card-body,
.rl-org-branding-card {
    min-width: 0;
}

.rl-partner-card-eyebrow,
.rl-org-branding-eyebrow {
    color: #5e7085;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.rl-partner-card-name,
.rl-org-branding-title {
    color: #111827;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
}

.rl-partner-card-text,
.rl-org-branding-text {
    color: #42526a;
    font-size: 14px;
    line-height: 1.45;
    margin-top: 4px;
}

.rl-partner-card-link {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    margin-top: 8px;
}

.rl-partners-directory {
    margin: 32px 0;
}

.rl-partners-directory-header {
    margin: 0 0 18px;
}

.rl-partners-directory-kicker {
    color: #0d7f8a;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.rl-partners-directory-header h2 {
    color: #161616;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.02;
    margin: 0;
}

.rl-partners-directory-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.rl-partner-directory-card {
    background:
        radial-gradient(circle at top right, rgba(13, 183, 196, 0.16), transparent 34%),
        linear-gradient(145deg, #ffffff 0%, #f8fbfb 100%);
    border: 1px solid rgba(13, 183, 196, 0.22);
    border-radius: 22px;
    box-shadow: 0 18px 46px rgba(22, 22, 22, 0.10);
    color: #161616;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
    overflow: hidden;
    padding: 22px;
    position: relative;
}

.rl-partner-directory-card::before {
    background: #af0000;
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.rl-partner-directory-card-top {
    align-items: center;
    display: flex;
    gap: 15px;
}

.rl-partner-directory-logo-wrap {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(22, 22, 22, 0.08);
    border-radius: 18px;
    display: inline-flex;
    flex: 0 0 86px;
    height: 86px;
    justify-content: center;
    overflow: hidden;
    width: 86px;
}

.rl-partner-directory-logo {
    height: 100%;
    object-fit: contain;
    padding: 10px;
    width: 100%;
}

.rl-partner-directory-logo-fallback {
    align-items: center;
    background: linear-gradient(135deg, #0db7c4, #08747d);
    color: #ffffff;
    display: inline-flex;
    font-size: 25px;
    font-weight: 900;
    height: 100%;
    justify-content: center;
    letter-spacing: 0.03em;
    width: 100%;
}

.rl-partner-directory-meta {
    min-width: 0;
}

.rl-partner-directory-eyebrow {
    color: #0d7f8a;
    display: block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rl-partner-directory-meta h3 {
    color: #161616;
    font-size: 22px;
    line-height: 1.1;
    margin: 4px 0 8px;
}

.rl-partner-directory-state {
    background: #af0000;
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 5px 9px;
}

.rl-partner-directory-bio {
    color: #374151;
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}

.rl-partner-directory-services {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rl-partner-directory-services span {
    background: rgba(13, 183, 196, 0.12);
    border: 1px solid rgba(13, 183, 196, 0.28);
    border-radius: 999px;
    color: #075f66;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 10px;
}

.rl-partner-directory-actions {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: auto;
}

.rl-partner-directory-card .rl-partner-directory-button,
.rl-partner-directory-card .rl-partner-directory-button:visited {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(22, 22, 22, 0.14);
    border-radius: 14px;
    color: #161616 !important;
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    justify-content: center;
    min-height: 46px;
    padding: 11px 14px;
    text-align: center;
    text-decoration: none !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
    width: 100%;
}

.rl-partner-directory-card .rl-partner-directory-button:hover,
.rl-partner-directory-card .rl-partner-directory-button:focus {
    box-shadow: 0 10px 22px rgba(22, 22, 22, 0.12);
    color: #161616 !important;
    transform: translateY(-1px);
}

.rl-partner-directory-card .rl-partner-directory-button-primary,
.rl-partner-directory-card .rl-partner-directory-button-primary:visited {
    background: #0db7c4;
    border-color: #0db7c4;
    box-shadow: 0 10px 22px rgba(13, 183, 196, 0.22);
    color: #ffffff !important;
}

.rl-partner-directory-card .rl-partner-directory-button-primary:hover,
.rl-partner-directory-card .rl-partner-directory-button-primary:focus {
    background: #af0000;
    border-color: #af0000;
    box-shadow: 0 10px 24px rgba(175, 0, 0, 0.22);
    color: #ffffff !important;
}

@media (max-width: 560px) {
    .rl-partner-directory-actions {
        grid-template-columns: 1fr;
    }
}

.rl-partner-card-minimizable,
.rl-org-branding-card-minimizable {
    position: relative;
}

.rl-partner-card .rl-partner-card-toggle,
.rl-org-branding-card .rl-partner-card-toggle {
    align-items: center;
    appearance: none !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    color: #64748b !important;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 17px !important;
    font-weight: 700 !important;
    height: 24px !important;
    justify-content: center;
    line-height: 1 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    position: absolute;
    right: 12px;
    text-decoration: none !important;
    text-shadow: none !important;
    top: 12px;
    width: 24px !important;
}

.rl-partner-card .rl-partner-card-toggle:hover,
.rl-partner-card .rl-partner-card-toggle:active,
.rl-partner-card .rl-partner-card-toggle:focus,
.rl-org-branding-card .rl-partner-card-toggle:hover,
.rl-org-branding-card .rl-partner-card-toggle:active,
.rl-org-branding-card .rl-partner-card-toggle:focus {
    background: #ffffff !important;
    color: #334155 !important;
}

.rl-partner-card .rl-partner-card-toggle:focus,
.rl-org-branding-card .rl-partner-card-toggle:focus {
    outline: 1px solid #cbd5e1;
    outline-offset: 2px;
}

.rl-partner-card-toggle-collapsed {
    display: none;
}

.rl-partner-card.rl-is-collapsed,
.rl-org-branding-card.rl-is-collapsed {
    gap: 12px;
    padding: 10px 48px 10px 12px;
}

.rl-partner-card.rl-is-collapsed .rl-partner-card-logo {
    height: 40px;
    padding: 5px;
    width: 60px;
}

.rl-partner-card.rl-is-collapsed .rl-partner-card-eyebrow,
.rl-partner-card.rl-is-collapsed .rl-partner-card-text,
.rl-partner-card.rl-is-collapsed .rl-partner-card-link,
.rl-org-branding-card.rl-is-collapsed .rl-org-branding-text {
    display: none;
}

.rl-partner-card.rl-is-collapsed .rl-partner-card-name,
.rl-org-branding-card.rl-is-collapsed .rl-org-branding-title {
    font-size: 15px;
}

.rl-partner-card.rl-is-collapsed .rl-partner-card-toggle-expanded,
.rl-org-branding-card.rl-is-collapsed .rl-partner-card-toggle-expanded {
    display: none;
}

.rl-partner-card.rl-is-collapsed .rl-partner-card-toggle-collapsed,
.rl-org-branding-card.rl-is-collapsed .rl-partner-card-toggle-collapsed {
    display: inline;
}

.rl-org-branding-card {
    align-items: flex-start;
    background: #f5fbff;
    border-color: #b9dff3;
    box-shadow: 0 10px 28px rgba(12, 74, 110, 0.08);
    display: block;
}

.rl-org-branding-card-enrolled {
    background: #f8fafc;
    border-color: #d8e0e8;
    box-shadow: none;
}

.rl-org-branding-card-minimizable {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

@media (max-width: 640px) {
    .rl-partner-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .rl-partner-card-logo {
        height: 64px;
        width: 112px;
    }

    .rl-partner-card-name,
    .rl-org-branding-title {
        font-size: 18px;
    }
}

.rl-referral-missing-notice {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    color: #7c2d12;
    font-weight: 700;
    margin: 24px 0;
    padding: 16px 18px;
}

.rl-landing-missing-referral .rl-referral-required,
.rl-landing-has-referral .rl-referral-missing-only {
    display: none !important;
}

.rl-partner-signup input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.rl-partner-signup textarea,
.rl-partner-signup select,
.rl-org-signup input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.rl-org-signup textarea,
.rl-org-dashboard > form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.rl-org-dashboard > form select,
.rl-org-dashboard > form textarea {
    width: 100%;
}

.rl-partner-signup input[type="file"],
.rl-org-signup input[type="file"] {
    cursor: pointer;
    padding: 8px;
}

.rl-partner-signup input[type="file"]::file-selector-button,
.rl-org-signup input[type="file"]::file-selector-button {
    background: #f4f7fb;
    border: 1px solid #cfd7df;
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
    font-weight: 700;
    margin-right: 12px;
    padding: 8px 12px;
}

.rl-partner-signup input[type="file"]::file-selector-button:hover,
.rl-org-signup input[type="file"]::file-selector-button:hover {
    background: #eaf1f8;
}

.rl-partner-signup label:has(input[type="checkbox"]),
.rl-org-signup label:has(input[type="checkbox"]) {
    align-items: center;
    display: flex;
    font-weight: 400;
    gap: 8px;
    margin: 4px 0 2px;
}

.rl-login-container input[type="checkbox"],
.rl-dashboard-container input[type="checkbox"],
.rl-quiz-form input[type="checkbox"],
.rl-partner-signup input[type="checkbox"],
.rl-org-signup input[type="checkbox"],
.rl-org-dashboard input[type="checkbox"],
.rl-scenario-ui input[type="checkbox"],
.rl-login-container input[type="radio"],
.rl-dashboard-container input[type="radio"],
.rl-quiz-form input[type="radio"],
.rl-partner-signup input[type="radio"],
.rl-org-signup input[type="radio"],
.rl-org-dashboard input[type="radio"],
.rl-scenario-ui input[type="radio"] {
    accent-color: #0073aa;
}

.rl-login-container ::placeholder,
.rl-dashboard-container ::placeholder,
.rl-quiz-form ::placeholder,
.rl-partner-signup ::placeholder,
.rl-org-signup ::placeholder,
.rl-org-dashboard ::placeholder,
.rl-scenario-ui ::placeholder {
    color: var(--rl-form-muted);
    opacity: 0.8;
}

/* Results */
.rl-quiz-result {
    text-align: center;
    padding: 50px 40px;
    border-radius: 20px;
    margin-top: 20px;
    animation: rl-fadeInUp 0.5s ease;
}

.rl-quiz-pass {
    background: #d4edda;
    color: #155724;
}

.rl-quiz-fail {
    background: #f8d7da;
    color: #721c24;
}

.rl-result-score {
    font-size: 64px;
    font-weight: 800;
    margin: 20px 0;
    line-height: 1;
}

.rl-result-details {
    font-size: 18px;
    margin-bottom: 24px;
}

/* Inline quiz compact */
.rl-quiz-inline .rl-question-card {
    padding: 28px;
}

.rl-quiz-inline .rl-question-text {
    font-size: 18px;
}

.rl-quiz-inline .rl-answer-label {
    padding: 14px 16px;
    font-size: 15px;
}

/* Animations */
@keyframes rl-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rl-shake {
    0%, 100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-8px);
    }
    40% {
        transform: translateX(8px);
    }
    60% {
        transform: translateX(-6px);
    }
    80% {
        transform: translateX(6px);
    }
}

@keyframes rl-pop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
    }
}

@media (max-width: 640px) {
    .rl-quiz-wrapper {
        padding: 10px;
    }

    .rl-question-card {
        padding: 24px;
        border-radius: 16px;
    }

    .rl-question-text {
        font-size: 18px;
    }

    .rl-answer-label {
        padding: 14px 16px;
        font-size: 15px;
    }

    .rl-quiz-nav {
        flex-wrap: wrap;
    }

    .rl-quiz-nav .rl-btn {
        flex: 1;
        justify-content: center;
    }
}

/* Dashboard */
.rl-dashboard {
    max-width: 900px;
    margin: 0 auto;
}

.rl-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.rl-course-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rl-course-card h3 {
    margin: 0 0 10px;
}

.rl-course-wrapper h1,
.rl-course-card h3 a {
    color: var(--rl-course-primary, inherit);
}

.rl-course-wrapper .rl-price,
.rl-course-card-meta > span:first-child {
    color: var(--rl-course-accent, inherit);
}

.rl-courses-grid {
    align-items: stretch;
}

.rl-course-card > a:first-child img {
    aspect-ratio: 16 / 9;
    display: block;
    height: auto;
    object-fit: cover;
}

.rl-course-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.rl-course-card-excerpt {
    flex: 1;
}

.rl-course-card-actions {
    margin-top: auto;
}

.rl-progress-bar {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin: 10px 0;
}

.rl-progress-fill {
    height: 100%;
    background: #0073aa;
    transition: width 0.3s;
}

.rl-progress-text {
    font-size: 13px;
    color: #666;
}

/* Lesson Interactions */
.rl-interactions-wrapper {
    margin: 30px 0;
}

.rl-int-title {
    font-size: 18px;
    margin-bottom: 8px;
    color: #333;
}

.rl-int-subtitle {
    color: #666;
    font-size: 14px;
    margin-bottom: 15px;
}

/* Flashcard */
.rl-int-flashcard {
    margin: 20px 0;
    perspective: 1000px;
}

.rl-flip-card {
    width: 100%;
    max-width: 500px;
    height: 200px;
    margin: 0 auto;
    cursor: pointer;
}

.rl-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}

.rl-flip-card.rl-flipped .rl-flip-inner {
    transform: rotateY(180deg);
}

.rl-flip-front, .rl-flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rl-flip-front {
    background: linear-gradient(135deg, #00c9d1 0%, #005460 100%);
    color: #fff;
}

.rl-flip-back {
    background: linear-gradient(135deg, #d6f5ed 0%, #fff4d7 100%);
    color: #000;
    transform: rotateY(180deg);
}

.rl-flip-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-bottom: 8px;
}

.rl-flip-content {
    font-size: 22px;
    font-weight: 600;
    text-align: center;
}

.rl-flip-hint {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 10px;
}

/* Sorting */
.rl-int-sorting,
.rl-int-checkpoint,
.rl-int-reveal,
.rl-int-error-spotting,
.rl-int-image-compare {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin: 20px 0;
}

.rl-sort-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 15px 0;
}

.rl-sort-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: grab;
    user-select: none;
}

.rl-sort-item:active {
    cursor: grabbing;
}

.rl-sort-handle {
    color: #adb5bd;
    font-size: 18px;
}

.rl-sort-text {
    font-weight: 500;
}

.rl-dragging {
    opacity: 0.5;
}

/* Scenario */
.rl-int-scenario {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin: 20px 0;
}

.rl-scenario-text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
}

.rl-scenario-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rl-scenario-btn {
    padding: 12px 20px;
    text-align: left;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.15s;
}

.rl-scenario-btn:hover {
    background: #f0f0f0;
    border-color: #bbb;
}

.rl-scenario-btn:disabled {
    cursor: default;
}

.rl-scenario-correct,
.rl-btn-correct {
    background: #d4edda !important;
    border-color: #28a745 !important;
    color: #155724;
}

.rl-scenario-wrong,
.rl-btn-wrong {
    background: #f8d7da !important;
    border-color: #dc3545 !important;
    color: #721c24;
}

.rl-reveal-panel {
    margin-top: 14px;
    padding: 16px;
    border-left: 4px solid var(--e-global-color-primary, #0073aa);
    background: #f8f9fa;
    border-radius: 6px;
    line-height: 1.6;
}

.rl-int-media-preview {
    margin: 0 0 15px;
}

.rl-int-media-preview img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 8px;
}

.rl-int-zoom-wrap {
    position: relative;
    display: inline-block;
    max-width: min(360px, 100%);
    margin: 0 0 15px;
}

.rl-int-zoom-wrap img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.rl-int-zoom-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.18);
    color: #1f2937;
    font-size: 0;
    pointer-events: none;
}

.rl-img-wrap {
    display: inline-block;
    line-height: 0;
    max-width: 100%;
    position: relative;
    vertical-align: top;
}

.rl-img-wrap img {
    display: block;
    height: auto;
    max-width: 100%;
}

.rl-img-wrap.alignleft {
    float: left;
    margin: 4px 22px 16px 0;
}

.rl-img-wrap.alignright {
    float: right;
    margin: 4px 0 16px 22px;
}

.rl-img-wrap.aligncenter {
    display: block;
    margin: 18px auto;
    width: fit-content;
}

.rl-img-wrap.alignnone {
    margin: 12px 0;
}

.rl-img-zoom-icon,
.rl-int-zoom-icon {
    box-sizing: border-box;
}

.rl-img-zoom-icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.18);
    border-radius: 50%;
    display: flex;
    font-size: 0;
    height: 30px;
    justify-content: center;
    pointer-events: none;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 30px;
    z-index: 2;
    color: #1f2937;
}

.rl-img-print-icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(15, 23, 42, 0.18) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    color: #1f2937 !important;
    cursor: pointer;
    display: flex !important;
    height: 30px !important;
    justify-content: center;
    line-height: 1 !important;
    min-height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    position: absolute;
    right: 44px;
    top: 8px;
    width: 30px !important;
    z-index: 3;
}

.rl-img-print-icon svg {
    display: block;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 16px;
}

.rl-img-print-icon:hover,
.rl-img-print-icon:focus-visible {
    background: #fff !important;
    border-color: rgba(15, 23, 42, 0.35) !important;
}

.rl-img-zoom-icon::before,
.rl-int-zoom-icon::before {
    background: currentColor;
    content: "";
    height: 16px;
    left: 7px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 5.5a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm3.7 8.7 4.3 4.3' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 5.5a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm3.7 8.7 4.3 4.3' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    position: absolute;
    top: 7px;
    width: 16px;
}

.rl-img-zoom-icon::after,
.rl-int-zoom-icon::after {
    content: none;
}

.rl-lesson-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rl-lesson-version-switch {
    align-items: center;
    display: inline-flex;
    gap: 4px;
}

.rl-version-icon {
    align-items: center;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #475569;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    height: 22px;
    justify-content: center;
    line-height: 1;
    text-decoration: none !important;
    width: 22px;
}

.rl-version-icon:hover,
.rl-version-icon:focus-visible {
    border-color: var(--rl-course-primary, #007cba);
    color: var(--rl-course-primary, #007cba);
}

.rl-version-icon[aria-label="Graphic version"] {
    border-color: #dc2626;
    color: #dc2626;
}

.rl-version-icon[aria-label="Graphic version"]:hover,
.rl-version-icon[aria-label="Graphic version"]:focus-visible {
    border-color: #b91c1c;
    color: #b91c1c;
}

.rl-version-icon-active {
    background: var(--rl-course-primary, #007cba);
    border-color: var(--rl-course-primary, #007cba);
    color: #fff;
}

.rl-version-icon-active[aria-label="Graphic version"] {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.rl-int-question {
    font-weight: 700;
    margin: 0 0 12px;
}

.rl-image-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 15px 0;
}

.rl-image-compare-choice {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
}

.rl-image-compare-choice img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
}

.rl-image-compare-choice > span {
    display: block !important;
    width: 100%;
    padding: 4px 6px;
    line-height: 1.35;
    text-align: center;
    font-weight: 700;
}

/* Fill in blank */
.rl-int-fillinline {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin: 20px 0;
}

.rl-fill-sentence {
    font-size: 17px;
    line-height: 2;
    margin: 15px 0;
}

.rl-inline-blank {
    display: inline-block;
    width: 140px;
    padding: 4px 8px;
    margin: 0 4px;
    border: 2px solid #0073aa;
    border-radius: 4px;
    font-size: 15px;
    text-align: center;
}

.rl-blank-correct {
    border-color: #28a745 !important;
    background: #d4edda;
}

.rl-blank-wrong {
    border-color: #dc3545 !important;
    background: #f8d7da;
}

/* Matching */
.rl-int-matching {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin: 20px 0;
}

.rl-match-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 15px 0;
}

.rl-match-left-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    margin-bottom: 8px;
    background: #f8f9fa;
    border-radius: 6px;
}

.rl-match-dropzone {
    min-width: 120px;
    min-height: 40px;
    padding: 8px;
    border: 2px dashed #adb5bd;
    border-radius: 6px;
    text-align: center;
    color: #adb5bd;
    font-size: 13px;
    margin-left: 10px;
}

.rl-match-dropzone.rl-drag-over {
    background: #e3f2fd;
    border-color: #2196f3;
}

.rl-match-dropzone.rl-drop-filled {
    border-style: solid;
    border-color: #28a745;
    color: #333;
}

.rl-match-dropzone.rl-match-correct {
    background: #d4edda;
    border-color: #28a745;
}

.rl-match-dropzone.rl-match-wrong {
    background: #f8d7da;
    border-color: #dc3545;
}

.rl-match-draggable {
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #0073aa;
    border-radius: 6px;
    cursor: grab;
    margin-bottom: 8px;
    text-align: center;
    color: #0073aa;
    font-weight: 500;
}

.rl-match-draggable:active {
    cursor: grabbing;
}

@media (max-width: 600px) {
    .rl-match-grid {
        grid-template-columns: 1fr;
    }

    .rl-flip-card {
        height: 160px;
    }

    .rl-flip-content {
        font-size: 18px;
    }
}

/* Slide Viewer */
.rl-slide-viewer {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 30px;
    margin: 20px 0;
}

.rl-slide-counter {
    text-align: center;
    color: var(--rl-course-primary, #888);
    font-size: 14px;
    margin-bottom: 20px;
}

.rl-slide-header {
    gap: 16px;
}

.rl-slide-compact-progress {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 180px;
}

.rl-slide-dot-controls {
    align-items: center;
    display: flex;
    gap: 8px;
}

.rl-slide-jump {
    align-items: center;
    background: transparent !important;
    border: 1px solid color-mix(in srgb, var(--rl-course-primary, #007cba) 42%, transparent) !important;
    border-radius: 999px !important;
    color: var(--rl-course-primary, #007cba) !important;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 22px;
    font-size: 13px;
    font-weight: 700;
    height: 22px;
    justify-content: center;
    line-height: 1;
    padding: 0 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
    width: 22px;
}

.rl-slide-jump:hover:not(:disabled),
.rl-slide-jump:focus-visible:not(:disabled) {
    background: color-mix(in srgb, var(--rl-course-primary, #007cba) 10%, transparent) !important;
    border-color: var(--rl-course-primary, #007cba) !important;
}

.rl-slide-jump:disabled {
    cursor: default;
    opacity: 0.35;
}

.rl-slide-compact-label {
    color: var(--rl-course-primary, #007cba);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.rl-slide-compact-track {
    background: #e5e7eb;
    border-radius: 999px;
    cursor: pointer;
    display: block;
    height: 8px;
    min-width: 130px;
    overflow: hidden;
}

.rl-slide-count-large .rl-slide-type-track {
    background: var(--rl-slide-type-gradient, #e5e7eb) !important;
}

.rl-slide-count-large .rl-slide-type-track .rl-slide-progress-bar {
    background: color-mix(in srgb, var(--rl-course-primary, #007cba) 30%, transparent) !important;
    border-right: 2px solid var(--rl-course-primary, #007cba);
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.24);
}

.rl-slide-type-dot {
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.rl-slide-type-dot:hover,
.rl-slide-type-dot:focus-visible {
    transform: translateY(-1px);
}

.rl-slide-compact-track:focus-visible,
.rl-slide-progress:focus-visible {
    outline: 2px solid var(--rl-course-primary, #007cba);
    outline-offset: 3px;
}

.rl-slide-compact-track:hover,
.rl-slide-progress:hover {
    background: color-mix(in srgb, var(--rl-course-primary, #007cba) 14%, #e5e7eb) !important;
}

.rl-slide-compact-track .rl-slide-progress-bar {
    display: block;
}

.rl-slide-count-large .rl-slide-counter {
    margin-bottom: 0;
}

.rl-slide-dots-compact {
    flex-wrap: nowrap !important;
    gap: 4px !important;
    justify-content: flex-end;
    max-width: none;
    white-space: nowrap;
}

.rl-slide-dots-compact .rl-slide-dot {
    flex: 0 0 10px;
    height: 10px !important;
    width: 10px !important;
}

.rl-lesson-wrapper .rl-lesson-breadcrumb a,
.rl-lesson-wrapper .rl-slide-counter span,
.rl-lesson-wrapper .rl-slide-title,
.rl-quiz-wrapper .rl-quiz-counter {
    color: var(--rl-course-primary, inherit);
}

.rl-lesson-wrapper .rl-slide-progress-bar,
.rl-quiz-wrapper .rl-quiz-progress-bar,
.rl-course-card .rl-progress-fill,
.rl-course-wrapper .rl-progress-fill {
    background: var(--rl-course-primary, #0073aa) !important;
}

.rl-lesson-wrapper .rl-slide-dot {
    border-color: var(--rl-course-primary, #007cba) !important;
}

.rl-slides-container {
    min-height: 300px;
    width: 100%;
}

.rl-slide {
    display: none;
    width: 100%;
}

.rl-slide-animate-next {
    animation: rlSlideInNext 0.22s ease-out both;
}

.rl-slide-animate-prev {
    animation: rlSlideInPrev 0.22s ease-out both;
}

@keyframes rlSlideInNext {
    from {
        opacity: 0.55;
        transform: translateX(22px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes rlSlideInPrev {
    from {
        opacity: 0.55;
        transform: translateX(-22px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rl-slide-animate-next,
    .rl-slide-animate-prev {
        animation: none;
    }
}

.rl-slide-title {
    font-size: 22px;
    margin-bottom: 20px;
    color: #333;
}

.rl-slide-content {
    font-size: 16px;
    line-height: 1.7;
}

.rl-slide-content img {
    max-width: 100%;
    height: auto;
}

.rl-slide-image {
    text-align: center;
    margin: 20px 0;
}

.rl-slide-image img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rl-slide-caption {
    margin-top: 10px;
    text-align: left;
}

.rl-pdf-viewer {
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    margin: 18px 0 22px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.rl-pdf-viewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
    background: #f8fafc;
}

.rl-pdf-viewer-title {
    color: #334155;
    font-size: 14px;
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rl-pdf-open-btn {
    flex: 0 0 auto;
    padding: 7px 10px;
    font-size: 13px;
}

.rl-pdf-viewer-frame {
    position: relative;
    background: #e5e7eb;
}

.rl-pdf-viewer-frame iframe {
    display: block;
    width: 100%;
    height: min(74vh, 760px);
    min-height: 520px;
    border: 0;
}

.rl-pdf-viewer-fallback {
    padding: 10px 12px;
    font-size: 13px;
    color: #475569;
    background: #f8fafc;
}

html.rl-dark-mode .rl-pdf-viewer,
body.rl-dark-mode .rl-pdf-viewer {
    border-color: rgba(148, 163, 184, 0.22);
    background: #111827;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

html.rl-dark-mode .rl-pdf-viewer-toolbar,
body.rl-dark-mode .rl-pdf-viewer-toolbar,
html.rl-dark-mode .rl-pdf-viewer-fallback,
body.rl-dark-mode .rl-pdf-viewer-fallback {
    border-color: rgba(148, 163, 184, 0.2);
    background: #1f2937;
    color: #cbd5e1;
}

html.rl-dark-mode .rl-pdf-viewer-title,
body.rl-dark-mode .rl-pdf-viewer-title {
    color: #f8fafc;
}

@media (max-width: 700px) {
    .rl-pdf-viewer-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .rl-pdf-viewer-frame iframe {
        height: 66vh;
        min-height: 420px;
    }
}

.rl-slide-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    gap: 15px;
}

.rl-slide-nav-left,
.rl-slide-buttons {
    align-items: center;
    display: flex;
    gap: 10px;
}

.rl-slide-progress {
    flex: 1;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    cursor: pointer;
    overflow: hidden;
}

.rl-slide-progress-bar {
    height: 100%;
    background: #0073aa;
    transition: width 0.3s;
}

body:has(.rl-lesson-wrapper),
body:has(.rl-quiz-wrapper) {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
}

html body .rl-lesson-wrapper .rl-lesson-nav,
html body .rl-lesson-wrapper .rl-slide-nav,
html body .rl-quiz-wrapper .rl-quiz-nav {
    align-items: center !important;
    background: rgba(255, 255, 255, 0.97) !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.16);
    left: max(16px, calc((100vw - 1120px) / 2));
    margin: 0 !important;
    padding: 12px 14px !important;
    position: fixed !important;
    right: max(16px, calc((100vw - 1120px) / 2));
    z-index: 99990;
}

html body .rl-quiz-wrapper .rl-quiz-nav {
    left: max(16px, calc((100vw - 820px) / 2));
    right: max(16px, calc((100vw - 820px) / 2));
}

html body .rl-lesson-wrapper .rl-slide-nav .rl-slide-progress {
    max-width: 260px !important;
}

@media (max-width: 600px) {
    .rl-slide-viewer {
        padding: 15px;
    }

    .rl-slide-header {
        align-items: stretch !important;
        flex-direction: column;
    }

    .rl-slide-dots {
        display: none !important;
    }

    .rl-slide-compact-progress {
        min-width: 0;
        width: 100%;
    }

    .rl-slide-dot-controls {
        width: 100%;
    }

    .rl-slide-compact-track {
        flex: 1;
        min-width: 0;
    }

    .rl-slide-nav {
        flex-wrap: wrap;
    }

    .rl-slide-progress {
        order: -1;
        width: 100%;
        flex: none;
    }
}

/* Image zoom / lightbox */
.rl-zoomable {
    cursor: zoom-in;
    transition: transform 0.3s;
}

.rl-zoomable:hover {
    transform: scale(1.02);
}

.rl-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.rl-lightbox-overlay img {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
}

.rl-expand-btn {
    margin-top: 10px;
    padding: 6px 14px;
    font-size: 13px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

.rl-expand-btn:hover {
    background: #e0e0e0;
}

/* Inline quiz in slide */
.rl-quiz-inline {
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
}

.rl-quiz-inline .rl-question {
    padding: 12px;
    margin-bottom: 15px;
}

.rl-quiz-inline .rl-question-text {
    font-size: 15px;
}

.rl-quiz-inline .rl-btn-primary {
    padding: 8px 18px;
    font-size: 14px;
}

/* ===== POSTER SLIDE ===== */
.rl-slide-poster {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    background: #fff;
    border-radius: 16px;
    padding: 60px 50px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f0f0;
}

.rl-poster-text {
    font-size: 70px;
    font-weight: 800;
    color: #00A8A8;
    line-height: 1.2;
    margin: 0 0 24px 0;
    letter-spacing: -1px;
    max-width: 900px;
}

.rl-poster-sub {
    font-size: 20px;
    color: #555;
    line-height: 1.5;
    margin: 0;
    font-weight: 400;
    max-width: 700px;
}

@media (max-width: 640px) {
    .rl-slide-poster {
        min-height: 300px;
        padding: 36px 24px;
    }

    .rl-poster-text {
        font-size: 32px;
        margin-bottom: 16px;
    }

    .rl-poster-sub {
        font-size: 16px;
    }
}

/* ===== QUIZ REVIEW ===== */
.rl-quiz-review {
    max-width: 800px;
    margin: 40px auto 0;
    text-align: left;
}

.rl-quiz-review h3 {
    font-size: 22px;
    margin-bottom: 24px;
    color: #333;
    text-align: center;
}

.rl-review-item {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f0f0;
}

.rl-review-question {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1a1a1a;
    line-height: 1.4;
}

.rl-review-correct {
    background: #d4edda;
    color: #155724;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 15px;
    border: 1px solid #c3e6cb;
}

.rl-review-wrong {
    background: #f8d7da;
    color: #721c24;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 15px;
    border: 1px solid #f5c6cb;
}

.rl-review-explanation {
    background: #e3f2fd;
    color: #1565c0;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 15px;
    margin-top: 12px;
    border: 1px solid #bbdefb;
    line-height: 1.5;
}

/* ===== VIDEO OVERLAYS ===== */
.rl-video-overlays {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

.rl-video-overlay {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 16px 28px;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    max-width: 80%;
    line-height: 1.4;
}

.rl-video-overlay.visible {
    opacity: 1;
}

/* ===== INTERACTIONS ===== */
.rl-int-flashcard {
    margin: 20px 0;
    perspective: 1000px;
}

.rl-flip-card {
    width: 100%;
    max-width: 500px;
    height: 200px;
    margin: 0 auto;
    cursor: pointer;
}

.rl-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}

.rl-flip-card.rl-flipped .rl-flip-inner {
    transform: rotateY(180deg);
}

.rl-flip-front, .rl-flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rl-flip-front {
    background: linear-gradient(135deg, #00c9d1 0%, #005460 100%);
    color: #fff;
}

.rl-flip-back {
    background: linear-gradient(135deg, #d6f5ed 0%, #fff4d7 100%);
    color: #000;
    transform: rotateY(180deg);
}

.rl-flip-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
    margin-bottom: 8px;
}

.rl-flip-content {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.rl-flip-hint {
    font-size: 12px;
    opacity: 0.6;
    margin-top: 10px;
}

.rl-int-sorting, .rl-int-scenario, .rl-int-fillinline, .rl-int-matching {
    margin: 20px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.rl-int-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.rl-sort-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 15px 0;
}

.rl-sort-item {
    background: #fff;
    padding: 12px 16px;
    border-radius: 6px;
    cursor: move;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.rl-sort-dragging {
    opacity: 0.5;
}

.rl-sort-handle {
    color: #999;
    font-size: 18px;
}

.rl-scenario-text {
    background: #fff;
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 15px;
    line-height: 1.6;
}

.rl-scenario-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rl-scenario-btn {
    background: #fff;
    border: 2px solid #ddd;
    padding: 12px 16px;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    font-size: 15px;
    transition: all 0.2s;
}

.rl-scenario-btn:hover {
    border-color: #667eea;
}

.rl-scenario-btn:disabled {
    cursor: default;
    opacity: 0.72;
}

.rl-btn-correct {
    border-color: #28a745 !important;
    background: #0f7a36 !important;
    color: #fff !important;
    opacity: 1 !important;
}

.rl-btn-wrong {
    border-color: #dc3545 !important;
    background: #b42318 !important;
    color: #fff !important;
    opacity: 1 !important;
}

.rl-int-sorting .rl-int-subtitle {
    color: #51606f;
    font-size: 14px;
    margin: 0 0 12px;
}

.rl-int-sorting .rl-sort-list {
    counter-reset: rl-sort-order;
    gap: 10px;
    margin: 16px 0;
    padding: 10px;
    background: #f3f7fa;
    border: 1px dashed #b7c6d4;
    border-radius: 10px;
}

.rl-int-sorting .rl-sort-list.rl-sort-active {
    background: #eefbfd;
    border-color: #16b6c3;
}

.rl-int-sorting .rl-sort-item {
    position: relative;
    counter-increment: rl-sort-order;
    min-height: 52px;
    padding: 12px 16px 12px 12px;
    background: #fff !important;
    border: 1px solid #cbd5df;
    border-left: 4px solid #16b6c3;
    border-radius: 9px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.rl-int-sorting .rl-sort-item::before {
    content: counter(rl-sort-order);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin-right: 2px;
    color: #0f6470;
    background: #e4f8fa;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.rl-int-sorting .rl-sort-item:hover {
    border-color: #16b6c3;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
}

.rl-int-sorting .rl-sort-dragging {
    opacity: 0.92;
    transform: scale(1.015);
    border-color: #0f7a36 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
}

.rl-int-sorting .rl-sort-dropped {
    animation: rl-sort-landed 0.65s ease-out;
}

@keyframes rl-sort-landed {
    0% {
        background: #e7f8ed;
        border-color: #0f7a36;
        box-shadow: 0 0 0 4px rgba(15, 122, 54, 0.18), 0 8px 18px rgba(15, 23, 42, 0.18);
        transform: scale(1.018);
    }
    55% {
        background: #f1fbf4;
        border-color: #0f7a36;
        box-shadow: 0 0 0 2px rgba(15, 122, 54, 0.12), 0 4px 12px rgba(15, 23, 42, 0.12);
        transform: scale(1);
    }
    100% {
        background: #fff;
        border-color: #cbd5df;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
        transform: scale(1);
    }
}

.rl-int-sorting .rl-sort-drop-before {
    box-shadow: inset 0 4px 0 #0f7a36, 0 4px 12px rgba(15, 23, 42, 0.14);
}

.rl-int-sorting .rl-sort-drop-after {
    box-shadow: inset 0 -4px 0 #0f7a36, 0 4px 12px rgba(15, 23, 42, 0.14);
}

.rl-int-sorting .rl-sort-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    color: #0d7280 !important;
    background: #eefbfd;
    border: 1px solid #c8eef3;
    border-radius: 7px;
    font-size: 16px;
    line-height: 1;
}

.rl-int-sorting .rl-sort-text {
    color: #16202a;
    font-weight: 600;
    line-height: 1.35;
}

.rl-int-checkpoint .rl-scenario-choices,
.rl-int-scenario .rl-scenario-choices {
    max-width: 760px;
    margin: 18px 0 0;
    gap: 10px;
}

.rl-int-checkpoint .rl-scenario-btn,
.rl-int-scenario .rl-scenario-btn {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
    width: 100%;
    min-height: 46px;
    padding: 12px 18px;
    border-radius: 8px;
    line-height: 1.35;
    text-align: left !important;
}

.rl-int-checkpoint .rl-scenario-btn:not(.rl-btn-correct):not(.rl-btn-wrong),
.rl-int-scenario .rl-scenario-btn:not(.rl-btn-correct):not(.rl-btn-wrong) {
    background: #fff !important;
    border: 1px solid #cbd5df !important;
    border-left: 4px solid #16b6c3 !important;
    color: #16202a !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.rl-int-checkpoint .rl-scenario-btn:hover:not(:disabled):not(.rl-btn-correct):not(.rl-btn-wrong),
.rl-int-scenario .rl-scenario-btn:hover:not(:disabled):not(.rl-btn-correct):not(.rl-btn-wrong) {
    background: #f4fbfc !important;
    border-color: #16b6c3 !important;
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    .rl-int-checkpoint .rl-scenario-choices,
    .rl-int-scenario .rl-scenario-choices {
        max-width: none;
    }
}

.rl-fill-sentence {
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    font-size: 17px;
    line-height: 2.15;
}

.rl-inline-blank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ddd;
    border-radius: 4px;
    min-height: 34px;
    padding: 3px 12px;
    font-size: 16px;
    line-height: 1.2;
    min-width: 92px;
    max-width: min(12em, 100%) !important;
    text-align: center;
    margin: 0 4px 4px;
    vertical-align: baseline;
    width: 8.5em !important;
}

.rl-blank-correct {
    border-color: #28a745;
    background: #e8f5e9;
}

.rl-blank-wrong {
    border-color: #dc3545;
    background: #ffebee;
}

.rl-match-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 15px 0;
}

.rl-match-left-col, .rl-match-right-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rl-match-left-item {
    background: #fff;
    padding: 12px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rl-match-dropzone {
    background: #e9ecef;
    border: 2px dashed #adb5bd;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    color: #6c757d;
    cursor: pointer;
    min-height: 40px;
}

.rl-match-dropzone.rl-match-filled {
    border-style: solid;
    background: #fff;
    color: #333;
}

.rl-match-dropzone.rl-match-correct {
    border-color: #28a745;
    background: #e8f5e9;
}

.rl-match-dropzone.rl-match-wrong {
    border-color: #dc3545;
    background: #ffebee;
}

/* --- Action Buttons (Video Controls) --- */
.rl-expand-btn, .rl-toggle-overlays-btn {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #888 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}

.rl-expand-btn:hover, .rl-toggle-overlays-btn:hover {
    color: #333 !important;
    background: none !important;
    border: none !important;
}

/* --- Mobile Optimization (Smartphones & Tablets) --- */
@media (max-width: 768px) {
    /* General Spacing */
    .rl-course-wrapper, .rl-lesson-wrapper, .rl-quiz-wrapper {
        padding: 10px;
    }

    .rl-course-meta {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    /* Navigation & Media Buttons */
    .rl-slide-nav {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .rl-slide-nav button, .rl-expand-btn, .rl-toggle-overlays-btn {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .rl-expand-btn, .rl-toggle-overlays-btn {
        margin-bottom: 5px;
    }

    /* Video Overlays Scaledown */
    .rl-video-overlay {
        font-size: 14px !important;
        padding: 8px 12px !important;
        max-width: 95% !important;
        line-height: 1.2 !important;
    }

    /* Quizzes & Interactions Stacking */
    .rl-match-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .rl-matching-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .rl-matching-row select {
        width: 100% !important;
    }

    /* Course Cards (Dashboard Stacking) */
    .rl-course-card {
        flex-direction: column !important;
        text-align: center;
    }

    .rl-course-card > div:first-child {
        width: 100% !important;
        max-width: none !important;
        margin-bottom: 15px;
    }

    .rl-course-card img {
        width: 100%;
        height: auto;
    }

    /* Typography Scale */
    .rl-lesson-title {
        font-size: 22px !important;
        margin-bottom: 15px !important;
    }

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 20px;
    }
}

.rl-match-draggable {
    background: #fff;
    padding: 12px;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    border: 2px solid #ddd;
    transition: all 0.2s;
}

.rl-match-draggable:hover {
    border-color: #667eea;
}

.rl-match-selected {
    border-color: #667eea !important;
    background: #eef2ff !important;
}

.rl-feedback {
    padding: 12px 16px;
    border-radius: 6px;
    margin-top: 12px;
    font-weight: 500;
}

.rl-fb-correct {
    background: #e8f5e9;
    color: #155724;
}

.rl-fb-wrong {
    background: #ffebee;
    color: #721c24;
}

/* ===== COURSE OUTLINE SIDEBAR ===== */
.rl-course-outline-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.rl-course-outline-overlay.open {
    opacity: 1;
    visibility: visible;
}

.rl-course-outline-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 80%;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.rl-course-outline-sidebar.open {
    transform: translateX(0);
}

.rl-outline-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
}

.rl-outline-header h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

#rl-outline-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #888;
    padding: 0;
    line-height: 1;
}

#rl-outline-close:hover {
    color: #333;
}

.rl-outline-body {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
}

.rl-outline-item {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}

.rl-outline-item:last-child {
    border-bottom: none;
}

.rl-outline-item a {
    text-decoration: none;
    color: #0073aa;
    font-weight: 500;
}

.rl-outline-item a:hover {
    text-decoration: underline;
}

.rl-outline-item.rl-current-lesson {
    background: #f0f7ff;
    border-radius: 6px;
    padding: 12px 10px;
    margin: 0 -10px;
    border-bottom: none;
}

.rl-outline-item.rl-complete {
    color: #28a745;
}

.rl-outline-item.rl-locked {
    opacity: 0.6;
    color: #6c757d;
}

@media (max-width: 768px) {
    .rl-outline-toggle-btn {
        display: none !important;
    }
}

/* ===== TYPOGRAPHY BALANCING ===== */
/* Prevent dangling words on centered poster slides */
.rl-slide-poster .rl-poster-text,
.rl-slide-poster .rl-poster-sub p,
.rl-slide-poster h1,
.rl-slide-poster h2,
.rl-slide-poster h3 {
    text-wrap: balance;
}

/* Prevent single words on the last line of standard lesson paragraphs */
.rl-lesson-content p,
.rl-lesson-content li,
.rl-slide-content p,
.rl-slide-content li {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

/* ===== POSTER SLIDE THEMES ===== */
.rl-slide-poster.rl-theme-dark {
    background: #1a1a1a;
    border-color: #333;
}

.rl-slide-poster.rl-theme-dark .rl-poster-text {
    color: #fff;
}

.rl-slide-poster.rl-theme-dark .rl-poster-sub {
    color: #ccc;
}

.rl-slide-poster.rl-theme-primary {
    background: #007cba;
    border-color: #005a87;
}

.rl-slide-poster.rl-theme-primary .rl-poster-text {
    color: #fff;
}

.rl-slide-poster.rl-theme-primary .rl-poster-sub {
    color: #e3f2fd;
}

.rl-slide-poster.rl-theme-danger {
    background: #dc3545;
    border-color: #c82333;
}

.rl-slide-poster.rl-theme-danger .rl-poster-text {
    color: #fff;
}

.rl-slide-poster.rl-theme-danger .rl-poster-sub {
    color: #ffebee;
}

.rl-slide-poster.rl-theme-warning {
    background: #ffc107;
    border-color: #e0a800;
}

.rl-slide-poster.rl-theme-warning .rl-poster-text {
    color: #212529;
}

.rl-slide-poster.rl-theme-warning .rl-poster-sub {
    color: #495057;
}

.rl-slide-poster.rl-theme-success {
    background: #28a745;
    border-color: #218838;
}

.rl-slide-poster.rl-theme-success .rl-poster-text {
    color: #fff;
}

.rl-slide-poster.rl-theme-success .rl-poster-sub {
    color: #e8f5e9;
}

/* ===== DAY/NIGHT THEME TOGGLE ===== */
.rl-theme-toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%; /* Adapts to perfectly vertically center inside your header */
    padding: 10px;
    box-sizing: border-box;
}

.rl-theme-switch {
    position: relative;
    display: inline-block;
    width: 64px;
    height: 32px;
}

.rl-theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.rl-theme-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #87CEEB; /* Sky blue for day */
    transition: .4s cubic-bezier(0.4, 0.0, 0.2, 1);
    border-radius: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 7px;
    box-sizing: border-box;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.rl-theme-icon-sun, .rl-theme-icon-moon {
    font-size: 14px;
    line-height: 1;
    user-select: none;
    z-index: 1;
}

.rl-theme-slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s cubic-bezier(0.4, 0.0, 0.2, 1);
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

input:checked + .rl-theme-slider {
    background-color: #2c3e50; /* Night sky for dark mode */
}

input:checked + .rl-theme-slider:before {
    transform: translateX(32px);
}

/* ===== DARK MODE OVERRIDES ===== */
/* The class is added to the HTML tag in the head to prevent flashing. */
/* We chain it with 'body' to ensure maximum specificity to overpower Elementor. */
html.rl-dark-mode body {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

html.rl-dark-mode body .rl-slide-viewer,
html.rl-dark-mode body .rl-question-card,
html.rl-dark-mode body .rl-course-card,
html.rl-dark-mode body .rl-outline-sidebar,
html.rl-dark-mode body .rl-outline-header,
html.rl-dark-mode body .rl-int-scenario,
html.rl-dark-mode body .rl-int-sorting,
html.rl-dark-mode body .rl-int-fillinline,
html.rl-dark-mode body .rl-int-matching,
html.rl-dark-mode body .rl-quiz-inline,
html.rl-dark-mode body .rl-slide-poster {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}

html.rl-dark-mode body .rl-slide-header,
html.rl-dark-mode body .rl-lesson-top-bar,
html.rl-dark-mode body .rl-lesson-nav,
html.rl-dark-mode body .rl-outline-item,
html.rl-dark-mode body .rl-lesson-item {
    border-color: #333 !important;
}

html.rl-dark-mode body .rl-btn-secondary {
    background: #2a2a2a !important;
    color: #ddd !important;
    border-color: #444 !important;
}

html.rl-dark-mode body .rl-btn-secondary:hover {
    background: #3a3a3a !important;
}

html.rl-dark-mode body .rl-slide-title,
html.rl-dark-mode body .rl-question-text,
html.rl-dark-mode body h1,
html.rl-dark-mode body h2,
html.rl-dark-mode body h3,
html.rl-dark-mode body strong {
    color: #fff !important;
}

html.rl-dark-mode body .rl-answer-label {
    background: #2a2a2a !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

html.rl-dark-mode body .rl-answer-label:hover {
    background: #333 !important;
}

html.rl-dark-mode body .rl-answer-label.selected {
    background: #003350 !important;
    border-color: #007cba !important;
}

html.rl-dark-mode body .rl-text-answer,
html.rl-dark-mode body .rl-essay-answer,
html.rl-dark-mode body .rl-matching-row select,
html.rl-dark-mode body .rl-scenario-text {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

/* Fix Poster Slide Subtitle Text */
html.rl-dark-mode body .rl-poster-sub {
    color: #e0e0e0 !important;
}

/* Hack to overpower the JavaScript inline styles on the slide dots */
html.rl-dark-mode body .rl-slide-dot:not([style*="0, 124, 186"]):not([style*="#007cba"]) {
    background-color: #1e1e1e !important;
}

/* posters UL should be left justified */
.rl-poster-sub li {
    text-align: left !important;
}

/* ===== ELEMENTOR DARK MODE OVERRIDES ===== */

/* 1. Override Elementor's Global Color Variables */
html.rl-dark-mode body {
    --e-global-color-primary: #ffffff !important;
    --e-global-color-secondary: #e0e0e0 !important;
    --e-global-color-text: #cccccc !important;
}

/* 2. Aggressively target Elementor's hardcoded text widgets */
html.rl-dark-mode body .elementor-heading-title,
html.rl-dark-mode body .elementor-widget-text-editor,
html.rl-dark-mode body .elementor-widget-text-editor *,
html.rl-dark-mode body .elementor-icon-box-title,
html.rl-dark-mode body .elementor-icon-box-description,
html.rl-dark-mode body .elementor-text-editor {
    color: #e0e0e0 !important;
}

/* Force Elementor structural backgrounds to turn dark */
html.rl-dark-mode body .elementor-section,
html.rl-dark-mode body .elementor-container {
    background-color: transparent !important;
}

.rl-actor-observation {
    margin: 4px 0 0;
    font-size: 14px;
    color: #555;
    font-style: italic;
    line-height: 1.4;
    padding: 0px !important;
    margin: 0px !important;
}

html.rl-dark-mode body .rl-actor-observation {
    color: #bbb;
}

/* ===== UNIVERSAL SCENARIO ENGINE (v2.0) - THEME ALIGNED ===== */
.rl-scenario-ui {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 0px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    color: #333;
    position: relative;
    border: 1px solid #e0e0e0;
    white-space: normal;
    padding: 15px 0px 15px 0px;
}

body.rl-scenario-page-bg {
    position: relative;
}

body.rl-scenario-page-bg::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--rl-page-bg);
    background-size: cover;
    background-position: center;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}

body.rl-scenario-page-bg .rl-scenario-ui {
    position: relative;
    z-index: 1;
}

/* ===== THEME OVERRIDES — Buttons & Controls ===== */
.rl-scenario-ui .rl-btn,
.rl-scenario-ui .rl-action,
.rl-scenario-ui .rl-triage-dot,
.rl-scenario-ui .rl-toolkit-card,
.rl-scenario-ui .rl-close-loadout,
.rl-scenario-ui .rl-toolkit-panel-close,
.rl-scenario-ui .rl-safe-action,
.rl-scenario-ui .rl-log-toggle,
.rl-scenario-ui .rl-brief-toggle,
.rl-scenario-ui #rl-log-toggle,
.rl-scenario-ui #rl-brief-toggle,
.rl-scenario-ui .rl-assessment-btn,
.rl-scenario-ui .rl-manual-btn,
.rl-scenario-ui #rl-end-scenario,
.rl-scenario-ui #rl-too-dangerous,
.rl-scenario-ui #rl-restart-scenario,
.rl-scenario-ui #rl-open-safe,
.rl-scenario-ui #rl-close-safe,
.rl-scenario-ui .rl-featured-thumb,
.rl-scenario-ui .rl-check-answer,
.rl-scenario-ui .rl-btn-next,
.rl-scenario-ui .rl-btn-prev,
.rl-scenario-ui .rl-btn-submit,
.rl-scenario-ui .rl-retake-quiz {
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
}

.rl-scenario-ui .rl-btn,
.rl-scenario-ui .rl-action,
.rl-scenario-ui .rl-safe-action,
.rl-scenario-ui .rl-assessment-btn,
.rl-scenario-ui .rl-manual-btn {
    border-width: 1px !important;
    border-style: solid !important;
}

.rl-scenario-ui .rl-triage-dot {
    border-width: 3px !important;
    border-style: solid !important;
}

.rl-scenario-ui .rl-close-loadout,
.rl-scenario-ui .rl-toolkit-panel-close,
.rl-scenario-ui .rl-log-toggle,
.rl-scenario-ui .rl-brief-toggle {
    background: transparent !important;
    border: none !important;
}

.rl-scenario-ui .rl-toolkit-card {
    border-width: 2px !important;
    border-style: solid !important;
}

.rl-scenario-brief {
    background: rgba(248, 249, 250, 0.95);
    border-bottom: 1px solid #e0e0e0;
}

.rl-brief-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    gap: 12px;
    cursor: pointer;
}

.rl-brief-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.rl-brief-title-wrap h3 {
    margin: 0;
    color: #222;
}

.rl-brief-toggle {
    background: #e9ecef;
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    color: #555;
    flex-shrink: 0;
}

.rl-brief-toggle:hover {
    background: #dee2e6;
}

.rl-brief-body {
    padding: 0 20px 16px;
}

.rl-scenario-brief.rl-collapsed .rl-brief-body {
    display: none;
}

.rl-scenario-brief.rl-collapsed .rl-brief-toggle {
    transform: rotate(-90deg);
}

.rl-scenario-brief-content {
    color: #444;
}

.rl-scenario-brief-content p:last-child {
    margin-bottom: 0;
}

/* Toast Notifications */
#rl-scenario-toasts {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99990;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 450px;
    gap: 10px;
    pointer-events: none;
}

.rl-scenario-admin-actions {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 10px;
}

.rl-toast {
    background: #fff;
    color: #333;
    padding: 14px 24px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    border-bottom: 4px solid #0073aa;

    /* Make the toasts clickable */
    pointer-events: auto;
    cursor: pointer;

    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.rl-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.rl-toast-alert {
    border-left-color: #dc3545;
    color: #dc3545;
}

.rl-toast-error {
    border-left-color: #ffc107;
}

/* HUD Dashboard — Streamlined */
.rl-log-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    gap: 16px;
}

.rl-hud-left, .rl-hud-right {
    display: flex;
    align-items: flex-end;
    gap: 20px;
}

.rl-hud-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}

.rl-hud-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    margin-bottom: 3px;
    line-height: 1;
}

.rl-hud-tu {
    font-size: 24px;
    font-weight: 800;
    color: #0073aa;
    line-height: 1;
}

.rl-hud-tu small {
    font-size: 11px;
    color: #888;
    font-weight: 500;
}

.rl-hud-status strong {
    font-size: 20px;
    color: #333;
    line-height: 1;
    font-weight: 800;
}

.rl-hud-end .rl-btn-danger,
.rl-hud-end .rl-btn-warning {
    padding: 7px 14px !important;
    font-size: 11px !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
}

.rl-hud-end .rl-btn-warning {
    margin-right: 6px;
}

/* Scene Hub (Actor Grid) */
.rl-scene-hub {
    padding: 15px 30px 15px 30px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    min-height: 400px;
    background: #f0f4f8;
}

.rl-actor-sprite {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    overflow: visible;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    position: relative;
}

.rl-actor-speech-bubble {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: #333;
    max-width: 220px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 50;
    animation: rl-bubble-pop 0.3s ease;
}

.rl-actor-speech-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #ccc transparent transparent transparent;
}

.rl-actor-speech-bubble::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    z-index: 1;
}

@keyframes rl-bubble-pop {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(6px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes rl-state-flash {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

.rl-actor-state-changed {
    animation: rl-state-flash 1s ease-out;
}

.rl-actor-sprite:hover {
    transform: translateY(-4px);
    border-color: #0073aa;
    box-shadow: 0 8px 16px rgba(0, 115, 170, 0.1);
}

.rl-actor-active {
    border-color: #0073aa !important;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2) !important;
}

.rl-actor-image {
    height: 212px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-image 0.4s ease-in-out;
    background-color: #eee;
    border-bottom: 1px solid #eee;
}

.rl-deceased-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 212px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 2px;
    z-index: 2;
    pointer-events: none;
}

.rl-actor-deceased .rl-actor-image {
    filter: grayscale(100%);
}

.rl-actor-state-name {
    font-size: 11px;
    font-weight: 700;
    color: #0073aa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 2px 0 4px;
}

.rl-actor-deceased .rl-actor-state-name {
    display: none;
}

.rl-actor-details {
    padding: 15px;
    text-align: center;
}

.rl-actor-type {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 4px;
}

.rl-actor-name-line .rl-actor-type {
    margin-bottom: 0;
    flex-shrink: 0;
}

.rl-actor-name-line .rl-actor-name {
    margin-bottom: 0;
}

.rl-actor-name {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
}

.rl-actor-name-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
}

/* Dynamic Triage Badges */
.rl-triage-badge {
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
}

.rl-badge-untriaged {
    background: #e9ecef;
    color: #495057;
}

.rl-badge-green {
    background: #d4edda;
    color: #155724;
}

.rl-badge-yellow {
    background: #fff3cd;
    color: #856404;
}

.rl-badge-red {
    background: #f8d7da;
    color: #721c24;
}

.rl-badge-black {
    background: #343a40;
    color: #fff;
}

/* Loadout Action Menu */
.rl-loadout-menu {
    background: #fff;
    border-top: 1px solid #e0e0e0;
    padding: 15px 20px 16px 16px;
    display: none;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.03);
    position: relative;
}

.rl-loadout-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 20px 0px;
    padding-top: 12px;
    border-top: 1px solid #eee;
    gap: 10px;
}

.rl-loadout-header-main {
    flex: 1;
    min-width: 0;
}

.rl-loadout-type {
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
    background: #e9ecef;
    color: #495057;
}

.rl-loadout-header-main h4 {
    margin: 0 0 2px;
    color: #333;
}

.rl-loadout-header-main .rl-actor-observation {
    margin: 0;
}

.rl-loadout-header-main .rl-actor-vitals {
    margin-top: 4px;
    font-size: 12px;
}

.rl-close-loadout {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: none;
    color: #888;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 28px;
    height: 28px;
    z-index: 10;
    text-align: center;
}

.rl-close-loadout:hover {
    color: #dc3545;
}

.rl-loadout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 30px;
    align-items: start !important;
    align-content: start !important;
}

.rl-loadout-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rl-loadout-section {
    padding: 15px 15px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    position: relative;
}

/* Alternating background for even-numbered boxes in a column */
.rl-loadout-col .rl-loadout-section:nth-child(even) {
    background: #f1fffb; /* Subtle light gray/blue tint */
    border-color: #dee2e6; /* Slightly darker border to match */
}

.rl-loadout-section h5 {

    font-size: 13px;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 1px;
    border-bottom: 1px solid #eee;

}

.rl-manual-techniques {
    margin: 15px 0px;
}

.rl-triage-bar {
    display: flex;
    gap: 8px;
    align-items: center;
}

.rl-triage-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    padding: 0;
    background: #888;
    appearance: none;
    -webkit-appearance: none;
}

.rl-triage-dot:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

.rl-triage-green {
    background: #28a745 !important;
}

.rl-triage-yellow {
    background: #ffc107 !important;
}

.rl-triage-red {
    background: #dc3545 !important;
}

.rl-triage-black {
    background: #1a1a1a !important;
}

/* Actor type styling */
.rl-actor-threat {
    border-color: #dc3545 !important;
}

.rl-actor-threat .rl-actor-type {
    color: #dc3545;
    font-weight: 700;
}

.rl-actor-bystander {
    border-color: #6c757d !important;
}

.rl-actor-bystander .rl-actor-type {
    color: #6c757d;
}

/* Threat action button */
.rl-action-threat {
    background: #dc3545 !important;
    color: #fff !important;
    border-color: #dc3545 !important;
    font-weight: 700;
    width: 100%;
    padding: 14px;
    font-size: 14px;
}

.rl-action-threat:hover {
    background: #c82333 !important;
}

.rl-threat-action-text {
    font-size: 13px;
    color: #555;
    margin: 0 0 10px;
    line-height: 1.5;
    font-style: italic;
}

.rl-action {
    padding: 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    color: #495057;
    font-size: 14px;
    transition: all 0.2s;
    text-align: center;
}

.rl-action:hover {
    background: #eef2ff;
    border-color: #0073aa;
    color: #0073aa;
}

.rl-action:active {
    transform: scale(0.98);
}

/* Action button overrides (overpowers inline styles from shortcode) */
.rl-action[data-val="green"] {
    background: #d4edda !important;
    border-color: #c3e6cb !important;
    color: #155724 !important;
}

.rl-action[data-val="green"]:hover {
    background: #c3e6cb !important;
}

.rl-action[data-val="yellow"] {
    background: #fff3cd !important;
    border-color: #ffeeba !important;
    color: #856404 !important;
}

.rl-action[data-val="yellow"]:hover {
    background: #ffeeba !important;
}

.rl-action[data-val="red"] {
    background: #f8d7da !important;
    border-color: #f5c6cb !important;
    color: #721c24 !important;
}

.rl-action[data-val="red"]:hover {
    background: #f5c6cb !important;
}

.rl-action[data-val="black"] {
    background: #343a40 !important;
    border-color: #343a40 !important;
    color: #fff !important;
}

.rl-action[data-val="black"]:hover {
    background: #23272b !important;
}

@media (max-width: 768px) {
    .rl-loadout-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .rl-scene-hub {
        grid-template-columns: 1fr 1fr;
        padding: 15px;
    }
}

/* ===== SCENARIO ENGINE DARK MODE OVERRIDES ===== */
html.rl-dark-mode body .rl-scenario-ui {
    background: #1e1e1e !important;
    border-color: #333 !important;
    color: #e0e0e0 !important;
}

html.rl-dark-mode body .rl-log-toolbar {
    background: #2a2a2a !important;
}

html.rl-dark-mode body .rl-hud-label {
    color: #888 !important;
}

html.rl-dark-mode body .rl-hud-tu {
    color: #87ceeb !important;
}

html.rl-dark-mode body .rl-hud-status strong {
    color: #fff !important;
}

html.rl-dark-mode body .rl-scene-hub {
    background: #121212 !important;
}

html.rl-dark-mode body .rl-loadout-col .rl-loadout-section:nth-child(even) {
    background: #252525 !important; /* Subtle contrast against the #1e1e1e base */
    border-color: #444 !important;
}

html.rl-dark-mode body .rl-actor-sprite {
    background: #2a2a2a !important;
    border-color: #444 !important;
}

html.rl-dark-mode body .rl-actor-sprite:hover, html.rl-dark-mode body .rl-actor-active {
    border-color: #007cba !important;
}

html.rl-dark-mode body .rl-actor-image {
    border-bottom-color: #444 !important;
    opacity: 0.8;
}

html.rl-dark-mode body .rl-deceased-overlay {
    background: rgba(0, 0, 0, 0.75);
}

html.rl-dark-mode body .rl-actor-state-name {
    color: #5dade2;
}

html.rl-dark-mode body .rl-actor-name {
    color: #fff !important;
}

html.rl-dark-mode body .rl-actor-speech-bubble {
    background: #2a2a2a;
    border-color: #555;
    color: #e0e0e0;
}

html.rl-dark-mode body .rl-actor-speech-bubble::after {
    border-color: #555 transparent transparent transparent;
}

html.rl-dark-mode body .rl-actor-speech-bubble::before {
    border-color: #2a2a2a transparent transparent transparent;
}

html.rl-dark-mode body .rl-loadout-menu {
    background: #1e1e1e !important;
    border-top-color: #333 !important;
}

html.rl-dark-mode body .rl-loadout-header {
    border-top-color: #333 !important;
}

html.rl-dark-mode body .rl-loadout-header h4 {
    color: #fff !important;
}

html.rl-dark-mode body .rl-action:not([data-val]) {
    background: #2a2a2a !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

html.rl-dark-mode body .rl-action:not([data-val]):hover {
    background: #333 !important;
    border-color: #007cba !important;
    color: #fff !important;
}

html.rl-dark-mode body .rl-toast {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444;
    border-bottom: 4px solid #007cba !important;
}

/* ===== INJURY SYSTEM ===== */
.rl-actor-hp-bar {
    width: 100%;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
    margin: 8px 0;
}

.rl-actor-hp-bar {
    width: 100% !important;
    height: 10px !important;
    background-color: #e9ecef !important;
    border-radius: 4px !important;
    margin: 12px 0 !important;
    display: block !important;
    position: relative !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

.rl-actor-hp-fill {
    height: 100% !important;
    background-color: #28a745 !important;
    transition: width 0.4s ease, background-color 0.3s ease;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

.rl-actor-hp-fill.rl-hp-critical {
    background-color: #dc3545 !important;
}

#rl-discovery-items li,
#rl-assessment-panel,
.rl-assessment-result,
.rl-log-entry,
.rl-action-log {
    white-space: pre-line !important;
}

/* Force specific visual order in the loadout grid */
/*#rl-section-assessment { order: 1 !important; }  !* Visible Injuries *!*/
/*#rl-section-findings { order: 2 !important; }    !* Discoveries *!*/
/*#rl-section-toolkit { order: 3 !important; }     !* Open Med Kit *!*/
/*#rl-section-assessments { order: 4 !important; } !* Assessments Panel *!*/
/*#rl-section-triage { order: 5 !important; }      !* Triage *!*/

/* Pulse animation for primary action buttons */
@keyframes rl-pulse-action {
    0% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
        transform: scale(1);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(40, 167, 69, 0);
        transform: scale(1.04);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
        transform: scale(1);
    }
}

.rl-pulse-btn {
    animation: rl-pulse-action 2s infinite !important;
    border-color: #ff0000 !important; /* Ensures the pulse color matches the border */
}

/* Force compact spacing inside loadout panels to combat theme bleeds */
#rl-injury-items, #rl-discovery-items, #rl-assessment-panel {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#rl-injury-items > li, #rl-discovery-items > li {
    margin-top: 0 !important;
}

.rl-injury-panel {
    grid-column: 1 / -1;
}

.rl-injury-panel h5 {
    margin-bottom: 10px;
}

.rl-injury-items {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Urgent pulsing for untreated visible injuries */
@keyframes rl-wound-pulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.3); border-color: #f5c6cb; }
    70% { box-shadow: 0 0 0 8px rgba(220, 53, 69, 0); border-color: #e9ecef; }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); border-color: #f5c6cb; }
}

.rl-injury-item {
    background: #f8f9fa;
    border: 1px solid #f00;
    border-radius: 6px;
    padding: 12px 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    transition: all 0.3s ease;
}

.rl-injury-item:not(.rl-injury-treated) {
    border-left: 4px solid #dc3545 !important;
    animation: rl-wound-pulse 2s infinite;
}

.rl-injury-item.rl-injury-treated {
    border-left: 4px solid #28a745 !important;
    animation: none !important;
}

.rl-injury-part {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #e3f2fd;
    color: #1565c0;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 700;
}

.rl-injury-name {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.rl-injury-desc {
    flex: 1 1 100%;
    font-size: 13px;
    color: #666;
    margin-top: 2px;
}

.rl-injury-meta {
    font-size: 12px;
    color: #888;
    margin-left: auto;
    font-weight: 500;
}

.rl-injury-followup-badge {
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
}

.rl-followup-pending {
    background: #fff3cd;
    color: #856404;
}

.rl-followup-complete {
    background: #d4edda;
    color: #155724;
}

.rl-injury-none {
    color: #888;
    font-size: 13px;
    font-style: italic;
    margin: 0;
}

.rl-actor-vitals {
    margin-top: 10px;
    font-size: 13px;
    color: #666;
}

.rl-bare-checklist {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.rl-bare-step {
    align-items: center;
    border-radius: 4px;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    height: 22px;
    justify-content: center;
    width: 22px;
}

.rl-bare-complete {
    background: #d4edda;
    color: #155724;
}

.rl-bare-pending {
    background: #f1f3f5;
    color: #6c757d;
}

.rl-vital-hp strong {
    color: #333;
}

/* Admin injury builder styles (loaded in admin but scoped here for consistency) */
.rl-injury-row label {
    font-size: 12px;
    color: #555;
    font-weight: 600;
}

/* Dark mode overrides for injuries */
html.rl-dark-mode body .rl-actor-hp-bar {
    background: #444 !important;
}

html.rl-dark-mode body .rl-injury-item {
    background: #2a2a2a !important;
    border-color: #444 !important;
}

html.rl-dark-mode body .rl-injury-part {
    background: #1565c0 !important;
    color: #fff !important;
}

html.rl-dark-mode body .rl-injury-name {
    color: #e0e0e0 !important;
}

html.rl-dark-mode body .rl-injury-desc {
    color: #aaa !important;
}

html.rl-dark-mode body .rl-injury-meta {
    color: #888 !important;
}

html.rl-dark-mode body .rl-injury-none {
    color: #888 !important;
}

html.rl-dark-mode body .rl-actor-vitals {
    color: #aaa !important;
}

html.rl-dark-mode body .rl-vital-hp strong {
    color: #fff !important;
}

/* ===== ASSESSMENT BUTTONS ===== */
.rl-assessment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0px 0px 40px 0px;
}

.rl-assessment-btn {
    padding: 10px 8px;
    font-size: 13px;
    text-align: center;
}

/* Injury Type Badges */
.rl-injury-type {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 700;
}

.rl-type-bleeding {
    background: #f8d7da;
    color: #721c24;
}

.rl-type-airway {
    background: #fff3cd;
    color: #856404;
}

.rl-type-respiration {
    background: #d1ecf1;
    color: #0c5460;
}

.rl-type-tbi {
    background: #e2e3f3;
    color: #383d7d;
}

.rl-type-circulation {
    background: #d4edda;
    color: #155724;
}

.rl-type-other {
    background: #e9ecef;
    color: #495057;
}

/* Dark mode overrides for assessments & types */
html.rl-dark-mode body .rl-assessment-btn {
    background: #2a2a2a !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

html.rl-dark-mode body .rl-assessment-btn:hover {
    background: #333 !important;
    border-color: #007cba !important;
    color: #fff !important;
}

html.rl-dark-mode body .rl-type-bleeding {
    background: #5c1d24 !important;
    color: #f5c6cb !important;
}

html.rl-dark-mode body .rl-type-airway {
    background: #5c4d1c !important;
    color: #ffeeba !important;
}

html.rl-dark-mode body .rl-type-respiration {
    background: #1c4d5c !important;
    color: #bee5eb !important;
}

html.rl-dark-mode body .rl-type-tbi {
    background: #2c2d5c !important;
    color: #d6d8f0 !important;
}

html.rl-dark-mode body .rl-type-circulation {
    background: #1c5c2e !important;
    color: #c3e6cb !important;
}

html.rl-dark-mode body .rl-type-other {
    background: #3a3a3a !important;
    color: #ccc !important;
}

/* ===== TOOLKIT GRID ===== */
.rl-toolkit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

.rl-toolkit-btn {
    padding: 10px 8px;
    font-size: 13px;
    text-align: center;
    background: #f0f7ff;
    border-color: #b8daff;
    color: #004085;
}

.rl-toolkit-btn:hover {
    background: #dbeaff;
    border-color: #0073aa;
}

/* Treated injury styling */
.rl-injury-treated {
    opacity: 0.75;
    background: #f0fff4 !important;
    border-color: #c3e6cb !important;
}

.rl-injury-treated-badge {
    font-size: 11px;
    font-weight: 700;
    color: #155724;
    background: #d4edda;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: auto;
}

/* Dark mode overrides for toolkit & treated */
html.rl-dark-mode body .rl-toolkit-btn {
    background: #1a2a3a !important;
    border-color: #2a4a6a !important;
    color: #87ceeb !important;
}

html.rl-dark-mode body .rl-toolkit-btn:hover {
    background: #243a4f !important;
    border-color: #007cba !important;
    color: #fff !important;
}

html.rl-dark-mode body .rl-injury-treated {
    background: #1c3a24 !important;
    border-color: #2e6b3a !important;
    opacity: 0.8;
}

html.rl-dark-mode body .rl-injury-treated-badge {
    background: #2e6b3a !important;
    color: #d4edda !important;
}

/* ===== SCENARIO END & DEBRIEF ===== */
.rl-hud-end {
    text-align: right;
}

.rl-btn-danger {
    background: #dc3545 !important;
    color: #fff !important;
    border: 1px solid #dc3545 !important;
    padding: 8px 18px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.rl-btn-danger:hover {
    background: #c82333 !important;
}

.rl-btn-warning {
    background: #fd7e14 !important;
    color: #fff !important;
    border: 1px solid #fd7e14 !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-right: 8px;
}

.rl-btn-warning:hover {
    background: #e56b0a !important;
}

.rl-assessment-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000; /* Increased to beat the toasts */
    display: flex;
    align-items: center;
    justify-content: center;
}

.rl-assessment-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.rl-assessment-modal-inner {
    position: relative;
    background: #fff;
    border-radius: 10px;
    padding: 28px 32px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.rl-assessment-modal-inner h4 {
    margin: 5px 0px 10px 0px;
    font-size: 18px;
    color: #23282d;
}

#rl-threat-scan-modal .rl-btn {
    line-height: 1.35;
    overflow-wrap: normal;
    word-break: normal;
}

.rl-assessment-modal-inner .rl-close-loadout {
    position: absolute;
    top: 10px;
    right: 14px;
    background: transparent;
    border: none;
    color: #888;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 28px;
    height: 28px;
}

.rl-assessment-modal-body p {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    margin: 0 0 0px;
}

.rl-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 18px;
}

.rl-assessment-summary {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.rl-assessment-summary-row {
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    padding: 10px 12px;
}

.rl-assessment-summary-row span {
    display: block;
    color: #646970;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.rl-assessment-summary-row p {
    margin: 0;
}

.rl-assessment-prompt {
    font-weight: 600;
    color: #23282d;
    margin-bottom: 12px;
}

.rl-assessment-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.rl-btn-normal, .rl-btn-abnormal {
    flex: 1;
    padding: 12px 16px;
    border-radius: 6px;
    border: 2px solid #ddd;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.rl-btn-normal:hover {
    border-color: #28a745;
    background: #e8f5e9;
    color: #1e7e34;
}

.rl-btn-abnormal:hover {
    border-color: #dc3545;
    background: #f8d7da;
    color: #721c24;
}

.rl-assessment-feedback {
    text-align: center;
}

.rl-assessment-feedback-result {
    font-size: 16px;
    font-weight: 700;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.rl-feedback-correct {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.rl-feedback-incorrect {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Dark mode assessment modal */
html.rl-dark-mode body .rl-assessment-modal-inner {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
    border: 1px solid #333;
}

html.rl-dark-mode body .rl-assessment-modal-inner h4 {
    color: #fff !important;
}

html.rl-dark-mode body .rl-assessment-modal-body p {
    color: #ccc !important;
}

html.rl-dark-mode body .rl-assessment-summary-row {
    background: #242424;
    border-color: #444;
}

html.rl-dark-mode body .rl-assessment-summary-row span {
    color: #b8b8b8;
}

html.rl-dark-mode body .rl-assessment-prompt {
    color: #fff !important;
}

html.rl-dark-mode body .rl-btn-normal, html.rl-dark-mode body .rl-btn-abnormal {
    background: #2a2a2a !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

html.rl-dark-mode body .rl-btn-normal:hover {
    background: #1b4332 !important;
    border-color: #28a745 !important;
    color: #fff !important;
}

html.rl-dark-mode body .rl-btn-abnormal:hover {
    background: #5c1d24 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

html.rl-dark-mode body .rl-feedback-correct {
    background: #1b4332 !important;
    color: #90ee90 !important;
    border-color: #28a745 !important;
}

html.rl-dark-mode body .rl-feedback-incorrect {
    background: #5c1d24 !important;
    color: #ffb3ba !important;
    border-color: #dc3545 !important;
}

/* ===== SCENARIO LIST ===== */
.rl-scenario-list {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}

.rl-scenario-list-title {
    font-size: 22px;
    margin-bottom: 20px;
    color: #23282d;
}

.rl-scenario-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.rl-scenario-list-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rl-scenario-list-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.rl-scenario-list-img {
    width: 100%;
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: #e9ecef;
}

.rl-scenario-list-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 13px;
}

.rl-scenario-list-card-body {
    padding: 16px;
}

.rl-scenario-list-card-body h4 {
    margin: 0 0 8px;
    font-size: 16px;
    color: #23282d;
}

.rl-scenario-list-status {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    margin-bottom: 12px;
    background: #e9ecef;
    color: #666;
}

.rl-scenario-list-card.rl-scenario-passed .rl-scenario-list-status {
    background: #d4edda;
    color: #155724;
}

.rl-scenario-list-card.rl-scenario-failed .rl-scenario-list-status {
    background: #f8d7da;
    color: #721c24;
}

.rl-scenario-list-card-body .rl-btn {
    width: 100%;
    text-align: center;
}

.rl-scenario-list-empty {
    color: #666;
    font-style: italic;
    padding: 20px;
}

/* Dark mode scenario list */
html.rl-dark-mode body .rl-scenario-list-title {
    color: #fff !important;
}

html.rl-dark-mode body .rl-scenario-list-card {
    background: #1e1e1e !important;
    border-color: #333 !important;
}

html.rl-dark-mode body .rl-scenario-list-card-body h4 {
    color: #fff !important;
}

html.rl-dark-mode body .rl-scenario-list-status {
    background: #333 !important;
    color: #aaa !important;
}

html.rl-dark-mode body .rl-scenario-list-card.rl-scenario-passed .rl-scenario-list-status {
    background: #1b4332 !important;
    color: #90ee90 !important;
}

html.rl-dark-mode body .rl-scenario-list-card.rl-scenario-failed .rl-scenario-list-status {
    background: #5c1d24 !important;
    color: #ffb3ba !important;
}

html.rl-dark-mode body .rl-scenario-list-img-placeholder {
    background: #2a2a2a !important;
    color: #888 !important;
}

.rl-scenario-debrief {
    background: #f8f9fa;
    padding: 40px 20px;
    min-height: 500px;
}

.rl-debrief-card {
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e0e0;
}

.rl-debrief-card h2 {
    text-align: center;
    margin-bottom: 30px;
}

.rl-debrief-score {
    text-align: center;
    margin-bottom: 30px;
}

.rl-score-ring {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: conic-gradient(#0073aa calc(var(--score) * 1%), #e9ecef 0);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 32px;
    font-weight: 800;
    color: #333;
    position: relative;
}

.rl-score-ring::before {
    content: '';
    position: absolute;
    width: 110px;
    height: 110px;
    background: #fff;
    border-radius: 50%;
}

.rl-score-ring span {
    position: relative;
    z-index: 1;
}

.rl-score-label {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
}

.rl-pass {
    color: #28a745;
}

.rl-fail {
    color: #dc3545;
}

.rl-debrief-status {
    margin-top: 10px;
    font-size: 14px;
    color: #856404;
    background: #fff3cd;
    border: 1px solid #ffeeba;
    border-radius: 6px;
    padding: 10px 16px;
    display: inline-block;

}

.rl-debrief-treatment {
    text-align: center;
}

.rl-debrief-breakdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 30px;
    text-align: center;
}

@media (max-width: 768px) {
    .rl-debrief-breakdown {
        grid-template-columns: repeat(2, 1fr);
    }
}

.rl-breakdown-item {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    font-size: 14px;
}

.rl-breakdown-item strong {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 4px;
}

.rl-debrief-skill-report {
    margin-bottom: 30px;
}

.rl-critical-failures {
    background: #fff5f5;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    margin-bottom: 24px;
    padding: 16px 18px;
}

.rl-critical-failures h3,
.rl-attempt-history h3 {
    margin: 0 0 12px;
}

.rl-critical-failures ul {
    margin-bottom: 0;
}

.rl-debrief-skill-report h3 {
    margin: 0 0 12px;
}

.rl-skill-report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.rl-skill-report-item {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 14px;
}

.rl-skill-report-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.rl-skill-report-bar {
    background: #e4e7eb;
    border-radius: 999px;
    height: 8px;
    margin: 10px 0;
    overflow: hidden;
}

.rl-skill-report-bar span {
    background: #1f8f6a;
    display: block;
    height: 100%;
}

.rl-skill-report-status {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.rl-skill-report-item p {
    margin: 6px 0 0;
}

.rl-remediation-link {
    font-weight: 700;
}

.rl-attempt-history {
    border-top: 1px solid #e0e0e0;
    margin-top: 30px;
    padding-top: 24px;
}

.rl-attempt-history table,
.rl-instructor-live-mode table {
    width: 100%;
}

.rl-live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.rl-live-actor {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 14px;
}

.rl-live-actor h3 {
    margin-top: 0;
}

.rl-inline-form {
    display: inline;
}

.rl-debrief-notes {
    background: #f7fbff;
    border: 1px solid #cfe3f5;
    border-left: 4px solid #0073aa;
    border-radius: 6px;
    margin-bottom: 30px;
    padding: 20px 22px;
}

.rl-debrief-notes h3 {
    margin: 0 0 10px;
    font-size: 18px;
}

.rl-debrief-notes-content p,
.rl-debrief-notes-content ul,
.rl-debrief-notes-content ol {
    line-height: 1.55;
    margin: 0 0 12px;
}

.rl-debrief-notes-content > :first-child {
    margin-top: 0;
}

.rl-debrief-notes-content > :last-child {
    margin-bottom: 0;
}

.rl-safe-focus-content {
    background: #d0ffd0;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 14px;
    padding: 14px 16px;
    text-align: left;
}

.rl-safe-focus-content > :first-child {
    margin-top: 0;
}

.rl-safe-focus-content > :last-child {
    margin-bottom: 0;
}

.rl-safe-evacuation-reminder {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    color: #856404;
    margin: 0 0 16px;
    padding: 12px 14px !important;
    text-align: left;
}

.rl-debrief-actor {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}

.rl-debrief-actor:last-child {
    border-bottom: none;
}

.rl-debrief-actor h4 {
    margin: 0 0 10px;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rl-triage-tag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 700;
}

.rl-tag-green {
    background: #d4edda;
    color: #155724;
}

.rl-tag-yellow {
    background: #fff3cd;
    color: #856404;
}

.rl-tag-red {
    background: #f8d7da;
    color: #721c24;
}

.rl-tag-black {
    background: #343a40;
    color: #fff;
}

.rl-tag-untriaged {
    background: #e9ecef;
    color: #495057;
}

.rl-correct-badge {
    color: #28a745;
    font-size: 12px;
}

.rl-wrong-badge {
    color: #dc3545;
    font-size: 12px;
}

.rl-debrief-injuries {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rl-debrief-injuries li {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}

.rl-debrief-injuries li.rl-injury-treated {
    background: #f0fff4;
    border-color: #c3e6cb;
}

.rl-debrief-injuries li.rl-injury-missed {
    background: #fff5f5;
    border-color: #f5c6cb;
}

.rl-debrief-injuries li.rl-injury-exempt {
    background: #f8f9fa;
    border-color: #dee2e6;
    color: #666;
}

.rl-injury-type-small {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    background: #e3f2fd;
    color: #1565c0;
    padding: 2px 6px;
    border-radius: 3px;
}

.rl-missed {
    color: #dc3545;
}

.rl-debrief-actions {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* Toolkit images */
.rl-toolkit-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
    margin: 0 auto 4px;
}

/* Dark mode debrief */
html.rl-dark-mode body .rl-scenario-debrief {
    background: #121212 !important;
}

html.rl-dark-mode body .rl-debrief-card {
    background: #1e1e1e !important;
    border-color: #333 !important;
    color: #e0e0e0 !important;
}

html.rl-dark-mode body .rl-debrief-card h2 {
    color: #fff !important;
}

html.rl-dark-mode body .rl-score-ring::before {
    background: #1e1e1e !important;
}

html.rl-dark-mode body .rl-score-ring span {
    color: #fff !important;
}

html.rl-dark-mode body .rl-breakdown-item {
    background: #2a2a2a !important;
    color: #ccc !important;
}

html.rl-dark-mode body .rl-skill-report-item {
    background: #2a2a2a !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

html.rl-dark-mode body .rl-critical-failures {
    background: #3a1c1c !important;
    border-color: #6b2e2e !important;
    color: #e0e0e0 !important;
}

html.rl-dark-mode body .rl-live-actor {
    background: #2a2a2a !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

html.rl-dark-mode body .rl-skill-report-bar {
    background: #3a3a3a !important;
}

html.rl-dark-mode body .rl-debrief-notes {
    background: #2a2a2a !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

html.rl-dark-mode body .rl-debrief-actor h4 {
    color: #fff !important;
}

html.rl-dark-mode body .rl-debrief-injuries li {
    background: #2a2a2a !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

html.rl-dark-mode body .rl-debrief-injuries li.rl-injury-treated {
    background: #1c3a24 !important;
    border-color: #2e6b3a !important;
}

html.rl-dark-mode body .rl-debrief-injuries li.rl-injury-missed {
    background: #3a1c1c !important;
    border-color: #6b2e2e !important;
}

html.rl-dark-mode body .rl-debrief-injuries li.rl-injury-exempt {
    background: #24282d !important;
    border-color: #3a4048 !important;
    color: #aaa !important;
}

html.rl-dark-mode body .rl-no-injuries {
    color: #888 !important;
}

html.rl-dark-mode body .rl-debrief-actions {
    border-top-color: #333 !important;
}

/* ===== ACTION LOG — Floating Bottom ===== */
.rl-action-log {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(248, 249, 250, 0.97);
    backdrop-filter: blur(8px);
    border-top: 1px solid #e0e0e0;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease;
}

.rl-action-log.rl-log-collapsed .rl-log-entries {
    display: none;
}

.rl-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    background: #e9ecef;
    cursor: pointer;
    gap: 12px;
}

.rl-log-header .rl-log-toolbar {
    min-width: 0;
}

.rl-log-header .rl-hud-left {
    flex: 0 0 auto;
}

.rl-log-header .rl-hud-right {
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
}

.rl-log-toggle {
    background: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 24px;
    height: 24px;
    line-height: 24px;
}

.rl-log-entries {
    max-height: 160px;
    overflow-y: auto;
    padding: 8px 20px;
}

.rl-log-entry {
    font-size: 12px;
    padding: 3px 0;
    border-bottom: 1px solid #eee;
    color: #555;
    transition: background 0.8s ease;
}

.rl-log-entry.rl-log-new {
    background: #fff3cd;
}

.rl-log-entry:last-child {
    border-bottom: none;
}

.rl-log-time {
    color: #888;
    font-size: 10px;
}

body.rl-scenario-page-bg {
    padding-bottom: 220px;
}

/* ===== ACTOR WOUND TAGS ===== */
.rl-actor-wounds {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin-top: 8px;
}

.rl-wound-tag {
    font-size: 9px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.3px;
}

.rl-wound-bleeding {
    background: #f8d7da;
    color: #721c24;
}

.rl-wound-airway {
    background: #fff3cd;
    color: #856404;
}

.rl-wound-respiration {
    background: #d1ecf1;
    color: #0c5460;
}

.rl-wound-tbi {
    background: #e2e3f5;
    color: #383d7d;
}

.rl-wound-circulation {
    background: #d4edda;
    color: #155724;
}

.rl-wound-other {
    background: #e9ecef;
    color: #495057;
}

.rl-wound-treated {
    opacity: 0.6;
    text-decoration: line-through;
}

/* Dark mode overrides */
html.rl-dark-mode body .rl-action-log {
    background: rgba(30, 30, 30, 0.97) !important;
    border-top-color: #333 !important;
}

html.rl-dark-mode body .rl-log-header {
    background: #2a2a2a !important;
    color: #aaa !important;
}

html.rl-dark-mode body .rl-log-entry {
    color: #ccc !important;
    border-bottom-color: #333 !important;
}

html.rl-dark-mode body .rl-log-time {
    color: #888 !important;
}

html.rl-dark-mode body .rl-wound-bleeding {
    background: #5c1d24 !important;
    color: #f5c6cb !important;
}

html.rl-dark-mode body .rl-wound-airway {
    background: #5c4d1c !important;
    color: #ffeeba !important;
}

html.rl-dark-mode body .rl-wound-respiration {
    background: #1c4d5c !important;
    color: #bee5eb !important;
}

html.rl-dark-mode body .rl-wound-tbi {
    background: #2c2d5c !important;
    color: #d6d8f0 !important;
}

html.rl-dark-mode body .rl-wound-circulation {
    background: #1c5c2e !important;
    color: #c3e6cb !important;
}

html.rl-dark-mode body .rl-wound-other {
    background: #3a3a3a !important;
    color: #ccc !important;
}

html.rl-dark-mode body .rl-debrief-status {
    background: #5c4d1c !important;
    border-color: #856404 !important;
    color: #ffeeba !important;
}

/* ===== FLOATING TOOLKIT (IFAK) ===== */
.rl-toolkit-float {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #dc3545;
    border: 3px solid #fff;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
    cursor: pointer;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.rl-toolkit-float:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.5);
}

.rl-toolkit-float svg {
    width: 32px;
    height: 32px;
    fill: #fff;
}

.rl-toolkit-float .rl-toolkit-count {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: #fff;
    color: #dc3545;
    font-size: 11px;
    font-weight: 800;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #dc3545;
}

/* Toolkit Panel Overlay */
.rl-toolkit-panel {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.rl-toolkit-panel.rl-open {
    display: flex;
}

.rl-toolkit-panel-inner {
    background: #fff;
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
}

.rl-toolkit-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.rl-toolkit-panel-header h4 {
    margin: 0;
    font-size: 18px;
}

.rl-toolkit-panel-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #888;
    line-height: 1;
}

.rl-toolkit-panel-close:hover {
    color: #dc3545;
}

.rl-toolkit-panel-body {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.rl-toolkit-card {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.rl-toolkit-card:hover {
    border-color: #0073aa;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.rl-toolkit-card img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
    margin: 0 auto 8px;
}

.rl-toolkit-card-name {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    display: block;
}

.rl-toolkit-card-cost {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    display: block;
}

.rl-toolkit-card-category {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 6px;
    display: inline-block;
}

.rl-toolkit-card-category.medical {
    background: #e3f2fd;
    color: #1565c0;
}

.rl-toolkit-card-category.tactical {
    background: #fff3e0;
    color: #e65100;
}

/* ===== FEATURED IMAGE MODAL ===== */
.rl-featured-thumb {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
    margin: 10px auto 10px auto;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #555;
    transition: all 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.rl-featured-thumb:hover {
    border-color: #0073aa;
    color: #0073aa;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.rl-featured-thumb img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
}

.rl-featured-thumb-label {
    font-weight: 600;
    color: #333;
}

.rl-featured-thumb-hint {
    font-size: 11px;
    color: #888;
    margin-left: auto;
    padding-left: 10px;
    border-left: 1px solid #e0e0e0;
}

.rl-featured-thumb:hover .rl-featured-thumb-label {
    color: #0073aa;
}

.rl-featured-thumb:hover .rl-featured-thumb-hint {
    color: #666;
}

.rl-scenario-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 100000; /* Increased to beat the toasts */
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.rl-scenario-modal.rl-open {
    display: flex;
}

.rl-scenario-modal-inner {
    background: #fff;
    border-radius: 12px;
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.rl-scenario-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
}

.rl-scenario-modal-close:hover {
    background: rgba(0, 0, 0, 0.7);
}

.rl-scenario-modal-img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
    display: block;
}

.rl-scenario-modal-body {
    padding: 24px;
}

.rl-scenario-modal-body h2 {
    margin: 0 0 12px;
    font-size: 24px;
}

.rl-scenario-modal-body p {
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* Dark mode for new components */
html.rl-dark-mode body .rl-toolkit-panel-inner {
    background: #1e1e1e;
    border-color: #333;
}

html.rl-dark-mode body .rl-toolkit-panel-header {
    border-bottom-color: #333;
}

html.rl-dark-mode body .rl-toolkit-panel-header h4 {
    color: #fff;
}

html.rl-dark-mode body .rl-toolkit-card {
    background: #2a2a2a;
    border-color: #444;
}

html.rl-dark-mode body .rl-toolkit-card:hover {
    border-color: #007cba;
}

html.rl-dark-mode body .rl-toolkit-card-name {
    color: #e0e0e0;
}

html.rl-dark-mode body .rl-scenario-modal-inner {
    background: #1e1e1e;
}

html.rl-dark-mode body .rl-scenario-modal-body h2 {
    color: #fff;
}

html.rl-dark-mode body .rl-scenario-modal-body p {
    color: #ccc;
}

html.rl-dark-mode body .rl-featured-thumb {
    background: #2a2a2a;
    border-color: #444;
    color: #ccc;
}

html.rl-dark-mode body .rl-featured-thumb-label {
    color: #eee;
}

html.rl-dark-mode body .rl-featured-thumb-hint {
    color: #888;
    border-left-color: #444;
}

html.rl-dark-mode body .rl-featured-thumb:hover .rl-featured-thumb-label {
    color: #5bc0de;
}

html.rl-dark-mode body .rl-featured-thumb:hover .rl-featured-thumb-hint {
    color: #aaa;
}

/* Dark mode for brief and loadout header */
html.rl-dark-mode body .rl-brief-header {
    background: #2a2a2a;
}

html.rl-dark-mode body .rl-brief-title-wrap h3 {
    color: #fff;
}

html.rl-dark-mode body .rl-brief-toggle {
    background: #444;
    color: #ccc;
}

html.rl-dark-mode body .rl-brief-toggle:hover {
    background: #555;
}

html.rl-dark-mode body .rl-loadout-header-main h4 {
    color: #fff;
}

html.rl-dark-mode body .rl-loadout-type {
    background: #444;
    color: #ccc;
}

html.rl-dark-mode body .rl-triage-dot {
    border-color: #333;
}

html.rl-dark-mode body .rl-action-threat {
    background: #5c1d24 !important;
    border-color: #721c24 !important;
}

html.rl-dark-mode body .rl-action-threat:hover {
    background: #721c24 !important;
}

html.rl-dark-mode body .rl-actor-threat {
    border-color: #721c24 !important;
}

html.rl-dark-mode body .rl-threat-action-text {
    color: #aaa !important;
}

/* ===== CLINICAL FINDINGS ===== */
.rl-findings-panel {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 12px;
    max-height: 200px;
    overflow-y: auto;
}

.rl-findings-empty {
    color: #888;
    font-size: 13px;
    font-style: italic;
    margin: 0;
}

.rl-finding-item {
    font-size: 13px;
    padding: 6px 8px;
    margin-bottom: 6px;
    background: #fff;
    border-left: 3px solid #0073aa;
    border-radius: 0 4px 4px 0;
    color: #333;
    line-height: 1.4;
}

.rl-finding-item:last-child {
    margin-bottom: 0;
}

.rl-assessment-bare-grid {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 10px;
    padding-top: 10px;
}

.rl-assessment-btn.rl-assessed {
    opacity: 0.6;
    position: relative;
}

.rl-assessment-btn.rl-assessed::after {
    content: '✓';
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 10px;
    color: #28a745;
    font-weight: 700;
}

/* Dark mode */
html.rl-dark-mode body .rl-findings-panel {
    background: #2a2a2a;
    border-color: #444;
}

html.rl-dark-mode body .rl-findings-empty {
    color: #888;
}

html.rl-dark-mode body .rl-finding-item {
    background: #1e1e1e;
    color: #e0e0e0;
    border-left-color: #007cba;
}

html.rl-dark-mode body .rl-assessment-bare-grid {
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* ===== SAFE PROTOCOL ===== */
.rl-safe-banner {
    background: #dc3545;
    color: #fff;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.rl-safe-banner.rl-safe-ok {
    background: #28a745;
}

.rl-safe-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rl-safe-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    animation: rl-pulse 1.5s infinite;
}

.rl-safe-ok .rl-safe-dot {
    animation: none;
    background: #fff;
}

@keyframes rl-pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.rl-btn-safe {
    background: #fff !important;
    color: #dc3545 !important;
    border: none !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    cursor: pointer;
}

/* Force SAFE step labels to group tightly together */
.rl-safe-step-label {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

.rl-safe-step-label strong {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.rl-safe-ok .rl-btn-safe {
    display: none;
}

.rl-safe-panel {
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    padding: 0px 20px;
}

.rl-safe-panel-inner {
    margin: 0 auto !important;
}

.rl-safe-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px 15px;
}

.rl-safe-panel-header h4 {
    margin: 0;
    color: #333;
}

.rl-safe-acronym {
    background: #e8f4fd;
    border: 1px solid #b3d7f7;
    border-radius: 6px;
    padding: 14px 14px;
    margin: 10px 10px 20px 10px;
}

.rl-safe-acronym p {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 16px;
    margin: 0 !important;
    padding: 0 !important;
}

.rl-safe-acronym-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #1a5276;
    white-space: nowrap; /* Forces each acronym phrase to stay on one line */
}

.rl-safe-acronym-item strong {
    color: #0073aa;
    font-size: 13px;
}

/* Creates visual separators that disappear gracefully if screen is too small */
.rl-safe-acronym-item:not(:last-child)::after {
    content: '|';
    color: #b3d7f7;
    margin-left: 16px;
    font-weight: 300;
}

@media (max-width: 640px) {
    .rl-safe-acronym-item:not(:last-child)::after {
        display: none;
    }
}

.rl-safe-hazards {
    background: #fff3cd;
    border: 1px solid #ffeeba;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 15px;
}

.rl-safe-hazards h5 {
    margin: 0 0 6px;
    font-size: 12px;
    text-transform: uppercase;
    color: #856404;
}

.rl-safe-hazards .rl-scenario-hazards-content,
.rl-safe-hazards p {
    margin: 0;
    color: #856404;
}

.rl-safe-hazards .rl-scenario-hazards-content p:last-child {
    margin-bottom: 0;
}

.rl-safe-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}

.rl-safe-action {
    padding: 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    color: #495057;
    text-align: center;
    transition: all 0.2s;
}

.rl-safe-action:hover {
    background: #eef2ff;
    border-color: #0073aa;
    color: #0073aa;
}

.rl-safe-action-primary {
    grid-column: 1 / -1;
    background: #28a745;
    color: #fff;
    border-color: #28a745;
}

.rl-safe-action-primary:hover {
    background: #218838;
    border-color: #218838;
    color: #fff;
}

.rl-safe-action-warning {
    display: block !important;
    width: 100% !important;
    background: #fd7e14 !important;
    color: #fff !important;
    border: 1px solid #fd7e14 !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    box-sizing: border-box !important;
}

.rl-safe-action-warning:hover {
    background: #e56b0a !important;
    border-color: #e56b0a !important;
    color: #fff !important;
}

.rl-safe-findings {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 20px 0px;
}

.rl-safe-findings h5 {
    margin: 0 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    color: #666;
}

/* ===== SAFE STEP CHECKLIST ===== */
.rl-safe-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.rl-safe-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.rl-safe-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #dee2e6;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.rl-safe-step-content {
    flex: 1;
    min-width: 0;
}

.rl-safe-step-label {
    font-size: 14px;
    color: #495057;
    line-height: 1.3;
}

.rl-safe-step-label strong {
    color: #0073aa;
    font-size: 15px;
}

.rl-safe-step-check {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #28a745;
    font-weight: 700;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.25s cubic-bezier(.34, 1.56, .64, 1);
    flex-shrink: 0;
}

/* Completed step */
.rl-safe-step-done {
    background: #f0fff4;
    border-color: #c3e6cb;
}

.rl-safe-step-done .rl-safe-step-number {
    background: #28a745;
    color: #fff;
}

.rl-safe-step-done .rl-safe-step-label {
    color: #155724;
}

.rl-safe-step-done .rl-safe-step-label strong {
    color: #1e7e34;
}

.rl-safe-step-done .rl-safe-step-check {
    opacity: 1;
    transform: scale(1);
}

.rl-safe-step-done .rl-safe-action {
    opacity: 0.7;
    cursor: default;
}

/* Current active step */
.rl-safe-step-current {
    background: #e3f2fd;
    border-color: #90caf9;
    box-shadow: 0 2px 8px rgba(0, 115, 170, 0.08);
}

.rl-safe-step-current .rl-safe-step-number {
    background: #0073aa;
    color: #fff;
}

.rl-safe-step-current .rl-safe-step-label {
    color: #0d47a1;
}

.rl-safe-step-current .rl-safe-step-label strong {
    color: #0073aa;
}

/* Locked step */
.rl-safe-step-locked {
    background: #f8f9fa;
    border-color: #e9ecef;
    opacity: 0.65;
}

.rl-safe-step-locked .rl-safe-step-number {
    background: #e9ecef;
    color: #adb5bd;
}

.rl-safe-step-locked .rl-safe-step-label {
    color: #adb5bd;
}

.rl-safe-step-locked .rl-safe-step-label strong {
    color: #adb5bd;
}

.rl-safe-step-locked .rl-safe-action {
    background: #e9ecef;
    border-color: #dee2e6;
    color: #adb5bd;
    cursor: not-allowed;
}

/* Withdraw button spacing */
.rl-safe-action-warning {
    margin-top: 8px;
}

@media (max-width: 768px) {
    .rl-safe-step {
        flex-wrap: wrap;
        gap: 8px;
    }

    .rl-safe-step-content {
        flex: 1 1 auto;
        min-width: 120px;
    }

    .rl-safe-step .rl-safe-action {
        width: 100%;
        margin-left: 44px;
    }

    .rl-safe-step-check {
        order: 3;
    }
}

/* Dark mode overrides for SAFE steps */
html.rl-dark-mode body .rl-safe-step {
    background: #2a2a2a;
    border-color: #444;
}

html.rl-dark-mode body .rl-safe-step-number {
    background: #444;
    color: #ccc;
}

html.rl-dark-mode body .rl-safe-step-label {
    color: #e0e0e0;
}

html.rl-dark-mode body .rl-safe-step-label strong {
    color: #5dade2;
}

html.rl-dark-mode body .rl-safe-step-check {
    color: #28a745;
}

html.rl-dark-mode body .rl-safe-step-done {
    background: #1c3a24;
    border-color: #2e6b3a;
}

html.rl-dark-mode body .rl-safe-step-done .rl-safe-step-number {
    background: #28a745;
    color: #fff;
}

html.rl-dark-mode body .rl-safe-step-done .rl-safe-step-label {
    color: #c3e6cb;
}

html.rl-dark-mode body .rl-safe-step-done .rl-safe-step-label strong {
    color: #5cb85c;
}

html.rl-dark-mode body .rl-safe-step-current {
    background: #1a3a4a;
    border-color: #2e6b8a;
    box-shadow: 0 2px 8px rgba(0, 115, 170, 0.12);
}

html.rl-dark-mode body .rl-safe-step-current .rl-safe-step-number {
    background: #007cba;
    color: #fff;
}

html.rl-dark-mode body .rl-safe-step-current .rl-safe-step-label {
    color: #a8d8f0;
}

html.rl-dark-mode body .rl-safe-step-current .rl-safe-step-label strong {
    color: #5dade2;
}

html.rl-dark-mode body .rl-safe-step-locked {
    background: #2a2a2a;
    border-color: #444;
    opacity: 0.5;
}

html.rl-dark-mode body .rl-safe-step-locked .rl-safe-step-number {
    background: #3a3a3a;
    color: #777;
}

html.rl-dark-mode body .rl-safe-step-locked .rl-safe-step-label {
    color: #777;
}

html.rl-dark-mode body .rl-safe-step-locked .rl-safe-step-label strong {
    color: #777;
}

html.rl-dark-mode body .rl-safe-step-locked .rl-safe-action {
    background: #3a3a3a;
    border-color: #555;
    color: #777;
}

/* BARE lockout overlay */
.rl-bare-locked {
    position: relative;
}

.rl-bare-locked::after {
    content: '🔒 Scene unsafe — complete SAFE first';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #dc3545;
    z-index: 10;
    border-radius: inherit;
}

/* Dark mode */
html.rl-dark-mode body .rl-safe-banner {
    background: #721c24;
}

html.rl-dark-mode body .rl-safe-banner.rl-safe-ok {
    background: #155724;
}

html.rl-dark-mode body .rl-safe-acronym {
    background: #1a3a4a;
    border-color: #2e6b8a;
}

html.rl-dark-mode body .rl-safe-acronym-item {
    color: #a8d8f0;
}

html.rl-dark-mode body .rl-safe-acronym-item strong {
    color: #5dade2;
}

html.rl-dark-mode body .rl-safe-acronym-item:not(:last-child)::after {
    color: #2e6b8a;
}

html.rl-dark-mode body .rl-safe-hazards {
    background: #5c4d1c;
    border-color: #856404;
}

html.rl-dark-mode body .rl-safe-hazards h5,
html.rl-dark-mode body .rl-safe-hazards p,
html.rl-dark-mode body .rl-safe-hazards .rl-scenario-hazards-content {
    color: #ffeeba;
}

html.rl-dark-mode body .rl-safe-panel {
    background: #1e1e1e;
    border-bottom-color: #333;
}

html.rl-dark-mode body .rl-safe-panel-header h4 {
    color: #fff;
}

html.rl-dark-mode body .rl-safe-action {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

html.rl-dark-mode body .rl-safe-action:hover {
    background: #333;
    border-color: #007cba;
    color: #fff;
}

html.rl-dark-mode body .rl-safe-findings {
    background: #2a2a2a;
}

html.rl-dark-mode body .rl-bare-locked::after {
    background: rgba(30, 30, 30, 0.95);
}

/* ===== FILTER-BASED DARK MODE LAYER =====
   The older dark-mode rules above remain as fallback history, but this layer
   normalizes Rally Learn surfaces back to light values before the global filter
   flips the rendered page. Elements with clinical or brand meaning are
   double-filtered so their original colors and imagery stay intact. */
html.rl-dark-mode {
    background: #fff !important;
    filter: invert(1) hue-rotate(180deg);
}

html.rl-dark-mode body {
    background: #fff !important;
    color: #1f2933 !important;
    filter: none;
}

html.rl-dark-mode body .rl-slide-viewer,
html.rl-dark-mode body .rl-question-card,
html.rl-dark-mode body .rl-course-card,
html.rl-dark-mode body .rl-outline-sidebar,
html.rl-dark-mode body .rl-outline-header,
html.rl-dark-mode body .rl-int-scenario,
html.rl-dark-mode body .rl-int-sorting,
html.rl-dark-mode body .rl-int-fillinline,
html.rl-dark-mode body .rl-int-matching,
html.rl-dark-mode body .rl-quiz-inline,
html.rl-dark-mode body .rl-slide-poster,
html.rl-dark-mode body .rl-scenario-ui,
html.rl-dark-mode body .rl-log-toolbar,
html.rl-dark-mode body .rl-scene-hub,
html.rl-dark-mode body .rl-actor-sprite,
html.rl-dark-mode body .rl-loadout-menu,
html.rl-dark-mode body .rl-loadout-col .rl-loadout-section,
html.rl-dark-mode body .rl-assessment-modal-inner,
html.rl-dark-mode body .rl-assessment-summary-row,
html.rl-dark-mode body .rl-scenario-list-card,
html.rl-dark-mode body .rl-scenario-debrief,
html.rl-dark-mode body .rl-debrief-card,
html.rl-dark-mode body .rl-breakdown-item,
html.rl-dark-mode body .rl-skill-report-item,
html.rl-dark-mode body .rl-live-actor,
html.rl-dark-mode body .rl-debrief-notes,
html.rl-dark-mode body .rl-toolkit-panel-inner,
html.rl-dark-mode body .rl-toolkit-card,
html.rl-dark-mode body .rl-scenario-modal-inner,
html.rl-dark-mode body .rl-featured-thumb,
html.rl-dark-mode body .rl-brief-header,
html.rl-dark-mode body .rl-findings-panel,
html.rl-dark-mode body .rl-finding-item,
html.rl-dark-mode body .rl-assessment-bare-grid,
html.rl-dark-mode body .rl-safe-panel,
html.rl-dark-mode body .rl-safe-step,
html.rl-dark-mode body .rl-safe-findings,
html.rl-dark-mode body .rl-action-log,
html.rl-dark-mode body .rl-log-entry,
html.rl-dark-mode body .rl-injury-item,
html.rl-dark-mode body .rl-actor-speech-bubble {
    background: #fff !important;
    border-color: #d6dde5 !important;
    color: #1f2933 !important;
}

html.rl-dark-mode body h1,
html.rl-dark-mode body h2,
html.rl-dark-mode body h3,
html.rl-dark-mode body h4,
html.rl-dark-mode body strong,
html.rl-dark-mode body .rl-slide-title,
html.rl-dark-mode body .rl-question-text,
html.rl-dark-mode body .rl-actor-name,
html.rl-dark-mode body .rl-loadout-header h4,
html.rl-dark-mode body .rl-scenario-list-card-body h4,
html.rl-dark-mode body .rl-debrief-card h2,
html.rl-dark-mode body .rl-debrief-actor h4,
html.rl-dark-mode body .rl-toolkit-card-name,
html.rl-dark-mode body .rl-scenario-modal-body h2,
html.rl-dark-mode body .rl-brief-title-wrap h3,
html.rl-dark-mode body .rl-safe-panel-header h4,
html.rl-dark-mode body .elementor-heading-title,
html.rl-dark-mode body .elementor-icon-box-title {
    color: #111827 !important;
}

html.rl-dark-mode body p,
html.rl-dark-mode body li,
html.rl-dark-mode body .rl-actor-observation,
html.rl-dark-mode body .rl-injury-desc,
html.rl-dark-mode body .rl-injury-meta,
html.rl-dark-mode body .rl-actor-vitals,
html.rl-dark-mode body .rl-assessment-modal-body p,
html.rl-dark-mode body .rl-scenario-modal-body p,
html.rl-dark-mode body .rl-safe-step-label,
html.rl-dark-mode body .rl-safe-hazards p,
html.rl-dark-mode body .rl-safe-hazards .rl-scenario-hazards-content,
html.rl-dark-mode body .elementor-widget-text-editor,
html.rl-dark-mode body .elementor-widget-text-editor *,
html.rl-dark-mode body .elementor-icon-box-description,
html.rl-dark-mode body .elementor-text-editor {
    color: #374151 !important;
}

html.rl-dark-mode body header a,
html.rl-dark-mode body .elementor-nav-menu a,
html.rl-dark-mode body .menu a,
html.rl-dark-mode body .main-navigation a {
    color: #111827 !important;
}

html.rl-dark-mode body input,
html.rl-dark-mode body select,
html.rl-dark-mode body textarea,
html.rl-dark-mode body .rl-text-answer,
html.rl-dark-mode body .rl-essay-answer,
html.rl-dark-mode body .rl-matching-row select,
html.rl-dark-mode body .rl-scenario-text,
html.rl-dark-mode body .rl-answer-label,
html.rl-dark-mode body .rl-btn-secondary,
html.rl-dark-mode body .rl-assessment-btn,
html.rl-dark-mode body .rl-toolkit-btn,
html.rl-dark-mode body .rl-action:not([data-val]),
html.rl-dark-mode body .rl-safe-action,
html.rl-dark-mode body .rl-btn-normal,
html.rl-dark-mode body .rl-btn-abnormal {
    background: #fff !important;
    border-color: #cbd5e1 !important;
    color: #1f2933 !important;
}

html.rl-dark-mode body .rl-slide-nav .rl-btn-secondary,
html.rl-dark-mode body .rl-lesson-nav .rl-btn-secondary,
html.rl-dark-mode body .rl-quiz-nav .rl-btn-secondary {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #111827 !important;
}

html.rl-dark-mode body .rl-slide-nav .rl-btn-secondary:hover,
html.rl-dark-mode body .rl-lesson-nav .rl-btn-secondary:hover,
html.rl-dark-mode body .rl-quiz-nav .rl-btn-secondary:hover {
    background: #e2e8f0 !important;
    border-color: #64748b !important;
    color: #020617 !important;
}

html.rl-dark-mode body img,
html.rl-dark-mode body video,
html.rl-dark-mode body iframe,
html.rl-dark-mode body canvas,
html.rl-dark-mode body .rl-preserve-color,
html.rl-dark-mode body .rl-scenario-list-img,
html.rl-dark-mode body .rl-scenario-modal-img,
html.rl-dark-mode body .rl-actor-image,
html.rl-dark-mode body .rl-toolkit-img,
html.rl-dark-mode body .rl-triage-dot,
html.rl-dark-mode body .rl-triage-badge,
html.rl-dark-mode body .rl-badge-untriaged,
html.rl-dark-mode body .rl-badge-green,
html.rl-dark-mode body .rl-badge-yellow,
html.rl-dark-mode body .rl-badge-red,
html.rl-dark-mode body .rl-badge-black,
html.rl-dark-mode body .rl-triage-tag,
html.rl-dark-mode body .rl-tag-untriaged,
html.rl-dark-mode body .rl-correct-badge,
html.rl-dark-mode body .rl-wrong-badge,
html.rl-dark-mode body .rl-injury-type,
html.rl-dark-mode body .rl-type-bleeding,
html.rl-dark-mode body .rl-type-airway,
html.rl-dark-mode body .rl-type-respiration,
html.rl-dark-mode body .rl-type-tbi,
html.rl-dark-mode body .rl-type-circulation,
html.rl-dark-mode body .rl-type-other,
html.rl-dark-mode body .rl-injury-treated-badge,
html.rl-dark-mode body .rl-feedback-correct,
html.rl-dark-mode body .rl-feedback-incorrect,
html.rl-dark-mode body .rl-btn-primary,
html.rl-dark-mode body .rl-btn-danger,
html.rl-dark-mode body .rl-btn-warning,
html.rl-dark-mode body .rl-mark-complete.rl-completed,
html.rl-dark-mode body .elementor-button,
html.rl-dark-mode body .elementor-button-link,
html.rl-dark-mode body .wp-block-button__link,
html.rl-dark-mode body .rl-safe-banner,
html.rl-dark-mode body .rl-safe-banner.rl-safe-ok,
html.rl-dark-mode body .rl-safe-step-check,
html.rl-dark-mode body .rl-safe-step-done .rl-safe-step-number,
html.rl-dark-mode body .rl-safe-step-current .rl-safe-step-number,
html.rl-dark-mode body .rl-score-ring,
html.rl-dark-mode body .rl-skill-report-fill,
html.rl-dark-mode body .rl-debrief-status,
html.rl-dark-mode body .rl-wound-bleeding,
html.rl-dark-mode body .rl-wound-airway,
html.rl-dark-mode body .rl-wound-respiration,
html.rl-dark-mode body .rl-wound-tbi,
html.rl-dark-mode body .rl-wound-circulation,
html.rl-dark-mode body .rl-wound-other {
    filter: invert(1) hue-rotate(180deg);
}

html.rl-dark-mode body .rl-badge-untriaged,
html.rl-dark-mode body .rl-tag-untriaged {
    background: #e9ecef !important;
    color: #495057 !important;
}

html.rl-dark-mode body .rl-badge-green,
html.rl-dark-mode body .rl-tag-green {
    background: #d4edda !important;
    color: #155724 !important;
}

html.rl-dark-mode body .rl-badge-yellow,
html.rl-dark-mode body .rl-tag-yellow {
    background: #fff3cd !important;
    color: #856404 !important;
}

html.rl-dark-mode body .rl-badge-red,
html.rl-dark-mode body .rl-tag-red {
    background: #f8d7da !important;
    color: #721c24 !important;
}

html.rl-dark-mode body .rl-badge-black,
html.rl-dark-mode body .rl-tag-black {
    background: #343a40 !important;
    color: #fff !important;
}

html.rl-dark-mode body .rl-triage-green {
    background: #28a745 !important;
}

html.rl-dark-mode body .rl-triage-yellow {
    background: #ffc107 !important;
}

html.rl-dark-mode body .rl-triage-red {
    background: #dc3545 !important;
}

html.rl-dark-mode body .rl-triage-black {
    background: #1a1a1a !important;
}

html.rl-dark-mode body .rl-type-bleeding {
    background: #f8d7da !important;
    color: #721c24 !important;
}

html.rl-dark-mode body .rl-type-airway {
    background: #fff3cd !important;
    color: #856404 !important;
}

html.rl-dark-mode body .rl-type-respiration {
    background: #d1ecf1 !important;
    color: #0c5460 !important;
}

html.rl-dark-mode body .rl-type-tbi {
    background: #e2e3f3 !important;
    color: #383d7d !important;
}

html.rl-dark-mode body .rl-type-circulation {
    background: #d4edda !important;
    color: #155724 !important;
}

html.rl-dark-mode body .rl-type-other {
    background: #e9ecef !important;
    color: #495057 !important;
}

html.rl-dark-mode body .rl-btn-primary {
    background: var(--rl-course-button, #0073aa) !important;
    border-color: var(--rl-course-button, #0073aa) !important;
    color: #fff !important;
}

html.rl-dark-mode body .rl-btn-primary:hover {
    background: var(--rl-course-button, #005a87) !important;
    border-color: var(--rl-course-button, #005a87) !important;
    color: #fff !important;
}

html.rl-dark-mode body .rl-btn-danger {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

html.rl-dark-mode body .rl-btn-warning {
    background: #fd7e14 !important;
    border-color: #fd7e14 !important;
    color: #fff !important;
}

html.rl-dark-mode body .elementor-button,
html.rl-dark-mode body .elementor-button-link,
html.rl-dark-mode body .wp-block-button__link {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #fff !important;
}

html.rl-dark-mode body .elementor-button:hover,
html.rl-dark-mode body .elementor-button-link:hover,
html.rl-dark-mode body .wp-block-button__link:hover {
    background: #991b1b !important;
    border-color: #991b1b !important;
    color: #fff !important;
}

html.rl-dark-mode body .rl-injury-treated,
html.rl-dark-mode body .rl-debrief-injuries li.rl-injury-treated {
    background: #052e16 !important;
    border-color: #16a34a !important;
    color: #dcfce7 !important;
    filter: invert(1) hue-rotate(180deg);
}

html.rl-dark-mode body .rl-debrief-injuries li.rl-injury-missed {
    background: #450a0a !important;
    border-color: #dc2626 !important;
    color: #fee2e2 !important;
    filter: invert(1) hue-rotate(180deg);
}

html.rl-dark-mode body .rl-debrief-injuries li.rl-injury-exempt {
    background: #111827 !important;
    border-color: #475569 !important;
    color: #d1d5db !important;
    filter: invert(1) hue-rotate(180deg);
}

html.rl-dark-mode body .rl-critical-failures {
    background: #450a0a !important;
    border-color: #dc2626 !important;
    color: #fee2e2 !important;
    filter: invert(1) hue-rotate(180deg);
}

html.rl-dark-mode body .rl-critical-failures h3,
html.rl-dark-mode body .rl-critical-failures li {
    color: #fee2e2 !important;
}

html.rl-dark-mode body .rl-debrief-injuries li.rl-injury-missed .rl-injury-type-small,
html.rl-dark-mode body .rl-debrief-injuries li.rl-injury-treated .rl-injury-type-small,
html.rl-dark-mode body .rl-debrief-injuries li.rl-injury-exempt .rl-injury-type-small {
    background: #dbeafe !important;
    color: #1e40af !important;
}

html.rl-dark-mode body .rl-safe-hazards {
    background: #422006 !important;
    border-color: #d97706 !important;
    color: #fde68a !important;
    filter: invert(1) hue-rotate(180deg);
}

html.rl-dark-mode body .rl-safe-hazards h5,
html.rl-dark-mode body .rl-safe-hazards p,
html.rl-dark-mode body .rl-safe-hazards .rl-scenario-hazards-content {
    color: #fde68a !important;
}

html.rl-dark-mode body .rl-safe-acronym {
    background: #082f49 !important;
    border-color: #0284c7 !important;
    color: #e0f2fe !important;
    filter: invert(1) hue-rotate(180deg);
}

html.rl-dark-mode body .rl-safe-acronym-item,
html.rl-dark-mode body .rl-safe-acronym-item strong {
    color: #e0f2fe !important;
}

html.rl-dark-mode body .rl-safe-banner {
    background: #7f1d1d !important;
    color: #fee2e2 !important;
    filter: invert(1) hue-rotate(180deg);
}

html.rl-dark-mode body .rl-safe-banner.rl-safe-ok {
    background: #14532d !important;
    color: #dcfce7 !important;
}

html.rl-dark-mode body .rl-safe-status,
html.rl-dark-mode body .rl-safe-banner *,
html.rl-dark-mode body .rl-safe-status strong {
    color: #fff !important;
}

html.rl-dark-mode body .rl-safe-banner .rl-btn-safe {
    background: #f8fafc !important;
    color: #111827 !important;
}

html.rl-dark-mode body .rl-toast {
    background: #111827 !important;
    border-color: #38bdf8 !important;
    border-bottom-color: #38bdf8 !important;
    color: #f8fafc !important;
    filter: invert(1) hue-rotate(180deg);
}

html.rl-dark-mode body .rl-toast-alert,
html.rl-dark-mode body .rl-toast-error {
    background: #450a0a !important;
    border-color: #dc2626 !important;
    border-bottom-color: #dc2626 !important;
    color: #fee2e2 !important;
}

html.rl-dark-mode body .rl-safe-findings,
html.rl-dark-mode body .rl-findings-panel,
html.rl-dark-mode body .rl-finding-item {
    background: #020617 !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.rl-dark-mode body .rl-safe-findings h5,
html.rl-dark-mode body .rl-findings-empty,
html.rl-dark-mode body .rl-finding-item,
html.rl-dark-mode body #rl-discovery-items li,
html.rl-dark-mode body #rl-assessment-panel,
html.rl-dark-mode body .rl-assessment-result {
    color: #e2e8f0 !important;
}

html.rl-dark-mode body .rl-skill-report-bar {
    background: #475569 !important;
}

html.rl-dark-mode body .rl-action-log,
html.rl-dark-mode body .rl-log-header,
html.rl-dark-mode body .rl-log-toolbar {
    background: #020617 !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
    filter: invert(1) hue-rotate(180deg);
}

html.rl-dark-mode body .rl-log-entry,
html.rl-dark-mode body .rl-log-time {
    color: #cbd5e1 !important;
}

html.rl-dark-mode body .rl-hud-label,
html.rl-dark-mode body .rl-hud-tu,
html.rl-dark-mode body .rl-hud-status,
html.rl-dark-mode body .rl-hud-status strong {
    color: #f8fafc !important;
}

html.rl-dark-mode body .rl-actor-sprite {
    background: #020617 !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
    filter: invert(1) hue-rotate(180deg);
}

html.rl-dark-mode body .rl-actor-sprite .rl-actor-image,
html.rl-dark-mode body .rl-actor-sprite .rl-injury-type,
html.rl-dark-mode body .rl-actor-sprite .rl-bare-step {
    filter: none !important;
}

html.rl-dark-mode body .rl-actor-sprite:hover,
html.rl-dark-mode body .rl-actor-active {
    border-color: #38bdf8 !important;
}

html.rl-dark-mode body .rl-actor-name,
html.rl-dark-mode body .rl-actor-type,
html.rl-dark-mode body .rl-actor-state-name {
    color: #f8fafc !important;
}

html.rl-dark-mode body .rl-actor-deceased .rl-actor-image,
html.rl-dark-mode body .rl-deceased-overlay {
    background: #111827 !important;
    color: #e2e8f0 !important;
    filter: none !important;
}

html.rl-dark-mode body .rl-bare-pending {
    background: #334155 !important;
    color: #e2e8f0 !important;
    filter: invert(1) hue-rotate(180deg);
}

html.rl-dark-mode body .rl-bare-complete {
    background: #14532d !important;
    color: #dcfce7 !important;
    filter: invert(1) hue-rotate(180deg);
}

html.rl-dark-mode body .rl-hud-end .rl-btn-warning,
html.rl-dark-mode body .rl-safe-action-warning {
    background: #fd7e14 !important;
    border-color: #fd7e14 !important;
    color: #fff !important;
    filter: invert(1) hue-rotate(180deg);
}

html.rl-dark-mode body .rl-hud-end .rl-btn-danger {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
    filter: none !important;
}

html.rl-dark-mode body .rl-action-log .rl-btn-warning,
html.rl-dark-mode body .rl-action-log .rl-btn-danger,
html.rl-dark-mode body #rl-confirm-continue {
    filter: none !important;
}

html.rl-dark-mode body #rl-confirm-continue {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

html.rl-dark-mode body.rl-scenario-page-bg::before {
    filter: invert(1) hue-rotate(180deg);
}

html.rl-dark-mode body .rl-section-casualty,
html.rl-dark-mode body .rl-section-threat,
html.rl-dark-mode body .rl-section-findings,
html.rl-dark-mode body .rl-section-triage,
html.rl-dark-mode body .rl-loadout-col .rl-loadout-section:nth-child(even),
html.rl-dark-mode body .rl-assessment-bare-grid,
html.rl-dark-mode body #rl-assessment-panel,
html.rl-dark-mode body .rl-assessment-result,
html.rl-dark-mode body .rl-findings-panel,
html.rl-dark-mode body .rl-finding-item {
    background: #fff !important;
    border-color: #cbd5e1 !important;
    color: #1f2933 !important;
    filter: none !important;
}

html.rl-dark-mode body .rl-section-casualty h5,
html.rl-dark-mode body .rl-section-threat h5,
html.rl-dark-mode body .rl-section-findings h5,
html.rl-dark-mode body .rl-section-triage h5,
html.rl-dark-mode body .rl-section-casualty p,
html.rl-dark-mode body .rl-section-threat p,
html.rl-dark-mode body .rl-section-findings p,
html.rl-dark-mode body .rl-section-triage p,
html.rl-dark-mode body .rl-loadout-header-main .rl-actor-observation,
html.rl-dark-mode body #rl-discovery-items li,
html.rl-dark-mode body #rl-assessment-panel,
html.rl-dark-mode body .rl-assessment-result {
    color: #1f2933 !important;
}

html.rl-dark-mode body .rl-assessment-btn,
html.rl-dark-mode body .rl-toolkit-btn,
html.rl-dark-mode body .rl-action:not([data-val]) {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #111827 !important;
    filter: none !important;
}

html.rl-dark-mode body .rl-assessment-btn.rl-assessed,
html.rl-dark-mode body .rl-toolkit-btn.rl-assessed {
    background: #dbeafe !important;
    border-color: #60a5fa !important;
    color: #1e3a8a !important;
}

html.rl-dark-mode body .rl-injury-item {
    background: #fff !important;
    border-color: #cbd5e1 !important;
    color: #1f2933 !important;
    filter: none !important;
}

html.rl-dark-mode body .rl-injury-item.rl-injury-treated {
    background: #052e16 !important;
    border-color: #22c55e !important;
    color: #dcfce7 !important;
    filter: invert(1) hue-rotate(180deg) !important;
}

html.rl-dark-mode body .rl-injury-item .rl-injury-type {
    filter: invert(1) hue-rotate(180deg) !important;
}

html.rl-dark-mode body .rl-injury-item.rl-injury-treated .rl-injury-type,
html.rl-dark-mode body .rl-injury-item.rl-injury-treated .rl-injury-treated-badge {
    filter: none !important;
}

html.rl-dark-mode body .rl-actor-sprite .rl-actor-type {
    background: #e0f2fe !important;
    border-color: #7dd3fc !important;
    color: #075985 !important;
    filter: none !important;
}

html.rl-dark-mode body .rl-actor-threat .rl-actor-type {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}

html.rl-dark-mode body .rl-actor-bystander .rl-actor-type {
    background: #fef3c7 !important;
    border-color: #fbbf24 !important;
    color: #92400e !important;
}

html.rl-dark-mode body .rl-actor-sprite .rl-actor-observation,
html.rl-dark-mode body .rl-actor-sprite .rl-actor-state-name {
    color: #e2e8f0 !important;
}

html.rl-dark-mode body .rl-assessment-modal-backdrop {
    background: rgba(255, 255, 255, 0.72) !important;
}

html.rl-dark-mode body .rl-assessment-modal-inner,
html.rl-dark-mode body .rl-assessment-summary-row {
    background: #fff !important;
    border-color: #cbd5e1 !important;
    color: #111827 !important;
    filter: none !important;
}

html.rl-dark-mode body .rl-assessment-modal-inner h4,
html.rl-dark-mode body .rl-assessment-modal-body p,
html.rl-dark-mode body .rl-assessment-summary-row h5,
html.rl-dark-mode body .rl-assessment-summary-row p {
    color: #111827 !important;
}

html.rl-dark-mode body .rl-feedback-correct {
    background: #14532d !important;
    border-color: #22c55e !important;
    color: #dcfce7 !important;
    filter: invert(1) hue-rotate(180deg) !important;
}

html.rl-dark-mode body .rl-feedback-incorrect {
    background: #450a0a !important;
    border-color: #ef4444 !important;
    color: #fee2e2 !important;
    filter: invert(1) hue-rotate(180deg) !important;
}

html.rl-dark-mode body .rl-action-log,
html.rl-dark-mode body .rl-log-header,
html.rl-dark-mode body .rl-log-toolbar,
html.rl-dark-mode body .rl-log-entries,
html.rl-dark-mode body .rl-log-entry {
    background: #fff !important;
    border-color: #cbd5e1 !important;
    color: #111827 !important;
    filter: none !important;
}

html.rl-dark-mode body .rl-log-time,
html.rl-dark-mode body .rl-hud-label,
html.rl-dark-mode body .rl-hud-tu,
html.rl-dark-mode body .rl-hud-status,
html.rl-dark-mode body .rl-hud-status strong {
    color: #111827 !important;
}

html.rl-dark-mode body .rl-action-log .rl-btn-warning,
html.rl-dark-mode body .rl-action-log .rl-btn-danger,
html.rl-dark-mode body .rl-hud-right .rl-btn-warning,
html.rl-dark-mode body .rl-hud-right .rl-btn-danger {
    filter: invert(1) hue-rotate(180deg) !important;
}

html.rl-dark-mode body .rl-partner-card,
html.rl-dark-mode body .rl-org-branding-card,
html.rl-dark-mode body .rl-partner-directory-card {
    background: #fff !important;
    border-color: #cbd5e1 !important;
    color: #111827 !important;
    filter: none !important;
}

html.rl-dark-mode body .rl-partner-card-logo {
    background: #fff !important;
    border-color: #e5e7eb !important;
    filter: none !important;
}

html.rl-dark-mode body .rl-partner-card-eyebrow,
html.rl-dark-mode body .rl-org-branding-eyebrow {
    color: #475569 !important;
}

html.rl-dark-mode body .rl-partner-card-name,
html.rl-dark-mode body .rl-org-branding-title,
html.rl-dark-mode body .rl-partner-directory-meta h3,
html.rl-dark-mode body .rl-partners-directory-header h2 {
    color: #111827 !important;
}

.rl-field-label {
    color: #111827;
    display: block;
    font-weight: 800;
    margin-bottom: 8px;
}

.rl-partner-type-picker {
    margin: 0 0 16px;
}

.rl-partner-type-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rl-partner-type-options label {
    align-items: center;
    background: rgba(13, 183, 196, 0.08);
    border: 1px solid rgba(13, 183, 196, 0.22);
    border-radius: 999px;
    color: #161616;
    display: inline-flex;
    font-weight: 800;
    gap: 7px;
    padding: 8px 12px;
}

.rl-partners-map {
    margin: 32px 0;
}

.rl-partners-map-toolbar {
    display: flex;
    justify-content: flex-start;
    margin: 18px 0 12px;
}

.rl-partners-map-reset {
    align-items: center;
    appearance: none;
    background: #161616;
    border: 1px solid #161616;
    border-radius: 999px;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-weight: 900;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
}

.rl-partners-map-reset span {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 3px 8px;
}

.rl-partners-us-map {
    background: linear-gradient(135deg, rgba(13, 183, 196, 0.10), rgba(175, 0, 0, 0.05));
    border: 1px solid rgba(13, 183, 196, 0.22);
    border-radius: 24px;
    display: block;
    height: auto;
    margin: 0 0 12px;
    padding: 18px;
    width: 100%;
}

.rl-partners-us-map-wrap {
    position: relative;
}

.rl-partners-map-state {
    fill: rgba(255, 255, 255, 0.86);
    stroke: rgba(22, 22, 22, 0.22);
    stroke-linejoin: round;
    stroke-width: 1.1;
    transition: fill 0.18s ease, opacity 0.18s ease, filter 0.18s ease, stroke 0.18s ease;
}

.rl-partners-map-state.has-partners {
    cursor: pointer;
    fill: rgba(13, 183, 196, 0.72);
    filter: drop-shadow(0 6px 10px rgba(13, 183, 196, 0.18));
    stroke: #075f66;
}

.rl-partners-map-state.is-empty {
    cursor: not-allowed;
    fill: rgba(226, 232, 240, 0.78);
    opacity: 0.62;
}

.rl-partners-map-state.is-active,
.rl-partners-map-state:hover,
.rl-partners-map-state:focus {
    fill: #af0000;
    outline: none;
    stroke: #161616;
    stroke-width: 1.6;
}

.rl-partners-map-state.is-empty:hover,
.rl-partners-map-state.is-empty:focus {
    fill: rgba(226, 232, 240, 0.78);
    stroke: rgba(22, 22, 22, 0.22);
    stroke-width: 1.1;
}

.rl-partners-map-label {
    fill: rgba(22, 22, 22, 0.48);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
    paint-order: stroke;
    pointer-events: none;
    stroke: rgba(255, 255, 255, 0.88);
    stroke-linejoin: round;
    stroke-width: 3px;
    text-anchor: middle;
}

.rl-partners-map-label.has-partners {
    fill: #161616;
}

.rl-partners-map-popover {
    background: #ffffff;
    border: 1px solid rgba(13, 183, 196, 0.28);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    color: #161616;
    max-width: min(280px, calc(100% - 24px));
    padding: 12px 14px;
    pointer-events: none;
    position: absolute;
    transform: translateY(-100%);
    z-index: 4;
}

.rl-partners-map-popover strong {
    display: block;
    font-size: 14px;
    font-weight: 900;
    margin: 0 0 8px;
}

.rl-partners-map-popover ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rl-partners-map-popover li {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    padding: 6px 0 0;
}

.rl-partners-map-popover li:first-child {
    border-top: 0;
    padding-top: 0;
}

.rl-partners-map-status {
    color: #4b5563;
    font-size: 14px;
    font-weight: 800;
    margin: 0 0 16px;
}

html.rl-dark-mode body .rl-partner-card-text,
html.rl-dark-mode body .rl-org-branding-text,
html.rl-dark-mode body .rl-partner-directory-bio {
    color: #334155 !important;
}

html.rl-dark-mode body .rl-partner-card .rl-partner-card-toggle,
html.rl-dark-mode body .rl-org-branding-card .rl-partner-card-toggle {
    background: #ffffff !important;
    border-color: transparent !important;
    color: #64748b !important;
    filter: none !important;
}

.rl-payment-status-banner {
    width: 100%;
    margin: 0 0 24px;
    padding: 14px 18px;
    border-radius: 8px;
    border: 1px solid #bae6fd;
    background: #e0f2fe;
    color: #075985;
    font-weight: 700;
}

.rl-payment-status-success {
    border-color: #86efac;
    background: #dcfce7;
    color: #166534;
}

.rl-payment-status-warning {
    border-color: #fde68a;
    background: #fef3c7;
    color: #92400e;
}

.rl-payment-status-error {
    border-color: #fecaca;
    background: #fee2e2;
    color: #991b1b;
}

html.rl-dark-mode body .rl-payment-status-banner {
    filter: invert(1) hue-rotate(180deg) !important;
}

.rl-dashboard-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 18px 0 24px;
}

.rl-dashboard-summary > div,
.rl-dashboard-section,
.rl-dashboard-notice {
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    background: #fff;
    padding: 16px;
}

.rl-dashboard-summary strong,
.rl-dashboard-summary span {
    display: block;
}

.rl-dashboard-summary strong {
    margin-bottom: 6px;
    color: #475569;
    font-size: 13px;
}

.rl-dashboard-summary span {
    color: #111827;
    font-size: 20px;
    font-weight: 700;
}

.rl-dashboard-section {
    margin: 0 0 24px;
}

.rl-dashboard-section h3 {
    margin-top: 0;
}

.rl-dashboard-notice {
    margin: 16px 0;
}

.rl-dashboard-notice-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.rl-dashboard-notice-error {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.rl-curriculum-use-gate h3 {
    margin-top: 0;
}

.rl-curriculum-use-text {
    margin: 12px 0 16px;
}

.rl-curriculum-use-form {
    margin: 0;
}

.rl-curriculum-use-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 600;
}

.rl-curriculum-use-check input {
    margin-top: 3px;
}

.rl-curriculum-use-form p {
    margin-top: 16px;
}

.rl-existing-account-notice {
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    background: #fff;
    padding: 20px;
    margin: 0 0 24px;
}

.rl-existing-account-notice h3 {
    margin-top: 0;
}

html.rl-dark-mode body .rl-dashboard-summary > div,
html.rl-dark-mode body .rl-dashboard-section,
html.rl-dark-mode body .rl-dashboard-notice,
html.rl-dark-mode body .rl-existing-account-notice {
    filter: invert(1) hue-rotate(180deg) !important;
}

.rl-account-menu-item {
    position: relative;
}

.rl-account-menu-item > a {
    font-weight: 700;
}

.rl-account-menu-item::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 9998;
    top: 100%;
    right: 0;
    width: 100%;
    height: 12px;
}

.rl-account-menu-item > .sub-menu {
    display: none;
    position: absolute;
    z-index: 9999;
    top: calc(100% + 8px);
    right: 0;
    min-width: 210px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
}

.rl-account-menu-item:hover > .sub-menu,
.rl-account-menu-item:focus-within > .sub-menu {
    display: block;
}

.rl-account-menu-item > .sub-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    color: #111827;
    white-space: nowrap;
    text-decoration: none;
}

.rl-account-menu-item > .sub-menu a:hover,
.rl-account-menu-item > .sub-menu a:focus {
    background: rgba(15, 23, 42, 0.06);
}

@media (max-width: 767px) {
    .rl-account-menu-item > .sub-menu {
        position: static;
        min-width: 0;
        margin: 6px 0 0;
        box-shadow: none;
    }
}

html body .rl-course-wrapper .rl-btn-secondary,
html body .rl-lesson-wrapper .rl-btn-secondary,
html body .rl-quiz-wrapper .rl-btn-secondary,
html body .rl-course-card .rl-btn-secondary {
    background: var(--rl-course-primary, #0073aa) !important;
    border-color: var(--rl-course-primary, #0073aa) !important;
    color: #fff !important;
}

html body .rl-course-wrapper .rl-btn-secondary:hover,
html body .rl-lesson-wrapper .rl-btn-secondary:hover,
html body .rl-quiz-wrapper .rl-btn-secondary:hover,
html body .rl-course-card .rl-btn-secondary:hover {
    background: var(--rl-course-primary, #005a87) !important;
    border-color: var(--rl-course-primary, #005a87) !important;
    color: #fff !important;
}

html body .rl-lesson-wrapper .rl-btn.rl-audio-btn,
html body .rl-lesson-wrapper .rl-btn.rl-audio-restart-btn {
    background: #fff !important;
    border-color: rgba(15, 23, 42, 0.16) !important;
    color: var(--rl-course-primary, #0073aa) !important;
    height: 44px !important;
    min-height: 44px !important;
    min-width: 44px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 44px !important;
}

html body .rl-lesson-wrapper .rl-btn.rl-audio-btn:hover,
html body .rl-lesson-wrapper .rl-btn.rl-audio-restart-btn:hover,
html body .rl-lesson-wrapper .rl-btn.rl-audio-btn:focus-visible,
html body .rl-lesson-wrapper .rl-btn.rl-audio-restart-btn:focus-visible {
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.22) !important;
    color: var(--rl-course-primary, #0073aa) !important;
}

html body .rl-lesson-wrapper .rl-slide-dot {
    background: color-mix(in srgb, var(--rl-course-primary, #007cba) 18%, #fff) !important;
    border-color: var(--rl-course-primary, #007cba) !important;
}

html body .rl-lesson-wrapper .rl-slide-dot.rl-slide-dot-active {
    background: var(--rl-course-primary, #007cba) !important;
    border-color: var(--rl-course-primary, #007cba) !important;
}

html body .rl-lesson-wrapper .rl-slide-dot.rl-slide-type-dot {
    background: color-mix(in srgb, var(--rl-slide-type-color, var(--rl-course-primary, #007cba)) 18%, #fff) !important;
    border-color: var(--rl-slide-type-color, var(--rl-course-primary, #007cba)) !important;
}

html body .rl-lesson-wrapper .rl-slide-dot.rl-slide-type-dot.rl-slide-dot-active {
    background: var(--rl-slide-type-color, var(--rl-course-primary, #007cba)) !important;
    border-color: var(--rl-slide-type-color, var(--rl-course-primary, #007cba)) !important;
}

html body .rl-lesson-wrapper .rl-lesson-title {
    color: var(--rl-course-primary, #007cba) !important;
}

html body .rl-course-wrapper .rl-btn-secondary:disabled,
html body .rl-lesson-wrapper .rl-btn-secondary:disabled,
html body .rl-quiz-wrapper .rl-btn-secondary:disabled,
html body .rl-course-card .rl-btn-secondary:disabled {
    opacity: 0.55;
}

@media (max-width: 767px) {
    html:has(.rl-course-wrapper),
    html:has(.rl-lesson-wrapper),
    html:has(.rl-quiz-wrapper),
    body:has(.rl-course-wrapper),
    body:has(.rl-lesson-wrapper),
    body:has(.rl-quiz-wrapper) {
        overflow-x: hidden;
    }

    body:has(.rl-course-wrapper),
    body:has(.rl-lesson-wrapper),
    body:has(.rl-quiz-wrapper) {
        padding-bottom: calc(190px + env(safe-area-inset-bottom));
    }

    html body .rl-course-wrapper,
    html body .rl-lesson-wrapper,
    html body .rl-quiz-wrapper {
        max-width: none;
        padding: 8px 8px calc(210px + env(safe-area-inset-bottom)) !important;
        width: 100%;
    }

    html body .rl-course-wrapper h1,
    html body .rl-lesson-wrapper .rl-lesson-title,
    html body .rl-quiz-wrapper h1 {
        font-size: clamp(24px, 7vw, 32px) !important;
        line-height: 1.1;
        margin-bottom: 16px !important;
    }

    html body .rl-lesson-top-bar {
        align-items: stretch !important;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
        display: grid !important;
        gap: 10px;
        grid-template-columns: 1fr;
        margin: 0 0 16px !important;
        padding: 10px;
        position: sticky;
        top: 8px;
        z-index: 20;
    }

    html body .rl-lesson-top-bar > div:last-child {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }

    html body .rl-lesson-top-bar .rl-btn {
        margin: 0 !important;
        text-align: center;
        width: 100%;
    }

    html body .rl-course-grid,
    html body .rl-courses-grid,
    html body .rl-dashboard-courses {
        display: grid !important;
        gap: 16px !important;
        grid-template-columns: 1fr !important;
    }

    html body .rl-course-card {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }

    html body .rl-course-card img,
    html body .rl-course-image {
        max-height: 220px;
        object-fit: cover;
        width: 100%;
    }

    html body .rl-slide-viewer,
    html body .rl-question-card,
    html body .rl-int-sorting,
    html body .rl-int-checkpoint,
    html body .rl-int-reveal,
    html body .rl-int-error-spotting,
    html body .rl-int-image-compare,
    html body .rl-int-scenario,
    html body .rl-int-fillinline,
    html body .rl-int-matching {
        border-radius: 14px !important;
        margin: 6px 0 !important;
        padding: 10px !important;
    }

    html body .rl-slide-viewer {
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    }

    html body .rl-slide {
        padding: 0 !important;
    }

    html body .rl-slide-title {
        margin-bottom: 10px !important;
    }

    html body .rl-slide-content,
    html body .rl-slide-caption {
        margin-bottom: 10px !important;
    }

    html body .rl-slide-viewer > div:first-child {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 10px;
    }

    html body .rl-slide-dots {
        display: none !important;
    }

    html body .rl-slides-container {
        min-height: 0;
    }

    html body .rl-slide-title {
        font-size: 20px;
        line-height: 1.2;
    }

    html body .rl-slide-content,
    html body .rl-scenario-text,
    html body .rl-question-text {
        font-size: 16px;
        line-height: 1.55;
    }

    html body .rl-slide-image img,
    html body .rl-int-media-preview img,
    html body .rl-int-zoom-wrap img {
        max-height: 52vh;
        object-fit: contain;
        width: 100%;
    }

    html body .rl-image-compare-grid,
    html body .rl-match-grid,
    html body .rl-int-flashcard-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    html body .rl-image-compare-choice {
        align-items: stretch;
        display: grid;
        gap: 8px;
        grid-template-columns: 1fr;
        text-align: left;
    }

    html body .rl-image-compare-choice img {
        max-height: 240px;
        object-fit: cover;
        width: 100%;
    }

    html body .rl-flip-card {
        height: 190px;
        max-width: none;
    }

    html body .rl-scenario-choices,
    html body .rl-answer-options {
        gap: 10px;
    }

    html body .rl-scenario-btn,
    html body .rl-answer-label,
    html body .rl-sort-item,
    html body .rl-match-draggable,
    html body .rl-match-dropzone {
        border-radius: 12px;
        font-size: 15px;
        min-height: 48px;
        padding: 12px 14px;
    }

    html body .rl-inline-blank {
        display: inline-flex;
        margin: 4px 2px;
        max-width: none;
        min-width: 86px;
        width: auto;
    }

    html body .rl-btn {
        border-radius: 12px;
        min-height: 48px;
        padding: 12px 16px;
    }

    html body .rl-lesson-nav,
    html body .rl-slide-nav,
    html body .rl-quiz-nav {
        align-items: center !important;
        background: #fff !important;
        border: 1px solid rgba(15, 23, 42, 0.12) !important;
        border-bottom: 0 !important;
        border-radius: 18px 18px 0 0 !important;
        bottom: 0 !important;
        box-shadow: 0 -12px 34px rgba(15, 23, 42, 0.18);
        display: grid !important;
        gap: 10px !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 10px 12px calc(12px + env(safe-area-inset-bottom)) !important;
        position: fixed;
        right: 0 !important;
        z-index: 99990;
    }

    html body .rl-lesson-nav {
        grid-template-columns: 1fr;
    }

    html body .rl-lesson-nav .rl-nav-left,
    html body .rl-lesson-nav .rl-nav-right {
        display: grid !important;
        gap: 8px !important;
        width: 100%;
    }

    html body .rl-lesson-nav .rl-nav-left {
        grid-template-columns: 1fr;
    }

    html body .rl-lesson-nav .rl-nav-right {
        align-items: center;
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px !important;
        justify-content: center;
    }

    html body .rl-lesson-nav .rl-nav-right::after,
    html body .rl-slide-buttons::after {
        content: "";
        flex: 0 0 100%;
        height: 0;
        order: 1;
    }

    html body .rl-lesson-nav .rl-lesson-position {
        align-self: center;
        text-align: center;
    }

    html body .rl-lesson-nav .rl-nav-right .rally-helper__toolbar-trigger,
    html body .rl-lesson-nav .rl-nav-right .rl-audio-btn,
    html body .rl-lesson-nav .rl-nav-right .rl-audio-restart-btn {
        flex: 0 0 44px;
        height: 44px !important;
        min-height: 44px !important;
        min-width: 44px !important;
        order: 1;
        padding-left: 0;
        padding-right: 0;
        width: 44px !important;
    }

    html body .rl-lesson-nav .rl-nav-right .rl-btn:not(.rl-audio-btn):not(.rl-audio-restart-btn):not(.rally-helper__toolbar-trigger) {
        flex: 1 1 calc(50% - 4px);
        max-width: none;
        min-width: 0;
        order: 2;
        white-space: nowrap;
    }

    html body .rl-lesson-nav .rl-nav-right .rl-audio-btn,
    html body .rl-lesson-nav .rl-nav-right .rl-audio-restart-btn,
    html body .rl-slide-buttons .rl-audio-btn,
    html body .rl-slide-buttons .rl-audio-restart-btn {
        background: #fff !important;
        border: 1px solid rgba(15, 23, 42, 0.16) !important;
        color: var(--rl-primary, #007cba) !important;
        box-shadow: none !important;
    }

    html body .rl-lesson-nav .rl-nav-right .rl-audio-btn:hover,
    html body .rl-lesson-nav .rl-nav-right .rl-audio-restart-btn:hover,
    html body .rl-slide-buttons .rl-audio-btn:hover,
    html body .rl-slide-buttons .rl-audio-restart-btn:hover {
        background: #f8fafc !important;
        color: var(--rl-primary-dark, #005a87) !important;
    }

    html body .rl-lesson-nav .rl-nav-right .rl-inline-notice {
        grid-column: 1 / -1;
        justify-self: start;
        max-width: none;
        white-space: normal;
    }

    html body .rl-slide-nav {
        grid-template-columns: 1fr;
    }

    html body .rl-slide-nav .rl-slide-progress {
        max-width: none !important;
        order: 0;
        width: 100% !important;
    }

    html body .rl-slide-nav .rl-slide-nav-left {
        display: grid !important;
        width: 100%;
    }

    html body .rl-slide-buttons,
    html body .rl-quiz-nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    html body .rl-slide-buttons {
        align-items: center;
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px !important;
        justify-content: center;
    }

    html body .rl-slide-buttons .rally-helper__toolbar-trigger,
    html body .rl-slide-buttons .rl-audio-btn,
    html body .rl-slide-buttons .rl-audio-restart-btn {
        flex: 0 0 44px;
        height: 44px !important;
        min-height: 44px;
        min-width: 44px;
        order: 1;
        padding-left: 0;
        padding-right: 0;
        width: 44px !important;
    }

    html body .rl-slide-buttons .rl-btn:not(.rl-audio-btn):not(.rl-audio-restart-btn):not(.rally-helper__toolbar-trigger) {
        flex: 1 1 calc(50% - 4px);
        max-width: none;
        min-width: 0;
        order: 2;
        white-space: nowrap;
    }

    html body .rl-slide-buttons .rl-inline-notice {
        grid-column: 1 / -1;
        justify-self: start;
        max-width: none;
        white-space: normal;
    }

    html body .rl-slide-buttons .rl-btn,
    html body .rl-slide-nav-left .rl-btn,
    html body .rl-quiz-nav .rl-btn,
    html body .rl-lesson-nav .rl-btn {
        justify-content: center;
        margin: 0 !important;
        text-align: center;
        width: 100%;
    }

    html body .rl-quiz-nav .rl-btn-submit {
        grid-column: 1 / -1;
    }

    html body .rl-course-outline-sidebar {
        border-radius: 0;
        max-width: none;
        width: min(88vw, 360px);
    }

    html.rl-dark-mode body .rl-lesson-top-bar,
    html.rl-dark-mode body .rl-lesson-nav,
    html.rl-dark-mode body .rl-slide-nav,
    html.rl-dark-mode body .rl-quiz-nav {
        background: rgba(5, 10, 18, 0.96) !important;
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}
.rl-language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 6px 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  color: inherit;
  font-size: 13px;
}

.rl-language-switcher .rl-language-label {
  color: #667085;
  font-weight: 600;
  margin-right: 2px;
}

.rl-language-switcher a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--rl-course-primary, #007cba);
  text-decoration: none;
  font-weight: 600;
}

.rl-language-switcher a:hover,
.rl-language-switcher a:focus,
.rl-language-switcher a.active {
  background: color-mix(in srgb, var(--rl-course-primary, #007cba) 12%, #fff);
  color: var(--rl-course-primary, #007cba);
}

.rl-dark-mode .rl-language-switcher,
body.rl-dark-mode .rl-language-switcher {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(17, 24, 39, 0.82);
}

.rl-dark-mode .rl-language-switcher .rl-language-label,
body.rl-dark-mode .rl-language-switcher .rl-language-label {
  color: rgba(255, 255, 255, 0.7);
}

.rl-dark-mode .rl-language-switcher a:hover,
.rl-dark-mode .rl-language-switcher a:focus,
.rl-dark-mode .rl-language-switcher a.active,
body.rl-dark-mode .rl-language-switcher a:hover,
body.rl-dark-mode .rl-language-switcher a:focus,
body.rl-dark-mode .rl-language-switcher a.active {
  background: rgba(255, 255, 255, 0.12);
}

.rl-lesson-top-bar > div:last-child {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.rl-language-switcher-topbar {
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  gap: 4px;
  position: relative;
}

.rl-language-switcher-topbar .rl-language-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rl-language-menu-toggle {
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 7px;
  height: 34px;
  min-height: 34px;
  min-width: 136px;
  max-width: none;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--rl-course-button, #007cba) 70%, #fff);
  border-radius: 4px;
  background: var(--rl-course-button, #007cba);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.rl-lesson-wrapper .rl-language-switcher-topbar button.rl-language-menu-toggle,
.rl-lesson-top-bar .rl-language-switcher-topbar button.rl-language-menu-toggle {
  align-items: center;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 34px;
  min-height: 34px;
  min-width: 136px;
  max-width: none;
  padding: 6px 10px;
  white-space: nowrap;
}

.rl-language-menu-toggle > span:not(.rl-language-caret) {
  align-items: center;
  display: inline-flex;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rl-language-menu-toggle:focus {
  outline: 2px solid color-mix(in srgb, var(--rl-course-button, #007cba) 35%, #fff);
  outline-offset: 2px;
}

.rl-language-flag-img {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.rl-language-fallback-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  line-height: 1;
}

.rl-language-caret {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 10px;
}

.rl-language-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1000;
  display: none;
  min-width: 190px;
  max-height: min(320px, 70vh);
  overflow-y: auto;
  padding: 5px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.18);
}

.rl-language-switcher-topbar.is-open .rl-language-menu {
  display: block;
}

.rl-language-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 5px;
  color: #1f2937;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.rl-language-menu a:hover,
.rl-language-menu a:focus,
.rl-language-menu a.active {
  background: color-mix(in srgb, var(--rl-course-primary, #007cba) 12%, #fff);
  color: var(--rl-course-primary, #007cba);
}

.rl-dark-mode .rl-language-switcher-topbar,
body.rl-dark-mode .rl-language-switcher-topbar {
  background: transparent;
  border-color: transparent;
}

.rl-dark-mode .rl-language-menu-toggle,
body.rl-dark-mode .rl-language-menu-toggle {
  background: var(--rl-course-button, #007cba);
  border-color: var(--rl-course-button, #007cba);
  color: #fff;
}

.rl-dark-mode .rl-language-menu,
body.rl-dark-mode .rl-language-menu {
  background: #101827;
  border-color: rgba(148, 163, 184, 0.24);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
}

.rl-dark-mode .rl-language-menu a,
body.rl-dark-mode .rl-language-menu a {
  color: #e5edf7;
}

.rl-dark-mode .rl-language-menu a:hover,
.rl-dark-mode .rl-language-menu a:focus,
.rl-dark-mode .rl-language-menu a.active,
body.rl-dark-mode .rl-language-menu a:hover,
body.rl-dark-mode .rl-language-menu a:focus,
body.rl-dark-mode .rl-language-menu a.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.rl-translation-disclaimer {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.58);
}

body.rl-translation-disclaimer-open {
  overflow: hidden;
}

.rl-translation-disclaimer-panel {
  width: min(560px, 100%);
  border: 1px solid rgba(190, 18, 60, 0.25);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 24px 90px rgba(15, 23, 42, 0.28);
  color: #1f2937;
  padding: 22px;
}

.rl-translation-disclaimer-panel h2 {
  margin: 0 0 10px;
  color: #991b1b;
  font-size: 22px;
}

.rl-translation-disclaimer-message {
  color: #374151;
  font-size: 15px;
  line-height: 1.55;
}

.rl-translation-disclaimer-message section + section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.32);
}

.rl-translation-disclaimer-message h3 {
  margin: 0 0 6px;
  color: #991b1b;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.rl-translation-disclaimer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.rl-translation-disclaimer.is-accepted {
  display: none;
}

.rl-dark-mode .rl-translation-disclaimer-panel,
body.rl-dark-mode .rl-translation-disclaimer-panel {
  background: #101827;
  border-color: rgba(248, 113, 113, 0.35);
  color: #f8fafc;
}

.rl-dark-mode .rl-translation-disclaimer-message,
body.rl-dark-mode .rl-translation-disclaimer-message {
  color: #dbe4ef;
}

.rl-dark-mode .rl-translation-disclaimer-message section + section,
body.rl-dark-mode .rl-translation-disclaimer-message section + section {
  border-top-color: rgba(148, 163, 184, 0.24);
}

@media (max-width: 640px) {
  .rl-language-menu-toggle {
    min-width: 132px;
    max-width: 152px;
  }

  .rl-language-menu {
    right: auto;
    left: 0;
    min-width: 180px;
  }

  .rl-translation-disclaimer-panel {
    padding: 18px;
  }
}