.results-section {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 50px 20px;
        }

        /* =========================================
           RESULTS GRID
        ========================================= */

        .results-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 24px;
        }

        /* =========================================
           FLIP CARD
        ========================================= */

        .result-card {
            width: 100%;
            height: 600px;
            perspective: 1500px;
            cursor: pointer;
            outline: none;
        }

        .result-card-inner {
            position: relative;
            width: 100%;
            height: 600px;

            transform-style: preserve-3d;
            transition: transform 0.75s cubic-bezier(.4, .2, .2, 1);
        }

        .result-card:hover .result-card-inner,
        .result-card.flipped .result-card-inner {
            transform: rotateY(180deg);
        }

        .result-card-front,
        .result-card-back {
            position: absolute;
            inset: 0;

            width: 100%;
            height: 600px;

            border-radius: 24px;

            overflow: hidden;

            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;

            background:
                radial-gradient(
                    circle at top right,
                    rgba(255, 255, 255, 0.15),
                    transparent 35%
                ),
                linear-gradient(
                    145deg,
                    #111827 0%,
                    #1f2937 50%,
                    #0f172a 100%
                );

            box-shadow:
                0 20px 45px rgba(15, 23, 42, 0.16);

            color: #ffffff;
        }

        /* =========================================
           FRONT
        ========================================= */

        .result-card-front {
            display: flex;
            flex-direction: column;
            padding: 25px 25px 20px;
        }

        .student-photo-wrap {
            width: 125px;
            height: 125px;

            margin: 0 auto 16px;

            border-radius: 50%;

            padding: 5px;

            background: rgba(255, 255, 255, 0.15);

            box-shadow:
                0 10px 30px rgba(0, 0, 0, 0.25);

            flex-shrink: 0;
        }

        .student-photo {
            display: block;

            width: 100%;
            height: 100%;

            object-fit: cover;

            border-radius: 50%;

            background: #ffffff;
        }

        .student-name {
            margin: 0;
            text-align: center;
            text-transform: uppercase;
            font-size: 20px;
            line-height: 1.2;
            font-weight: 700;
            color: #ffffff;
        }

        .student-country {
            margin-top: 5px;

            text-align: center;

            font-size: 15px;
            line-height: 1.3;

            font-weight: 400;

            color: rgba(255, 255, 255, 0.72);
        }

        /* =========================================
           FLAG
        ========================================= */

        .flag-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 2px;
            margin-bottom: 10px;
            min-height: 35px;
        }

        .country-flag {
            width: 35px;
            height: 35px;

            border-radius: 50%;

            object-fit: cover;

            display: block;

            background: rgba(255, 255, 255, 0.1);

            border: 2px solid rgba(255, 255, 255, 0.45);

            box-shadow:
                0 5px 15px rgba(0, 0, 0, 0.25);
        }

        /* =========================================
           RATING
        ========================================= */

        .rating {
            display: flex;

            justify-content: center;
            align-items: center;

            gap: 3px;

            margin: 2px 0 8px;
        }

        .rating-star {
            font-size: 19px;
            line-height: 1;
        }

        .rating-star.active {
            color: #fbbf24;
        }

        .rating-star.inactive {
            color: rgba(255, 255, 255, 0.22);
        }

        /* =========================================
           EXAM TYPE
        ========================================= */

        .exam-type {
            text-align: center;

            font-size: 15px;

            font-weight: 600;

            color: #ffffff;

            margin-bottom: 12px;
        }

        .exam-badge {
            display: inline-flex;

            align-items: center;
            justify-content: center;

            padding: 7px 14px;

            border-radius: 999px;

            background: rgba(255, 255, 255, 0.11);

            border: 1px solid rgba(255, 255, 255, 0.14);

            font-size: 13px;
            font-weight: 600;
        }

        /* =========================================
           SCORES
        ========================================= */

        .scores-grid {
            display: grid;

            grid-template-columns: repeat(2, minmax(0, 1fr));

            gap: 10px;

            margin-top: 4px;
        }

        .score-box {
            min-height: 58px;

            display: flex;

            flex-direction: column;

            justify-content: center;
            align-items: center;

            padding: 7px;

            border-radius: 14px;

            background: rgba(255, 255, 255, 0.085);

            border: 1px solid rgba(255, 255, 255, 0.10);
        }

        .score-label {
            font-size: 11px;

            text-transform: uppercase;

            letter-spacing: 0.7px;

            font-weight: 500;

            color: rgba(255, 255, 255, 0.62);

            margin-bottom: 2px;
        }

        .score-value {
            font-size: 21px;

            line-height: 1;

            font-weight: 700;

            color: #ffffff;
        }

        .overall-score-box {
            grid-column: span 2;

            min-height: 64px;

            background:
                linear-gradient(
                    135deg,
                    rgba(255, 255, 255, 0.14),
                    rgba(255, 255, 255, 0.06)
                );
        }

        .overall-score-box .score-label {
            font-size: 12px;
        }

        .overall-score-box .score-value {
            font-size: 29px;
        }

        /* =========================================
           FLIP HINT
        ========================================= */

        .flip-hint {
            margin-top: 12px;

            text-align: center;

            font-size: 12px;

            color: rgba(255, 255, 255, 0.48);

            letter-spacing: 0.2px;
        }

        /* =========================================
           BACK
        ========================================= */

        .result-card-back {
            transform: rotateY(180deg);

            padding: 30px 25px;

            display: flex;

            flex-direction: column;

            justify-content: flex-start;
        }

        .back-title {
            margin: 0;
            text-align: center;
            text-transform: uppercase;
            font-size: 20px;
            line-height: 1.2;
            font-weight: 700;
            color: #ffffff;
        }

        .back-exam {
            margin-top: 7px;

            text-align: center;

            font-size: 14px;

            color: rgba(255, 255, 255, 0.62);
        }

        .back-flag {
            display: flex;
            justify-content: center;
            margin: 5px 0 5px;
        }

        .back-flag img {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(255, 255, 255, 0.4);
        }

        /* =========================================
           IMPROVEMENT
        ========================================= */

        .improved-section {
            margin-top: 4px;
        }

        .section-title {
            text-align: center;
            margin: 0 0 10px;
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.7px;
            color: rgba(255, 255, 255, 0.65);
        }

        .how-improved {
            margin: 0;
            padding: 16px;
            min-height: 130px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.075);
            border: 1px solid rgba(255, 255, 255, 0.10);
            color: rgba(255, 255, 255, 0.86);
            font-size: 16px;
            line-height: 1.65;
            text-align:center;
        }

        /* =========================================
           TARGET / ACHIEVED
        ========================================= */

        .target-grid {
            display: grid;

            grid-template-columns: repeat(2, minmax(0, 1fr));

            gap: 12px;

            margin-top: 22px;
        }

        .target-box {
            padding: 17px 12px;

            text-align: center;

            border-radius: 16px;

            background: rgba(255, 255, 255, 0.075);

            border: 1px solid rgba(255, 255, 255, 0.10);
        }

        .target-label {
            display: block;

            margin-bottom: 5px;

            font-size: 11px;

            text-transform: uppercase;

            letter-spacing: 0.6px;

            color: rgba(255, 255, 255, 0.58);
        }

        .target-value {
            font-size: 24px;

            font-weight: 700;

            color: #ffffff;
        }

        /* =========================================
           BACK HINT
        ========================================= */

        .back-flip-hint {
            margin-top: 12px;
            text-align: center;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.48);
            letter-spacing: 0.2px;
        }

        

        /* =========================================
           LOADING
        ========================================= */

        .results-loading {
            grid-column: 1 / -1;

            min-height: 250px;

            display: flex;

            justify-content: center;
            align-items: center;

            font-size: 17px;

            color: #64748b;
        }

        /* =========================================
           EMPTY
        ========================================= */

        .results-empty {
            grid-column: 1 / -1;

            text-align: center;

            padding: 60px 20px;

            color: #64748b;

            font-size: 17px;
        }

        /* =========================================
           ERROR
        ========================================= */

        .results-error {
            grid-column: 1 / -1;

            text-align: center;

            padding: 40px 20px;

            color: #dc2626;

            font-size: 16px;
        }

        /* =========================================
           TABLET
        ========================================= */

        @media (max-width: 1100px) {

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

        }

        /* =========================================
           MOBILE
        ========================================= */

        @media (max-width: 650px) {

            .results-section {
                padding: 30px 15px;
            }

            .results-grid {
                grid-template-columns: 1fr;

                gap: 20px;
            }

        }

        /* =========================================
           SMALL MOBILE
        ========================================= */

        @media (max-width: 400px) {

            .result-card,
            .result-card-inner,
            .result-card-front,
            .result-card-back {
                height: 600px;
            }

            .result-card-front {
                padding: 22px 18px 18px;
            }

            .student-photo-wrap {
                width: 115px;
                height: 115px;
            }

            .student-name {
                font-size: 20px;
            }

            .country-flag,
            .back-flag img {
                width: 44px;
                height: 44px;
            }

            .score-box {
                min-height: 58px;
            }

            .score-value {
                font-size: 20px;
            }

            .overall-score-box .score-value {
                font-size: 27px;
            }

        }