```vue
<template>
    <div class="exam-builder-page">

        <!-- =========================================================
             PAGE HEADER
        ========================================================== -->
        <header class="page-header">

            <div class="header-left">

                <BackNavigation />

                <div class="header-copy">

                    <div class="eyebrow">
                        <span class="eyebrow-icon">
                            <i class="bi bi-stars"></i>
                        </span>

                        Nurxam AI Workspace
                    </div>

                    <div class="page-title-row">
                        <h1 class="page-title">
                            Create Your Custom Exam
                        </h1>

                        <span class="ai-badge">
                            <span class="status-dot"></span>
                            AI Powered
                        </span>
                    </div>

                    <p class="page-description">
                        Turn your study material into a personalized nursing exam
                        with intelligent questions, answers and rationales.
                    </p>

                </div>

            </div>

            <div class="ai-status">
                <span class="ai-status-dot"></span>

                <span>AI Ready</span>

                <i class="bi bi-stars"></i>
            </div>

        </header>


        <!-- =========================================================
             MAIN BUILDER
        ========================================================== -->
        <main class="builder-shell">

            <!-- =====================================================
                 PREMIUM HERO
            ====================================================== -->
            <section class="builder-hero">

                <div class="hero-glow hero-glow-one"></div>
                <div class="hero-glow hero-glow-two"></div>

                <div class="hero-content">

                    <div class="hero-label">
                        <i class="bi bi-magic"></i>
                        Intelligent Exam Generation
                    </div>

                    <h2>
                        Build a practice exam
                        <span>in seconds.</span>
                    </h2>

                    <p>
                        Give Naxlex AI your learning material and let it create
                        high-quality nursing questions tailored to your study goals.
                    </p>

                    <div class="hero-features">

                        <span>
                            <i class="bi bi-check-circle-fill"></i>
                            Smart question generation
                        </span>

                        <span>
                            <i class="bi bi-check-circle-fill"></i>
                            Detailed rationales
                        </span>

                        <span>
                            <i class="bi bi-check-circle-fill"></i>
                            Multiple question sizes
                        </span>

                    </div>

                </div>

                <div class="hero-visual">

                    <div class="ai-orbit">

                        <div class="orbit-ring orbit-ring-one"></div>
                        <div class="orbit-ring orbit-ring-two"></div>

                        <div class="ai-core">
                            <i class="bi bi-stars"></i>
                        </div>

                        <span class="orbit-icon icon-one">
                            <i class="bi bi-file-earmark-text"></i>
                        </span>

                        <span class="orbit-icon icon-two">
                            <i class="bi bi-lightbulb"></i>
                        </span>

                        <span class="orbit-icon icon-three">
                            <i class="bi bi-check2-circle"></i>
                        </span>

                    </div>

                </div>

            </section>


            <!-- =====================================================
                 PROGRESS STEPS
            ====================================================== -->
            <div class="builder-steps">

                <div class="builder-step active">

                    <div class="step-number">
                        1
                    </div>

                    <div>
                        <strong>Add study material</strong>
                        <span>Paste or upload your content</span>
                    </div>

                </div>

                <div class="step-line"></div>

                <div class="builder-step">

                    <div class="step-number">
                        2
                    </div>

                    <div>
                        <strong>Choose questions</strong>
                        <span>Select your exam size</span>
                    </div>

                </div>

                <div class="step-line"></div>

                <div class="builder-step">

                    <div class="step-number">
                        <i class="bi bi-stars"></i>
                    </div>

                    <div>
                        <strong>Generate</strong>
                        <span>Let Naxlex AI do the work</span>
                    </div>

                </div>

            </div>


            <!-- =====================================================
                 CONTENT BODY
            ====================================================== -->
            <div class="builder-body">


                <!-- =================================================
                     SECTION 1
                ================================================== -->
                <section class="builder-section">

                    <div class="section-heading">

                        <div class="section-icon teal">
                            <i class="bi bi-journal-text"></i>
                        </div>

                        <div>

                            <div class="section-title">
                                Add your study material
                            </div>

                            <div class="section-description">
                                Use your own notes, textbook material,
                                questions or clinical guidelines.
                            </div>

                        </div>

                        <div class="section-badge">
                            Step 1
                        </div>

                    </div>


                    <!-- =============================================
                         PASTE CONTENT CARD
                    ============================================== -->
                    <div class="input-card">

                        <div class="input-card-header">

                            <div class="input-card-title">

                                <span class="mini-icon">
                                    <i class="bi bi-pencil-square"></i>
                                </span>

                                <div>
                                    <strong>Paste study content</strong>
                                    <span>
                                        Add your learning material directly
                                    </span>
                                </div>

                            </div>

                            <span class="recommended-badge">
                                Recommended
                            </span>

                        </div>


                        <div class="textarea-wrapper">

                            <textarea
                                v-model="form.content"
                                rows="12"
                                class="study-content"
                                placeholder="Paste your lecture notes, textbook content, clinical guidelines, practice questions or other study material here..."
                            ></textarea>

                            <div class="textarea-overlay">
                                <i class="bi bi-stars"></i>
                                Naxlex AI will analyze this content
                            </div>

                        </div>


                        <div class="textarea-footer">

                            <div class="textarea-tip">
                                <i class="bi bi-lightbulb-fill"></i>

                                <span>
                                    More relevant content helps AI create
                                    better questions.
                                </span>
                            </div>

                            <div class="character-count">
                                {{ form.content.length.toLocaleString() }}
                                <span>/ 100,000</span>
                            </div>

                        </div>

                    </div>


                    <!-- =============================================
                         OR DIVIDER
                    ============================================== -->
                    <div class="source-divider">

                        <span class="source-line"></span>

                        <span class="source-or">
                            OR
                        </span>

                        <span class="source-line"></span>

                    </div>


                    <!-- =============================================
                         UPLOAD CARD
                    ============================================== -->
                    <div class="input-card upload-card">

                        <div class="input-card-header">

                            <div class="input-card-title">

                                <span class="mini-icon purple">
                                    <i class="bi bi-cloud-arrow-up"></i>
                                </span>

                                <div>
                                    <strong>Upload a document</strong>
                                    <span>
                                        Let Naxlex AI extract your study content
                                    </span>
                                </div>

                            </div>

                            <span class="format-label">
                                Max 9 MB
                            </span>

                        </div>


                        <!-- REAL FILE INPUT -->
                        <input
                            ref="file"
                            type="file"
                            class="file-input"
                            accept=".pdf,.doc,.docx,.txt"
                            @change="handleFileUpload"
                        />


                        <!-- =========================================
                             DROP ZONE
                        ========================================== -->
                        <div
                            class="upload-zone"
                            :class="{
                                'drag-active': isDragging,
                                'has-file': selectedFile
                            }"

                            @dragenter.prevent="handleDragEnter"
                            @dragover.prevent="handleDragOver"
                            @dragleave.prevent="handleDragLeave"
                            @drop.prevent="handleDrop"
                        >

                            <!-- NO FILE -->
                            <template v-if="!selectedFile">

                                <div class="upload-illustration">

                                    <div class="upload-main-icon">
                                        <i class="bi bi-cloud-arrow-up"></i>
                                    </div>

                                    <span class="upload-floating-icon upload-floating-one">
                                        <i class="bi bi-file-earmark-pdf"></i>
                                    </span>

                                    <span class="upload-floating-icon upload-floating-two">
                                        <i class="bi bi-file-earmark-text"></i>
                                    </span>

                                </div>

                                <h3>
                                    Drop your document here
                                </h3>

                                <p>
                                    Drag and drop your study material,
                                    or choose a file from your device.
                                </p>

                                <button
                                    type="button"
                                    class="choose-file-btn"
                                    @click="openFilePicker"
                                >
                                    <i class="bi bi-folder2-open"></i>
                                    Choose Document
                                </button>

                                <div class="format-pills">

                                    <span class="format-pill">
                                        <i class="bi bi-file-earmark-pdf"></i>
                                        PDF
                                    </span>

                                    <span class="format-pill">
                                        <i class="bi bi-file-earmark-word"></i>
                                        DOC
                                    </span>

                                    <span class="format-pill">
                                        <i class="bi bi-file-earmark-word"></i>
                                        DOCX
                                    </span>

                                    <span class="format-pill">
                                        <i class="bi bi-file-earmark-text"></i>
                                        TXT
                                    </span>

                                </div>

                            </template>


                            <!-- FILE SELECTED -->
                            <template v-else>

                                <div class="selected-file">

                                    <div class="selected-file-icon">
                                        <i
                                            :class="
                                                getFileIcon(
                                                    selectedFile.name
                                                )
                                            "
                                        ></i>
                                    </div>

                                    <div class="selected-file-details">

                                        <span class="selected-label">
                                            DOCUMENT READY
                                        </span>

                                        <strong class="selected-file-name">
                                            {{ selectedFile.name }}
                                        </strong>

                                        <div class="selected-file-meta">

                                            <span>
                                                {{ formatFileSize(selectedFile.size) }}
                                            </span>

                                            <span class="meta-separator">
                                                •
                                            </span>

                                            <span class="ready-status">
                                                <i class="bi bi-check-circle-fill"></i>
                                                Ready to process
                                            </span>

                                        </div>

                                    </div>

                                    <div class="selected-actions">

                                        <button
                                            type="button"
                                            class="change-file-btn"
                                            @click="openFilePicker"
                                        >
                                            <i class="bi bi-arrow-repeat"></i>
                                            Change
                                        </button>

                                        <button
                                            type="button"
                                            class="remove-file-btn"
                                            title="Remove document"
                                            @click.stop="removeFile"
                                        >
                                            <i class="bi bi-x-lg"></i>
                                        </button>

                                    </div>

                                </div>

                            </template>


                            <!-- DRAG OVERLAY -->
                            <div
                                v-if="isDragging"
                                class="drop-overlay"
                            >

                                <div class="drop-overlay-icon">
                                    <i class="bi bi-cloud-arrow-down"></i>
                                </div>

                                <strong>
                                    Drop your document here
                                </strong>

                                <span>
                                    Release to upload
                                </span>

                            </div>

                        </div>


                        <!-- FILE ERROR -->
                        <div
                            v-if="fileError"
                            class="file-error"
                        >
                            <div class="file-error-icon">
                                <i class="bi bi-exclamation-triangle-fill"></i>
                            </div>

                            <span>
                                {{ fileError }}
                            </span>
                        </div>

                    </div>

                </section>


                <!-- =================================================
                     SECTION 2
                ================================================== -->
                <section class="builder-section question-section">

                    <div class="section-heading">

                        <div class="section-icon green">
                            <i class="bi bi-sliders"></i>
                        </div>

                        <div>

                            <div class="section-title">
                                Choose your exam size
                            </div>

                            <div class="section-description">
                                Select how many questions you want Naxlex AI
                                to generate.
                            </div>

                        </div>

                        <div class="section-badge">
                            Step 2
                        </div>

                    </div>


                    <div class="question-selector">

                        <div class="question-selector-header">

                            <div>

                                <span class="selector-label">
                                    Number of questions
                                </span>

                                <span class="selector-help">
                                    You can choose up to 50 questions.
                                </span>

                            </div>

                            <div class="selected-count">

                                <strong>
                                    {{ form.number_of_questions }}
                                </strong>

                                <span>
                                    questions
                                </span>

                            </div>

                        </div>


                        <div class="question-count-wrapper">

                            <div
                                v-for="num in questionOptions"
                                :key="num"
                                class="question-option"
                            >

                                <input
                                    :id="'questions-' + num"
                                    v-model.number="form.number_of_questions"
                                    type="radio"
                                    name="number_of_questions"
                                    :value="num"
                                    :disabled="loading"
                                />

                                <label :for="'questions-' + num">

                                    <span class="question-number">
                                        {{ num }}
                                    </span>

                                    <span class="question-word">
                                        Questions
                                    </span>

                                    <span class="question-check">
                                        <i class="bi bi-check2"></i>
                                    </span>

                                </label>

                            </div>

                        </div>

                    </div>

                </section>


                <!-- =================================================
                     ERROR
                ================================================== -->
                <div
                    v-if="errorMsg"
                    class="main-error"
                >

                    <div class="main-error-icon">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                    </div>

                    <div class="main-error-content">
                        <strong>
                            Unable to generate your exam
                        </strong>

                        <span>
                            {{ errorMsg }}
                        </span>
                    </div>

                    <button
                        type="button"
                        class="error-close"
                        @click="errorMsg = null"
                    >
                        <i class="bi bi-x"></i>
                    </button>

                </div>


                <!-- =================================================
                     GENERATE AREA
                ================================================== -->
                <div class="generate-area">

                    <div class="generate-message">

                        <div class="generate-ai-icon">

                            <i class="bi bi-stars"></i>

                            <span></span>

                        </div>

                        <div>

                            <span class="generate-label">
                                READY TO CREATE
                            </span>

                            <h3>
                                Let Naxlex AI build your exam
                            </h3>

                            <p>
                                Your material will be analyzed and transformed
                                into {{ form.number_of_questions }} practice questions
                                with detailed rationales.
                            </p>

                        </div>

                    </div>


                    <button
                        type="button"
                        class="generate-btn"

                        :disabled="
                            loading ||
                            (!form.content && !selectedFile) ||
                            !examEligibility ||
                            loadingEligibility
                        "

                        @click="generateQuestions"
                    >

                        <template v-if="loading">

                            <span class="button-spinner"></span>

                            Generating Exam...

                        </template>

                        <template v-else>

                            <i class="bi bi-stars"></i>

                            Generate My Exam

                            <i class="bi bi-arrow-right"></i>

                        </template>

                    </button>

                </div>

            </div>

        </main>


        <!-- =========================================================
             GENERATION MODAL
        ========================================================== -->
        <Dialog
            v-model:visible="showGenerationModal"
            modal
            :closable="false"
            :closeOnEscape="false"
            :style="{
                width: '470px',
                maxWidth: '92vw'
            }"
            :showHeader="false"
        >

            <div class="generation-modal">

                <div class="generation-modal-icon">

                    <div class="generation-icon-ring"></div>

                    <i class="bi bi-stars"></i>

                </div>


                <span class="modal-eyebrow">
                    NAXLEX AI
                </span>

                <h2>
                    Creating your exam
                </h2>

                <p>
                    {{ progressMessage }}
                </p>


                <div class="generation-progress-info">

                    <span>
                        AI generation in progress
                    </span>

                    <strong>
                        {{ generationProgress }}%
                    </strong>

                </div>


                <div class="generation-progress-bar">

                    <div
                        class="generation-progress-fill"
                        :style="{
                            width: generationProgress + '%'
                        }"
                    ></div>

                </div>


                <div class="generation-time">

                    <span>
                        <i class="bi bi-clock"></i>
                        Elapsed time
                    </span>

                    <strong>
                        {{ formattedTime }}
                    </strong>

                </div>


                <div class="generation-status">

                    <span class="status-pulse"></span>

                    Naxlex AI is working on your questions...

                </div>


                <div class="generation-warning">

                    <i class="bi bi-info-circle"></i>

                    Please keep this window open while your exam
                    is being generated.

                </div>

            </div>

        </Dialog>


        <!-- =========================================================
             EXAM READY MODAL
        ========================================================== -->
        <Dialog
            v-model:visible="showDialog"
            modal
            :closable="true"
            :style="{
                width: '430px',
                maxWidth: '92vw'
            }"
        >

            <div class="exam-ready-dialog">

                <div class="exam-ready-icon">

                    <i class="bi bi-check-lg"></i>

                </div>

                <span class="modal-eyebrow success">
                    EXAM READY
                </span>

                <h2>
                    Your practice exam is ready
                </h2>

                <p>
                    Naxlex AI has successfully created your personalized
                    exam. You're ready to start learning.
                </p>


                <div class="exam-ready-summary">

                    <div>

                        <span>
                            Questions
                        </span>

                        <strong>
                            {{ questions.length }}
                        </strong>

                    </div>

                    <div>

                        <span>
                            Generated by
                        </span>

                        <strong>
                            Naxlex AI
                        </strong>

                    </div>

                </div>


                <button
                    @click="startExam(customExam.slug)"
                    class="start-exam-btn"
                    :disabled="showProgress"
                >

                    <template v-if="showProgress">

                        <span class="button-spinner"></span>

                        Preparing Exam...

                    </template>

                    <template v-else>

                        <i class="bi bi-play-fill"></i>

                        Start Exam

                        <i class="bi bi-arrow-right"></i>

                    </template>

                </button>

            </div>

        </Dialog>

    </div>
</template>


<script>
import axios from "axios";
import localforage from "localforage";
import Dialog from "primevue/dialog";
import BackNavigation from "../custom/BackNavigation.vue";

export default {

    components: {
        Dialog,
        BackNavigation
    },

    data() {

        return {

            loading: false,

            showDialog: false,

            showGenerationModal: false,

            showProgress: false,

            selectedFile: null,

            isDragging: false,

            fileError: null,

            questionOptions: [
                5,
                10,
                15,
                20,
                25,
                30,
                40,
                50
            ],

            questions: [],

            customExam: null,

            errorMsg: null,

            loadingEligibility: false,

            examEligibility: true,

            generationProgress: 0,

            progressMessage: "",

            progressInterval: null,

            seconds: 0,

            timer: null,

            form: {

                content: "",

                number_of_questions: 10

            }

        };

    },


    beforeUnmount() {

        this.clearProgressInterval();

        this.stopTimer();

    },


    beforeDestroy() {

        clearInterval(this.timer);

    },


    computed: {

        formattedTime() {

            const minutes =
                Math.floor(this.seconds / 60);

            const seconds =
                this.seconds % 60;

            return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;

        }

    },


    methods: {

        /* =========================================================
           FILE PICKER
        ========================================================== */

        openFilePicker() {

            this.fileError = null;

            if (this.$refs.file) {

                this.$refs.file.value = "";

                this.$refs.file.click();

            }

        },


        handleFileUpload(event) {

            const files = event.target.files;

            if (
                files &&
                files.length > 0
            ) {

                this.setSelectedFile(files[0]);

            } else {

                this.selectedFile = null;

            }

        },


        /* =========================================================
           TIMER
        ========================================================== */

        startTimer() {

            if (this.timer) return;

            this.timer = setInterval(() => {

                this.seconds++;

            }, 1000);

        },


        stopTimer() {

            clearInterval(this.timer);

            this.timer = null;

        },


        /* =========================================================
           DRAG & DROP
        ========================================================== */

        handleDragEnter() {

            this.isDragging = true;

        },


        handleDragOver() {

            this.isDragging = true;

        },


        handleDragLeave(event) {

            if (
                event.relatedTarget &&
                event.currentTarget.contains(
                    event.relatedTarget
                )
            ) {

                return;

            }

            this.isDragging = false;

        },


        handleDrop(event) {

            this.isDragging = false;

            const files =
                event.dataTransfer.files;

            if (
                files &&
                files.length > 0
            ) {

                this.setSelectedFile(
                    files[0]
                );

            }

        },


        /* =========================================================
           VALIDATE FILE
        ========================================================== */

        setSelectedFile(file) {

            this.fileError = null;

            if (!file) {

                this.selectedFile = null;

                return;

            }


            const maxFileSize =
                9 * 1024 * 1024;


            if (file.size > maxFileSize) {

                this.fileError =
                    "File is too large. Maximum allowed size is 9 MB.";

                this.selectedFile = null;

                this.resetFileInput();

                return;

            }


            const allowedExtensions = [
                "pdf",
                "doc",
                "docx",
                "txt"
            ];


            const fileNameParts =
                file.name.split(".");


            const extension =
                fileNameParts.length > 1
                    ? fileNameParts
                        .pop()
                        .toLowerCase()
                    : "";


            if (
                !allowedExtensions.includes(
                    extension
                )
            ) {

                this.fileError =
                    "Only PDF, DOC, DOCX and TXT files are allowed.";

                this.selectedFile = null;

                this.resetFileInput();

                return;

            }


            this.selectedFile = file;

        },


        removeFile() {

            this.selectedFile = null;

            this.fileError = null;

            this.isDragging = false;

            this.resetFileInput();

        },


        resetFileInput() {

            if (this.$refs.file) {

                this.$refs.file.value = "";

            }

        },


        /* =========================================================
           FILE ICON
        ========================================================== */

        getFileIcon(fileName) {

            if (!fileName) {

                return "bi bi-file-earmark";

            }


            const parts =
                fileName.split(".");


            const extension =
                parts.length > 1
                    ? parts
                        .pop()
                        .toLowerCase()
                    : "";


            switch (extension) {

                case "pdf":

                    return "bi bi-file-earmark-pdf";


                case "doc":

                case "docx":

                    return "bi bi-file-earmark-word";


                case "txt":

                    return "bi bi-file-earmark-text";


                default:

                    return "bi bi-file-earmark";

            }

        },


        /* =========================================================
           FILE SIZE
        ========================================================== */

        formatFileSize(size) {

            if (!size) {

                return "0 MB";

            }


            if (size < 1024) {

                return size + " Bytes";

            }


            if (
                size <
                1024 * 1024
            ) {

                return (
                    size / 1024
                ).toFixed(2) + " KB";

            }


            return (
                size /
                1024 /
                1024
            ).toFixed(2) + " MB";

        },


        /* =========================================================
           GENERATION PROGRESS
        ========================================================== */

        startGenerationProgress() {

            this.clearProgressInterval();


            const questionCount =
                Number(
                    this.form.number_of_questions
                ) || 10;


            this.generationProgress = 5;


            this.progressMessage =
                "Preparing your study material...";


            this.progressInterval =
                setInterval(() => {

                    if (
                        this.generationProgress < 92
                    ) {

                        let increment = 2;


                        if (
                            this.generationProgress < 35
                        ) {

                            increment = 4;

                        } else if (
                            questionCount >= 40
                        ) {

                            increment = 1;

                        }


                        this.generationProgress =
                            Math.min(
                                92,
                                this.generationProgress +
                                increment
                            );

                    }


                    if (
                        this.generationProgress < 25
                    ) {

                        this.progressMessage =
                            "Reading and preparing your content...";

                    } else if (
                        this.generationProgress < 45
                    ) {

                        this.progressMessage =
                            "Identifying important nursing concepts...";

                    } else if (
                        this.generationProgress < 82
                    ) {

                        this.progressMessage =
                            `Generating ${questionCount} questions in optimized batches...`;

                    } else {

                        this.progressMessage =
                            "Validating questions and detailed rationales...";

                    }

                }, 1400);

        },


        finishGenerationProgress() {

            this.clearProgressInterval();

            this.generationProgress = 100;

            this.progressMessage =
                "Your exam is ready!";

        },


        resetGenerationProgress() {

            this.clearProgressInterval();

            this.generationProgress = 0;

            this.progressMessage = "";

            this.showGenerationModal = false;

        },


        clearProgressInterval() {

            if (this.progressInterval) {

                clearInterval(
                    this.progressInterval
                );

                this.progressInterval = null;

            }

        },


        /* =========================================================
           SAVE GENERATION TIME
        ========================================================== */

        async saveQuestionGenerationTime(exam_id) {

            try {

                const payload = {

                    id: exam_id,

                    time_taken: this.seconds

                };


                await axios.post(
                    "/api/custom-questions/save-qsn-generation-time",
                    payload
                );

            } catch (error) {

                console.log(error);

            }

        },


        /* =========================================================
           GENERATE QUESTIONS
        ========================================================== */

        async generateQuestions() {

            try {

                this.startTimer();


                const pastedContent =
                    (this.form.content || "").trim();


                const questionCount =
                    Number(
                        this.form.number_of_questions
                    );


                if (
                    !this.selectedFile &&
                    pastedContent.length < 20
                ) {

                    this.errorMsg =
                        "Please paste at least 20 characters of study content or upload a document.";

                    return;

                }


                if (
                    !Number.isInteger(
                        questionCount
                    ) ||
                    questionCount < 1 ||
                    questionCount > 50
                ) {

                    this.errorMsg =
                        "Please choose between 1 and 50 questions.";

                    return;

                }


                this.errorMsg = null;

                this.loading = true;

                this.generationProgress = 0;

                this.progressMessage =
                    "Preparing your study material...";

                this.showGenerationModal = true;

                this.startGenerationProgress();


                const formData =
                    new FormData();


                formData.append(
                    "number_of_questions",
                    questionCount
                );


                if (
                    pastedContent.length >= 20
                ) {

                    formData.append(
                        "content",
                        pastedContent
                    );

                }


                if (this.selectedFile) {

                    formData.append(
                        "file",
                        this.selectedFile
                    );

                }


                const response =
                    await axios.post(
                        "/api/custom-questions/generate",
                        formData,
                        {
                            headers: {
                                "Content-Type":
                                    "multipart/form-data"
                            },

                            timeout: 240000
                        }
                    );


                if (
                    response.data.success
                ) {

                    this.questions =
                        response.data.questions || [];


                    this.customExam =
                        response.data.customExam;


                    if (
                        this.customExam
                    ) {

                        this.saveQuestionGenerationTime(
                            this.customExam.id
                        );

                    }


                    this.finishGenerationProgress();


                    setTimeout(() => {

                        this.showGenerationModal =
                            false;


                        if (
                            this.questions.length > 0 &&
                            this.customExam
                        ) {

                            this.showDialog = true;

                        }


                        this.stopTimer();

                    }, 500);

                } else {

                    this.resetGenerationProgress();

                    this.errorMsg =
                        response.data.error_msg ||
                        response.data.message ||
                        "Unexpected error occurred when attempting to generate your test. Try again later.";

                    this.stopTimer();


                    setTimeout(() => {

                        this.errorMsg = null;

                    }, 5000);

                }

            } catch (error) {

                console.error(
                    "Error generating questions:",
                    error
                );


                this.resetGenerationProgress();


                this.errorMsg =
                    error.response?.data?.message ||
                    error.response?.data?.error_msg ||
                    (
                        error.code ===
                        "ECONNABORTED"
                    )
                        ? "Question generation took too long. Please try again."
                        : "Failed to generate questions.";


                this.stopTimer();


                setTimeout(() => {

                    this.errorMsg = null;

                }, 5000);

            } finally {

                this.loading = false;

            }

        },


        /* =========================================================
           START EXAM
        ========================================================== */

        async startExam(slug) {

            if (
                !this.$store.state.user
            ) {

                this.$router.push(
                    "/signin"
                );

                return;

            }


            if (!slug) {

                return;

            }


            const mode = 0;

            this.showProgress = true;


            try {

                const payload = {

                    slug: slug,

                    mode: mode,

                    user_id:
                        this.$store.state.user
                            ? this.$store.state.user.id
                            : null

                };


                const response =
                    await axios.post(
                        "/api/get-custom-exam-questions",
                        payload
                    );


                if (
                    response.data.status
                ) {

                    localStorage.removeItem(
                        "attempt"
                    );

                    localStorage.removeItem(
                        "questions"
                    );

                    localStorage.removeItem(
                        "currentPage"
                    );

                    localStorage.removeItem(
                        "answered_questions"
                    );

                    localStorage.removeItem(
                        "un_answered_questions"
                    );

                    localStorage.removeItem(
                        "totalQuestions"
                    );

                    localStorage.removeItem(
                        "questionsToShow"
                    );

                    localStorage.removeItem(
                        "examName"
                    );

                    localStorage.removeItem(
                        "examScore"
                    );

                    localStorage.removeItem(
                        "resumeTest"
                    );


                    if (
                        response.data.attempt
                    ) {

                        this.$store.state.attempt =
                            response.data.attempt;


                        localStorage.setItem(
                            "attempt",
                            JSON.stringify(
                                response.data.attempt
                            )
                        );

                    }


                    this.$store.state.questions =
                        response.data.questions;


                    localStorage.setItem(
                        "totalQuestions",
                        response.data.totalQuestions
                    );


                    localStorage.setItem(
                        "questionsToShow",
                        response.data.questionsToShow
                    );


                    localStorage.setItem(
                        "examName",
                        response.data.subtopicName
                    );


                    localStorage.setItem(
                        "examScore",
                        0
                    );


                    await this.removeDataFromLF(
                        "questions"
                    );


                    const question_pages = [];


                    let index = 0;


                    Object.values(
                        response.data.questions
                    ).forEach(
                        (question) => {

                            index++;


                            question_pages.push({

                                question: question,

                                has_subquestion: false,

                                sub_question: null,

                                page: index

                            });

                        }
                    );


                    await this.saveDataToLf(
                        "questions",
                        JSON.stringify(
                            question_pages
                        )
                    );


                    if (mode === 1) {

                        if (
                            this.$store.state.user
                        ) {

                            this.$router.push(
                                "/exam-mode/" +
                                slug
                            );

                        } else {

                            this.$router.push(
                                "/signin"
                            );

                        }

                    } else {

                        this.$router.push(
                            "/tutor-mode/" +
                            slug
                        );

                    }

                } else {

                    this.showProgress = false;

                }

            } catch (error) {

                this.showProgress = false;

                console.error(
                    "Error:",
                    error
                );

            }

        },


        /* =========================================================
           LOCALFORAGE
        ========================================================== */

        async saveDataToLf(
            key,
            data
        ) {

            await localforage
                .setItem(
                    key,
                    JSON.stringify(data)
                )
                .then(() => {

                    console.log(
                        key +
                        " saved!"
                    );

                })
                .catch((err) => {

                    console.error(
                        "Error saving data:",
                        err
                    );

                });

        },


        async removeDataFromLF(
            key
        ) {

            await localforage
                .removeItem(key)
                .then(() => {

                    console.log(
                        key +
                        " removed!"
                    );

                })
                .catch((err) => {

                    console.error(
                        "Error removing data:",
                        err
                    );

                });

        }

    }

};
</script>


<style scoped>

/* ================================================================
   GLOBAL
================================================================ */

.exam-builder-page {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 28px 30px 50px;
    color: #172033;
}


/* ================================================================
   PAGE HEADER
================================================================ */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.header-left {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.header-copy {
    min-width: 0;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #078b87;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.1px;
}

.eyebrow-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #087f8c;
    background: #e8f8f7;
    border-radius: 7px;
}

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

.page-title {
    margin: 0;
    color: #101a2d;
    font-size: 29px;
    font-weight: 850;
    letter-spacing: -1px;
}

.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    color: #087c70;
    background: #eaf9f5;
    border: 1px solid #d0eee6;
    border-radius: 100px;
    font-size: 9.5px;
    font-weight: 800;
}

.status-dot {
    width: 6px;
    height: 6px;
    background: #12b886;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(18,184,134,.1);
}

.page-description {
    max-width: 760px;
    margin: 6px 0 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.6;
}

.ai-status {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    color: #087c6d;
    background: #f0fbf8;
    border: 1px solid #d6eee8;
    border-radius: 11px;
    font-size: 10px;
    font-weight: 800;
}

.ai-status i {
    color: #10b89b;
}

.ai-status-dot {
    width: 7px;
    height: 7px;
    background: #10b890;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(16,184,144,.12);
}


/* ================================================================
   MAIN SHELL
================================================================ */

.builder-shell {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e4e9ef;
    border-radius: 24px;
    box-shadow:
        0 20px 55px rgba(20, 35, 60, .07),
        0 3px 12px rgba(20, 35, 60, .025);
}


/* ================================================================
   HERO
================================================================ */

.builder-hero {
    position: relative;
    min-height: 245px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 38px 48px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(27, 208, 187, .22),
            transparent 23%
        ),
        radial-gradient(
            circle at 60% 120%,
            rgba(29, 117, 190, .22),
            transparent 35%
        ),
        linear-gradient(
            120deg,
            #071d35 0%,
            #083d55 46%,
            #087b82 100%
        );
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.hero-glow-one {
    width: 260px;
    height: 260px;
    top: -160px;
    right: 160px;
    border: 1px solid rgba(255,255,255,.09);
}

.hero-glow-two {
    width: 330px;
    height: 330px;
    right: -180px;
    bottom: -210px;
    border: 1px solid rgba(255,255,255,.08);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.hero-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: #8ce9dd;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
}

.hero-content h2 {
    max-width: 680px;
    margin: 0;
    color: #ffffff;
    font-size: 31px;
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: -1.2px;
}

.hero-content h2 span {
    color: #73e3d5;
}

.hero-content p {
    max-width: 680px;
    margin: 11px 0 17px;
    color: rgba(255,255,255,.72);
    /* font-size: 13px; */
    line-height: 1.65;
}

.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.hero-features span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.78);
    font-size: 13px;
    font-weight: 650;
}

.hero-features i {
    color: #68ddc9;
    font-size: 11px;
}


/* ================================================================
   HERO VISUAL
================================================================ */

.hero-visual {
    position: relative;
    z-index: 2;
    width: 250px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-orbit {
    position: relative;
    width: 145px;
    height: 145px;
}

.orbit-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(133,238,226,.22);
    border-radius: 50%;
}

.orbit-ring-one {
    transform: rotate(20deg) scaleX(1.45);
}

.orbit-ring-two {
    transform: rotate(-35deg) scaleY(.65);
}

.ai-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 68px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #12bfa8,
        #087c91
    );
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 21px;
    box-shadow:
        0 15px 35px rgba(0,0,0,.2),
        0 0 0 10px rgba(91,224,207,.07);
    font-size: 27px;
}

.orbit-icon {
    position: absolute;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8cece0;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    font-size: 13px;
}

.icon-one {
    top: 0;
    left: 15px;
}

.icon-two {
    top: 52px;
    right: -2px;
}

.icon-three {
    bottom: 0;
    left: 18px;
}


/* ================================================================
   STEPS
================================================================ */

.builder-steps {
    min-height: 78px;
    display: flex;
    align-items: center;
    padding: 0 42px;
    background: #fbfcfd;
    border-bottom: 1px solid #e8edf1;
}

.builder-step {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 190px;
}

.step-number {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7c8796;
    background: #ffffff;
    border: 1px solid #dce3e9;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 850;
}

.builder-step.active .step-number {
    color: #ffffff;
    background: linear-gradient(135deg, #087f8c, #11b7a3);
    border-color: transparent;
    box-shadow: 0 7px 17px rgba(8,127,140,.18);
}

.builder-step strong {
    display: block;
    color: #263247;
    font-size: 13px;
    font-weight: 800;
}

.builder-step span {
    display: block;
    margin-top: 2px;
    color: #8a95a5;
    font-size: 13px;
}

.step-line {
    flex: 1;
    height: 1px;
    max-width: 100px;
    margin: 0 20px;
    background: #dfe5ea;
}


/* ================================================================
   BODY
================================================================ */

.builder-body {
    padding: 34px 42px 40px;
}

.builder-section {
    position: relative;
}

.section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 17px;
}

.section-icon.teal {
    color: #087f8c;
    background: #e8f8f8;
    border: 1px solid #d4eeee;
}

.section-icon.green {
    color: #16834a;
    background: #eaf8ef;
    border: 1px solid #d6eddf;
}

.section-title {
    color: #172033;
    font-size: 16px;
    font-weight: 850;
}

.section-description {
    margin-top: 3px;
    color: #7a8696;
    font-size: 11.5px;
}

.section-badge {
    margin-left: auto;
    padding: 5px 9px;
    color: #7d8998;
    background: #f7f9fb;
    border: 1px solid #e4e9ee;
    border-radius: 7px;
    font-size: 8px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .7px;
}


/* ================================================================
   INPUT CARD
================================================================ */

.input-card {
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e1e7ec;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(30,45,60,.025);
}

.input-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px;
}

.input-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mini-icon {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #087f8c;
    background: #eaf8f8;
    border-radius: 9px;
    font-size: 13px;
}

.mini-icon.purple {
    color: #7657d9;
    background: #f1edff;
}

.input-card-title strong {
    display: block;
    color: #243047;
    font-size: 13.5px;
    font-weight: 800;
}

.input-card-title span {
    display: block;
    margin-top: 2px;
    color: #8a95a5;
    font-size: 13px;
}

.recommended-badge {
    padding: 5px 8px;
    color: #087f6d;
    background: #eaf8f4;
    border: 1px solid #d5eee7;
    border-radius: 6px;
    font-size: 8.5px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.format-label {
    color: #9aa4b1;
    font-size: 13px;
    font-weight: 700;
}


/* ================================================================
   TEXTAREA
================================================================ */

.textarea-wrapper {
    position: relative;
}

.study-content {
    width: 100%;
    min-height: 270px;
    padding: 17px;
    display: block;
    color: #273248;
    background: #fbfcfd;
    border: 1px solid #dfe6eb;
    border-radius: 12px;
    resize: vertical;
    outline: none;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.7;
    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.study-content::placeholder {
    color: #a1aab6;
}

.study-content:focus {
    background: #ffffff;
    border-color: #62bfc1;
    box-shadow:
        0 0 0 4px rgba(8,127,140,.06);
}

.textarea-overlay {
    position: absolute;
    right: 12px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    color: #8a96a5;
    background: rgba(255,255,255,.88);
    border: 1px solid #e4e9ed;
    border-radius: 6px;
    font-size: 8px;
    pointer-events: none;
}

.textarea-overlay i {
    color: #0a9d91;
}

.textarea-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 8px;
}

.textarea-tip {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #8a95a3;
    font-size: 13px;
}

.textarea-tip i {
    color: #e0a239;
}

.character-count {
    flex-shrink: 0;
    color: #6e7b8b;
    font-size: 13px;
    font-weight: 800;
}

.character-count span {
    color: #a3acb7;
    font-weight: 600;
}


/* ================================================================
   DIVIDER
================================================================ */

.source-divider {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 22px 0;
}

.source-line {
    flex: 1;
    height: 1px;
    background: #e7ebef;
}

.source-or {
    width: 34px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a7560;
    background: #fff8ee;
    border: 1px solid #f1dfc7;
    border-radius: 100px;
    font-size: 8px;
    font-weight: 850;
}


/* ================================================================
   UPLOAD
================================================================ */

.upload-zone {
    position: relative;
    min-height: 225px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    background:
        radial-gradient(
            circle at 50% 100%,
            rgba(126,92,222,.06),
            transparent 45%
        ),
        #fafaff;
    border: 1.5px dashed #c9cce1;
    border-radius: 13px;
    transition: .2s ease;
}

.upload-zone:hover {
    background: #f8f9ff;
    border-color: #8370d5;
}

.upload-zone.drag-active {
    background: #f3f2ff;
    border-color: #6e57d6;
    box-shadow:
        0 0 0 4px rgba(110,87,214,.06);
}

.upload-zone.has-file {
    min-height: 145px;
    background: #f9fcfb;
    border-style: solid;
    border-color: #cfe6dd;
}

.file-input {
    display: none;
}

.upload-illustration {
    position: relative;
    width: 72px;
    height: 63px;
    margin-bottom: 10px;
}

.upload-main-icon {
    width: 55px;
    height: 55px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #7657e8, #4d7de7);
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(89,78,205,.17);
    font-size: 23px;
}

.upload-floating-icon {
    position: absolute;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2e5f1;
    border-radius: 7px;
    box-shadow: 0 5px 13px rgba(30,40,70,.08);
    font-size: 10px;
}

.upload-floating-one {
    top: 0;
    right: 0;
    color: #dc5960;
}

.upload-floating-two {
    left: 0;
    bottom: 0;
    color: #4778d7;
}

.upload-zone h3 {
    margin: 0 0 5px;
    color: #252e46;
    font-size: 13px;
    font-weight: 850;
}

.upload-zone > p {
    max-width: 480px;
    margin: 0 0 13px;
    color: #8993a2;
    font-size: 9.5px;
    line-height: 1.6;
}

.choose-file-btn {
    min-height: 37px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #ffffff;
    background: linear-gradient(135deg, #6551d5, #477adf);
    border: 0;
    border-radius: 9px;
    box-shadow: 0 7px 16px rgba(83,75,196,.17);
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}

.choose-file-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(83,75,196,.24);
}

.format-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 12px;
}

.format-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    color: #778294;
    background: #ffffff;
    border: 1px solid #e5e8ef;
    border-radius: 5px;
    font-size: 9.5px;
    font-weight: 800;
}

.format-pill i {
    font-size: 8px;
}


/* ================================================================
   SELECTED FILE
================================================================ */

.selected-file {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid #e0ebe6;
    border-radius: 11px;
}

.selected-file-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #7657e8, #4d7de7);
    border-radius: 11px;
    font-size: 20px;
}

.selected-file-details {
    min-width: 0;
    flex: 1;
    text-align: left;
}

.selected-label {
    display: block;
    margin-bottom: 3px;
    color: #0a9a79;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .8px;
}

.selected-file-name {
    display: block;
    overflow: hidden;
    color: #29344a;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.selected-file-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
    color: #8c97a5;
    font-size: 8px;
}

.meta-separator {
    color: #c4cad2;
}

.ready-status {
    color: #079572;
    font-weight: 750;
}

.ready-status i {
    margin-right: 2px;
}

.selected-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.change-file-btn,
.remove-file-btn {
    border: 0;
    cursor: pointer;
}

.change-file-btn {
    padding: 7px 9px;
    color: #5b54ba;
    background: #f2f0ff;
    border-radius: 7px;
    font-size: 8.5px;
    font-weight: 800;
}

.remove-file-btn {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b95a3;
    background: #f6f7f9;
    border: 1px solid #e4e8ed;
    border-radius: 7px;
    font-size: 13px;
}

.remove-file-btn:hover {
    color: #d44c55;
    background: #fff1f2;
    border-color: #f1d4d7;
}


/* ================================================================
   DROP OVERLAY
================================================================ */

.drop-overlay {
    position: absolute;
    inset: 7px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #5b51ca;
    background: rgba(247,246,255,.97);
    border-radius: 9px;
    pointer-events: none;
}

.drop-overlay-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #6b58d8, #477ce0);
    border-radius: 12px;
    font-size: 20px;
}

.drop-overlay strong {
    font-size: 12px;
}

.drop-overlay span {
    margin-top: 3px;
    color: #8992a3;
    font-size: 8.5px;
}


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

.file-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    padding: 9px 11px;
    color: #a13c42;
    background: #fff4f5;
    border: 1px solid #f2d7d9;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 650;
}

.file-error-icon {
    color: #d95058;
}


/* ================================================================
   QUESTION SELECTOR
================================================================ */

.question-section {
    margin-top: 34px;
}

.question-selector {
    padding: 19px;
    background: #fbfcfd;
    border: 1px solid #e2e8ed;
    border-radius: 15px;
}

.question-selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 15px;
}

.selector-label {
    display: block;
    color: #28344a;
    font-size: 13px;
    font-weight: 850;
}

.selector-help {
    display: block;
    margin-top: 3px;
    color: #8c97a5;
    font-size: 12.5px;
}

.selected-count {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: #087f8c;
}

.selected-count strong {
    font-size: 21px;
    font-weight: 850;
}

.selected-count span {
    color: #84909f;
    font-size: 12px;
    font-weight: 700;
}

.question-count-wrapper {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
}

.question-option {
    position: relative;
}

.question-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.question-option label {
    position: relative;
    width: 100%;
    min-height: 70px;
    margin: 0;
    padding: 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #697587;
    background: #ffffff;
    border: 1px solid #dfe6eb;
    border-radius: 10px;
    cursor: pointer;
    transition: .2s ease;
}

.question-option label:hover {
    border-color: #9bcfd1;
    background: #f8fcfc;
    transform: translateY(-1px);
}

.question-number {
    color: #253149;
    font-size: 16px;
    font-weight: 850;
}

.question-word {
    margin-top: 2px;
    color: #8993a1;
    font-size: 11.5px;
    font-weight: 650;
}

.question-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0;
    transform: scale(.6);
    transition: .2s ease;
    font-size: 8px;
}

.question-option input:checked + label {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #087f8c,
        #11b7a3
    );
    border-color: transparent;
    box-shadow:
        0 9px 22px rgba(8,127,140,.17);
}

.question-option input:checked + label .question-number,
.question-option input:checked + label .question-word {
    color: #ffffff;
}

.question-option input:checked + label .question-check {
    color: #087f8c;
    opacity: 1;
    transform: scale(1);
}


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

.main-error {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 12px 14px;
    color: #963e44;
    background: #fff4f5;
    border: 1px solid #f0d6d9;
    border-radius: 10px;
}

.main-error-icon {
    width: 31px;
    height: 31px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d94e56;
    background: #ffe5e7;
    border-radius: 8px;
    font-size: 12px;
}

.main-error-content {
    min-width: 0;
    flex: 1;
}

.main-error-content strong {
    display: block;
    font-size: 9.5px;
    font-weight: 850;
}

.main-error-content span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
}

.error-close {
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a06d72;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}


/* ================================================================
   GENERATE AREA
================================================================ */

.generate-area {
    margin-top: 25px;
    padding: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background:
        linear-gradient(
            110deg,
            #f1faf9,
            #f6fbff 52%,
            #f6f5ff
        );
    border: 1px solid #dcebe9;
    border-radius: 15px;
}

.generate-message {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.generate-ai-icon {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #087f8c;
    background: #dff6f2;
    border: 1px solid #caebe5;
    border-radius: 12px;
    font-size: 17px;
}

.generate-ai-icon span {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    background: #13b895;
    border-radius: 50%;
}

.generate-label {
    display: block;
    margin-bottom: 2px;
    color: #0a9782;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .9px;
}

.generate-message h3 {
    margin: 0;
    color: #243149;
    font-size: 12.5px;
    font-weight: 850;
}

.generate-message p {
    max-width: 700px;
    margin: 3px 0 0;
    color: #7d8998;
    font-size: 13.5px;
    line-height: 1.5;
}

.generate-btn {
    min-width: 205px;
    min-height: 48px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #087f8c,
        #0b9c91
    );
    border: 0;
    border-radius: 10px;
    box-shadow:
        0 10px 23px rgba(8,127,140,.2);
    font-size: 10.5px;
    font-weight: 850;
    cursor: pointer;
    transition: .2s ease;
}

.generate-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 14px 29px rgba(8,127,140,.27);
}

.generate-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}

.generate-btn > i:last-child {
    margin-left: 2px;
    font-size: 10px;
}

.button-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}


/* ================================================================
   GENERATION MODAL
================================================================ */

.generation-modal {
    padding: 14px 10px 8px;
    text-align: center;
}

.generation-modal-icon {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 auto 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #087f8c,
        #11b7a3
    );
    border-radius: 21px;
    box-shadow:
        0 14px 30px rgba(8,127,140,.2);
    font-size: 27px;
}

.generation-icon-ring {
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(8,127,140,.13);
    border-radius: 25px;
    animation: pulse-ring 2s infinite;
}

.modal-eyebrow {
    display: inline-block;
    margin-bottom: 5px;
    color: #087f8c;
    font-size: 7.5px;
    font-weight: 850;
    letter-spacing: 1.2px;
}

.modal-eyebrow.success {
    color: #15915b;
}

.generation-modal h2,
.exam-ready-dialog h2 {
    margin: 0;
    color: #1b263a;
    font-size: 19px;
    font-weight: 850;
}

.generation-modal > p,
.exam-ready-dialog > p {
    margin: 7px auto 20px;
    color: #7c8796;
    font-size: 10px;
    line-height: 1.55;
}

.generation-progress-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
    color: #8994a3;
    font-size: 8.5px;
}

.generation-progress-info strong {
    color: #087f8c;
    font-size: 10px;
}

.generation-progress-bar {
    width: 100%;
    height: 9px;
    overflow: hidden;
    background: #e8eef0;
    border-radius: 100px;
}

.generation-progress-fill {
    height: 100%;
    background: linear-gradient(
        90deg,
        #087f8c,
        #11b7a3
    );
    border-radius: 100px;
    transition: width .8s ease;
    position: relative;
}

.generation-progress-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    animation: shimmer 1.4s infinite;
}

.generation-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    color: #929cab;
    font-size: 8px;
}

.generation-time span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.generation-time strong {
    color: #536073;
    font-size: 13px;
}

.generation-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 20px;
    padding: 7px 10px;
    color: #087d70;
    background: #effaf7;
    border: 1px solid #d9eee8;
    border-radius: 7px;
    font-size: 8px;
    font-weight: 700;
}

.status-pulse {
    width: 6px;
    height: 6px;
    background: #11b594;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(17,181,148,.09);
}

.generation-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    color: #98a1ae;
    font-size: 8px;
}

.generation-warning i {
    color: #c1a35d;
}


/* ================================================================
   EXAM READY
================================================================ */

.exam-ready-dialog {
    padding: 8px 7px;
    text-align: center;
}

.exam-ready-icon {
    width: 70px;
    height: 70px;
    margin: 3px auto 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #078868,
        #15b988
    );
    border-radius: 50%;
    box-shadow:
        0 14px 30px rgba(10,153,109,.2);
    font-size: 28px;
}

.exam-ready-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 15px;
}

.exam-ready-summary > div {
    padding: 11px;
    background: #f8fafb;
    border: 1px solid #e7ecef;
    border-radius: 9px;
}

.exam-ready-summary span {
    display: block;
    color: #919aa7;
    font-size: 7.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.exam-ready-summary strong {
    display: block;
    margin-top: 4px;
    color: #253148;
    font-size: 11px;
    font-weight: 850;
}

.start-exam-btn {
    width: 100%;
    min-height: 46px;
    margin-top: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #087f8c,
        #11a996
    );
    border: 0;
    border-radius: 10px;
    box-shadow:
        0 10px 22px rgba(8,127,140,.2);
    font-size: 10.5px;
    font-weight: 850;
    cursor: pointer;
}

.start-exam-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}


/* ================================================================
   ANIMATIONS
================================================================ */

@keyframes spin {

    to {
        transform: rotate(360deg);
    }

}

@keyframes shimmer {

    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }

}

@keyframes pulse-ring {

    0% {
        transform: scale(.95);
        opacity: .7;
    }

    70% {
        transform: scale(1.08);
        opacity: 0;
    }

    100% {
        transform: scale(.95);
        opacity: 0;
    }

}


/* ================================================================
   LARGE TABLETS
================================================================ */

@media (max-width: 1199px) {

    .question-count-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }

    .hero-visual {
        width: 190px;
    }

}


/* ================================================================
   TABLETS
================================================================ */

@media (max-width: 991px) {

    .exam-builder-page {
        padding: 20px;
    }

    .builder-hero {
        padding: 32px;
    }

    .hero-content h2 {
        font-size: 27px;
    }

    .builder-body {
        padding: 28px;
    }

    .builder-steps {
        padding: 0 28px;
    }

    .hero-visual {
        width: 150px;
    }

    .generate-area {
        align-items: stretch;
        flex-direction: column;
    }

    .generate-btn {
        width: 100%;
    }

}


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

@media (max-width: 767px) {

    .exam-builder-page {
        padding: 12px;
    }

    .page-header {
        align-items: flex-start;
        margin-bottom: 15px;
    }

    .header-left {
        gap: 10px;
    }

    .page-title {
        font-size: 21px;
        letter-spacing: -.6px;
    }

    .page-description {
        font-size: 10.5px;
    }

    .ai-status {
        display: none;
    }

    .builder-shell {
        border-radius: 17px;
    }

    .builder-hero {
        min-height: auto;
        padding: 27px 21px;
    }

    .hero-content h2 {
        font-size: 25px;
    }

    .hero-content p {
        /* font-size: 11px; */
    }

    .hero-features {
        flex-direction: column;
        gap: 7px;
    }

    .hero-visual {
        display: none;
    }

    .builder-steps {
        min-height: auto;
        padding: 15px 17px;
        overflow-x: auto;
    }

    .builder-step {
        min-width: 135px;
    }

    .builder-step strong {
        font-size: 13px;
    }

    .builder-step span {
        font-size: 7.5px;
    }

    .step-line {
        min-width: 20px;
        margin: 0 8px;
    }

    .builder-body {
        padding: 22px 15px 25px;
    }

    .section-heading {
        align-items: flex-start;
    }

    .section-badge {
        display: none;
    }

    .section-title {
        font-size: 14px;
    }

    .section-description {
        font-size: 9.5px;
    }

    .input-card {
        padding: 14px;
    }

    .input-card-header {
        align-items: flex-start;
    }

    .recommended-badge {
        display: none;
    }

    .textarea-overlay {
        display: none;
    }

    .study-content {
        min-height: 220px;
        font-size: 11px;
    }

    .textarea-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .upload-zone {
        min-height: 210px;
        padding: 20px 12px;
    }

    .selected-file {
        align-items: flex-start;
    }

    .selected-actions {
        flex-direction: column;
    }

    .question-section {
        margin-top: 27px;
    }

    .question-selector {
        padding: 14px;
    }

    .question-count-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .question-option label {
        min-height: 64px;
    }

    .generate-message {
        align-items: flex-start;
    }

    .generate-message p {
        font-size: 8.5px;
    }

    .generate-btn {
        min-height: 46px;
    }

}


/* ================================================================
   VERY SMALL DEVICES
================================================================ */

@media (max-width: 420px) {

    .page-title-row {
        gap: 6px;
    }

    .ai-badge {
        font-size: 8px;
        padding: 4px 7px;
    }

    .builder-hero {
        padding: 24px 17px;
    }

    .hero-content h2 {
        font-size: 22px;
    }

    .builder-steps {
        padding-left: 12px;
        padding-right: 12px;
    }

    .builder-step {
        min-width: 120px;
    }

    .step-line {
        margin: 0 5px;
    }

    .selected-file-icon {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    .selected-file-name {
        font-size: 9.5px;
    }

    .change-file-btn {
        font-size: 7.5px;
    }

}
</style>
```