.qsm-results-page {
        background-color: #eee;
        padding: 15px;
        border-radius: 10px;
    }

    .qsm-result-heading {
        text-align: center;
        border-bottom: 1px solid #e1dede;
    }

    .qsm-section-heading {
        padding: 10px;
        margin-top: 10px;
    }


    .qsm-snapshot,
    .qsm-overall,
    .qsm-priority-area,
    .qsm-wtm-section {
        margin: auto;
        width: 100%;
        background-color: #fff;
        padding: 15px;
        border-radius: 10px;
    }

    .qsm-overall {
        margin-bottom: 15px;
    }

    .lowest-section-block {
        margin-top: 15px;
    }

    .lowest-section-block p {
        margin-bottom: 15px;
    }

    .qsm_results_page.qmn_results_page form {
        text-align: center;
    }

    #qsm_retake_button {
        margin-top: 10px;
    }

    .section-name,
    .overall-score,
    .section-score,
    .section-status,
    .overall-status-level {
        font-weight: bold;
    }

    .qmn_quiz_container.qsm_auto_pagination_enabled {
        position: relative;
        background-color: #eee;
        padding: 20px;
        border-radius: 10px;
        max-width: 700px;
        margin: auto;
    }

    img.qsm-quiz-default-feature-image {
        border-radius: 10px;
    }

    a.qsm-start-btn.qmn_btn.mlw_next.qsm-btn.mlw_custom_start.qsm-primary,
    a.qsm-previous-btn.qmn_btn.qsm-btn.qsm-previous.mlw_qmn_quiz_link.mlw_previous.qsm-secondary,
    a.qsm-next-btn.qmn_btn.qsm-btn.qsm-next.mlw_qmn_quiz_link.mlw_next.mlw_custom_next.qsm-primary,
    input.qmn_btn.qsm-btn.qsm-submit-btn.qsm-primary,
    input#qsm_retake_button {
        background-color: #233a76 !important;
        border-radius: 10px !important;
        box-shadow: none !important;
    }

    .qsm-progress-bar svg path:first-of-type {
        stroke: #0d85cd;
    }

    .qsm-progress-bar svg path:nth-child(2) {
        stroke: #233a76;
    }

    .progressbar-text {
        color: #233a76 !important;
    }

    .qsm_contact_div {
        max-width: 50%;
        margin-left: 0px;
        margin-bottom: 0px;
        float: left;
        min-width: 44%;
        background-color: #fff;
        margin-top: 0px;
        padding: 15px;
    }

    .qsm_contact_div:nth-child(even) {
        margin-left: 6%;
        padding-left: 35px !important;
    }

    .qsm_contact_div.qsm-contact-type-email {
        border-top-right-radius: 10px;
    }

    .qsm_contact_div.qsm-contact-type-checkbox {
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .quiz_section.qsm-question-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border: none;
    }

    .mlw_qmn_question.qsm_remove_bold {
        order: 1;
        flex-basis: 100%;
        background-color: #fffefe;
        padding: 10px;
        text-align: center;
        border-radius: 10px;
        font-weight: bold !important;
        margin-bottom: 15px !important;
    }

    span.mlw_qmn_question_number {
        margin-bottom: 10px !important;
        order: 2;
    }

    .quiz_section .mlw_qmn_question.qsm_remove_bold p {
        margin-bottom: 0px;
    }

    .mlw_qmn_new_question {
        order: 3;
    }

    .quiz_section fieldset {
        order: 4;
        flex-basis: 100%;
    }

    section.qsm-page.qsm-question-page textarea {
        order: 4;
    }

    input.qsm-question-comment {
        order: 5;
        display: none !important;
    }

    label.qsm-input-label {
        font-size: 18px !important;
    }

    .qsm_contact_div.qsm-contact-type-checkbox label.mlw_qmn_question.qsm_question {
        font-weight: normal;
        font-size: small;
    }

    .qsm_contact_div.qsm-contact-type-checkbox {
        min-width: 88%;
    }

    .qsm_contact_div.qsm-contact-type-checkbox label.mlw_qmn_question.qsm_question {
        font-weight: normal;
        font-size: small;
        margin-left: 8px;
    }

    span.overall-status li,
    div.qsm-wtm-section li {
        list-style-type: square;
        text-transform: capitalize;
    }

    span.overall-status ul,
    div.qsm-wtm-section ul {
        margin-left: 15px;
    }

    span.overall-status-level {
        font-weight: bold;
    }

    .overall-status p {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .qsm-result-heading h2 {
        margin-top: 20px;
    }

    div.qsm-wtm-section p {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    /* pages css start */
    * {
        box-sizing: border-box;
    }

    body {
        background: #f1f5f9;
        font-family: 'Segoe UI', Roboto, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
        margin: 0;
        padding: 24px 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    /* main card container */
    .assessment-container {
        max-width: 1300px;
        width: 100%;
        background: white;
        border-radius: 32px;
        box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.2s;
    }

    /* header area with pagination controls */
    .section-header-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 20px 28px 8px 28px;
        border-bottom: 1px solid #e9edf2;
        background: #ffffff;
    }

    .qsm-section-heading h3 {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 700;
        background: linear-gradient(135deg, #1e2a3a, #0f2b3d);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        letter-spacing: -0.3px;
    }

    .qsm-section-heading p {
        margin: 6px 0 0 0;
        font-size: 0.85rem;
        color: #4b5563;
    }

    /* pagination panel */
    .pagination-panel {
        display: flex;
        align-items: center;
        gap: 12px;
        background: #f8fafc;
        padding: 6px 14px;
        border-radius: 60px;
        border: 1px solid #e2e8f0;
    }

    .nav-btn {
        background: #3c88c3 !important;
        border: 1px solid #3c88c3;
        font-size: 1.25rem;
        font-weight: 600;
        width: 40px;
        height: 40px;
        border-radius: 40px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #1e293b;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    }

    .nav-btn:hover:not(:disabled) {
        background: #1e2a3a;
        border-color: #1e2a3a;
        color: white;
        transform: scale(1.02);
    }

    .nav-btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        background: #4e85b8 !important;
        color: #94a3b8;
    }

    .page-indicator {
        font-weight: 600;
        font-size: 0.95rem;
        background: #eef2ff;
        padding: 6px 16px;
        border-radius: 40px;
        color: #0c4e6e;
        letter-spacing: 0.2px;
        font-family: monospace;
    }

    /* snapshot grid: each section card uses the provided table style */
    .qsm-snapshot {
        /* padding: 20px 28px 28px 28px; */
    }

    /* container for the active 5 sections — grid layout */
    .sections-grid {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    /* each section card — keeps original table design intact */
    .qsm-snapshot-section {
        background: #ffffff;
        border-radius: 24px;
        border: 1px solid #eef2f8;
        overflow: hidden;
        transition: all 0.2s;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    }

    .qsm-snapshot-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.95rem;
    }

    .qsm-snapshot-table thead tr {
        background: #f8fafd;
        border-bottom: 1px solid #e2edf2;
    }

    .qsm-snapshot-table th {
        text-align: left;
        padding: 14px 20px;
        font-weight: 600;
        color: #1f3b4c;
        font-size: 0.85rem;
        letter-spacing: 0.3px;
    }

    .qsm-snapshot-table td {
        padding: 14px 20px;
        border-bottom: 1px solid #f0f4f9;
        color: #1e2f3c;
        vertical-align: middle;
    }

    .qsm-section:last-child td {
        border-bottom: none;
    }

    .section-name {
        font-weight: 600;
        color: #0f2b3a;
    }

    .section-score {
        font-family: 'SF Mono', 'JetBrains Mono', monospace;
        font-weight: 500;
        color: #2c5f7a;
    }

    qsmvariabletag {
        background: #eef2ff;
        padding: 2px 8px;
        border-radius: 30px;
        font-size: 0.8rem;
        font-family: monospace;
        font-weight: 600;
        color: #075985;
        display: inline-block;
    }

    .section-status {
        font-weight: 500;
        background: #e6f7ec;
        display: inline-block;
        width: fit-content;
        padding: 4px 12px;
        border-radius: 40px;
        font-size: 0.8rem;
        color: #2b6e3c;
    }

    /* Empty / info state */
    .info-placeholder {
        text-align: center;
        padding: 48px 20px;
        background: #fefce8;
        border-radius: 32px;
        color: #856404;
        font-weight: 500;
    }

    /* footer */
    .footer-note {
        border-top: 1px solid #ecf3f9;
        padding: 14px 28px 20px;
        font-size: 0.75rem;
        color: #6c7a8a;
        text-align: center;
        background: #ffffff;
    }

    /* responsive adjustments */
    @media (max-width: 680px) {
        body {
            padding: 16px;
        }

        .section-header-wrapper {
            flex-direction: column;
            align-items: flex-start;
        }

        .qsm-snapshot-table th,
        .qsm-snapshot-table td {
            padding: 12px 12px;
            font-size: 0.85rem;
        }

        .pagination-panel {
            align-self: flex-start;
        }
    }

    button:active {
        transform: scale(0.97);
    }

    * {
        box-sizing: border-box;
    }

    body {
        background: #f1f5f9;
        font-family: 'Segoe UI', Roboto, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
        margin: 0;
        padding: 24px 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    /* main card container */
    .assessment-container {
        max-width: 1300px;
        width: 100%;
        background: white;
        border-radius: 32px;
        box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.2s;
    }

    /* header area with pagination controls */
    .section-header-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 20px 28px 8px 28px;
        border-bottom: 1px solid #e9edf2;
        background: #ffffff;
    }

    .qsm-section-heading h3 {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 700;
        background: linear-gradient(135deg, #1e2a3a, #0f2b3d);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        letter-spacing: -0.3px;
    }

    .qsm-section-heading p {
        margin: 6px 0 0 0;
        font-size: 0.85rem;
        color: #4b5563;
    }

    /* pagination panel */
    .pagination-panel {
        display: flex;
        align-items: center;
        gap: 12px;
        background: #f8fafc;
        padding: 6px 14px;
        border-radius: 60px;
        border: 1px solid #e2e8f0;
    }

    .nav-btn {
        background: white;
        border: 1px solid #cbd5e1;
        font-size: 1.25rem;
        font-weight: 600;
        width: 40px;
        height: 40px;
        border-radius: 40px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #1e293b;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    }

    .nav-btn:hover:not(:disabled) {
        background: #1e2a3a;
        border-color: #1e2a3a;
        color: white;
        transform: scale(1.02);
    }

    .nav-btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        background: #f1f5f9;
        color: #94a3b8;
    }

    .page-indicator {
        font-weight: 600;
        font-size: 0.95rem;
        background: #eef2ff;
        padding: 6px 16px;
        border-radius: 40px;
        color: #0c4e6e;
        letter-spacing: 0.2px;
        font-family: monospace;
    }

    /* snapshot grid */
    .qsm-snapshot {
        /* padding: 20px 28px 28px 28px; */
    }

    /* container for sections */
    .sections-grid {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    /* each section card */
    .qsm-snapshot-section {
        background: #ffffff;
        border-radius: 24px;
        border: 1px solid #eef2f8;
        overflow: hidden;
        transition: all 0.2s;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    }

    /* Sections hidden by JavaScript will have display: none */
    /* No additional styling needed for hidden state */

    .qsm-snapshot-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.95rem;
    }

    .qsm-snapshot-table thead tr {
        background: #f8fafd;
        border-bottom: 1px solid #e2edf2;
    }

    .qsm-snapshot-table th {
        text-align: left;
        padding: 14px 20px;
        font-weight: 600;
        color: #1f3b4c;
        font-size: 0.85rem;
        letter-spacing: 0.3px;
    }

    .qsm-snapshot-table td {
        padding: 14px 20px;
        border-bottom: 1px solid #f0f4f9;
        color: #1e2f3c;
        vertical-align: middle;
    }

    .qsm-section:last-child td {
        border-bottom: none;
    }

    .section-name {
        font-weight: 600;
        color: #0f2b3a;
    }

    .section-score {
        font-family: 'SF Mono', 'JetBrains Mono', monospace;
        font-weight: 500;
        color: #2c5f7a;
    }

    qsmvariabletag {
        background: #eef2ff;
        padding: 2px 8px;
        border-radius: 30px;
        font-size: 0.8rem;
        font-family: monospace;
        font-weight: 600;
        color: #075985;
        display: inline-block;
    }

    .section-status {
        font-weight: 500;
        background: #e6f7ec;
        display: inline-block;
        width: fit-content;
        padding: 4px 12px;
        border-radius: 40px;
        font-size: 0.8rem;
        color: #2b6e3c;
    }

    /* footer */
    .footer-note {
        border-top: 1px solid #ecf3f9;
        padding: 14px 28px 20px;
        font-size: 0.75rem;
        color: #6c7a8a;
        text-align: center;
        background: #ffffff;
    }

    /* responsive adjustments */
    @media (max-width: 680px) {
        body {
            padding: 16px;
        }

        .section-header-wrapper {
            flex-direction: column;
            align-items: flex-start;
        }

        .qsm-snapshot-table th,
        .qsm-snapshot-table td {
            padding: 12px 12px;
            font-size: 0.85rem;
        }

        .pagination-panel {
            align-self: flex-start;
        }
    }

    button:active {
        transform: scale(0.97);
    }

    .nav-btn img.emoji {
        width: 20px;
        height: 20px;
        display: block;
        /* filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg); */
    }

    .nav-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .nav-btn img {
        margin: 0 auto;
    }

    table.qsm-snapshot-table td.section-name {
        width: 73%;
    }