diff --git a/src/config/index.js b/src/config/index.js
index 4c0e555..881a35a 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -47,6 +47,40 @@ export const PROBLEM_API_URL = "https://ark.cn-beijing.volces.com/api/v3/chat/co
 export const PROBLEM_MODEL = "doubao-seed-2-0-lite-260215";
 export const PROBLEM_API_KEY = "2d46f767-6476-4858-8041-540fcae99808"; // 使用 DOUBAO_KEY
 
+// ── 试题生成接口（使用 Gemini-3.1-pro）──
+export const QUESTION_API_URL = "https://grsaiapi.com/v1/chat/completions";
+export const QUESTION_MODEL = "gemini-3.1-pro";
+export const QUESTION_TEMPERATURE = 0.8;
+export const QUESTION_MAX_TOKENS = 4096;
+
+// 试题生成 System Prompt
+export const QUESTION_GENERATOR_PROMPT = `你是一位专业的英语试题出题专家。请根据用户指定的参数生成高质量的英语试题。
+
+输出格式要求：
+## 题目 [序号]
+**题目类型**：[类型]
+**难度等级**：[难度]
+**题目内容**：
+[题目文本]
+**选项**：
+A. [选项A内容]
+B. [选项B内容]
+C. [选项C内容]
+D. [选项D内容]
+**正确答案**：[答案，如：A]
+**解析**：[详细解析]
+**知识点**：[相关知识点]
+
+重要规则：
+1. 所有题型都必须提供4个选项（A、B、C、D），即使是填空题、翻译题或阅读理解题
+2. 对于填空题：选项为不同的填空答案选项
+3. 对于翻译题：选项为不同的翻译版本
+4. 对于阅读理解题：选项为对问题的不同回答选项
+5. 题目质量要高，符合英语教学标准
+6. 答案准确无误
+7. 解析清晰易懂，有助于学生理解
+8. 知识点标注准确，便于分类学习`;
+
 // ── 文件上传限制 ──
 export const IMAGE_MAX_SIZE_MB = 10;
 export const IMAGE_ALLOWED_TYPES_ESSAY = ["image/jpeg", "image/jpg", "image/png"];
diff --git a/src/router/index.js b/src/router/index.js
index 4691e4b..523add5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,6 +6,7 @@ import EssayCorrection from '../views/EssayCorrection.vue'
 import ExamAnalysis from '../views/ExamAnalysis.vue'
 import SpellPractice from '../views/SpellPractice.vue'
 import ProblemSolving from '../views/ProblemSolving.vue'
+import QuestionGenerator from '../views/QuestionGenerator.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -45,6 +46,11 @@ const router = createRouter({
       name: 'problem-solving',
       component: ProblemSolving
     },
+    {
+      path: '/question-generator',
+      name: 'question-generator',
+      component: QuestionGenerator
+    },
   ]
 })
 
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 2800594..a45bdb7 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -61,6 +61,14 @@ const features = ref([
     icon: "puzzle",
     route: "/problem-solving",
   },
+  {
+    id: 8,
+    title: "AI试题生成",
+    desc: "智能生成英语试题，支持选择题、填空题、翻译题和阅读理解，可自定义难度、数量和知识点，快速创建高质量题库。",
+    class: "card-8",
+    icon: "document",
+    route: "/question-generator",
+  },
 ]);
 
 // Hover effect for glassmorphism glare
@@ -242,6 +250,22 @@ onUnmounted(() => {
                 d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
               />
             </svg>
+
+            <!-- Document Icon (File/Document) -->
+            <svg
+              v-else-if="feature.icon === 'document'"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+              />
+            </svg>
           </div>
           <h2 class="card-title">{{ feature.title }}</h2>
         </div>
@@ -419,6 +443,11 @@ h1 {
   box-shadow: 0 8px 20px -6px rgba(139, 92, 246, 0.5);
 }
 
+.card-8 .icon-wrapper {
+  background: linear-gradient(135deg, #10b981, #059669);
+  box-shadow: 0 8px 20px -6px rgba(16, 185, 129, 0.5);
+}
+
 .card-title {
   font-size: 1.5rem;
   font-weight: 600;
diff --git a/src/views/QuestionGenerator.vue b/src/views/QuestionGenerator.vue
new file mode 100644
index 0000000..b8c72ff
--- /dev/null
+++ b/src/views/QuestionGenerator.vue
@@ -0,0 +1,1285 @@
+<script setup>
+import { ref, computed, onUnmounted } from "vue";
+import { useRouter } from "vue-router";
+import axios from "axios";
+
+import {
+  GRS_API_KEY,
+  QUESTION_API_URL,
+  QUESTION_MODEL,
+  QUESTION_TEMPERATURE,
+  QUESTION_MAX_TOKENS,
+  QUESTION_GENERATOR_PROMPT,
+} from "@/config/index.js";
+
+const router = useRouter();
+
+const API_KEY = GRS_API_KEY;
+const API_URL = QUESTION_API_URL;
+
+// ── 状态 ──
+const status = ref("idle"); // 'idle' | 'generating' | 'done' | 'error'
+const errorMsg = ref("");
+const rawContent = ref("");
+const cancelTokenSource = ref(null);
+
+// ── 参数配置 ──
+const questionType = ref("choice"); // 'choice' | 'fillBlank' | 'translation' | 'reading'
+const difficulty = ref("medium"); // 'easy' | 'medium' | 'hard'
+const questionCount = ref(5);
+const topicInput = ref("");
+
+// ── 配置选项 ──
+const TYPE_OPTIONS = [
+  { value: "choice", label: "选择题", desc: "单项选择题" },
+  { value: "fillBlank", label: "填空题", desc: "根据语境填空" },
+  { value: "translation", label: "翻译题", desc: "英汉互译" },
+  { value: "reading", label: "阅读理解", desc: "阅读文章并回答问题" },
+];
+
+const DIFFICULTY_OPTIONS = [
+  { value: "easy", label: "简单", color: "#10b981" },
+  { value: "medium", label: "中等", color: "#f59e0b" },
+  { value: "hard", label: "困难", color: "#ef4444" },
+];
+
+// ── 解析试题内容 ──
+const parsedQuestions = computed(() => {
+  const raw = rawContent.value;
+  if (!raw) return [];
+
+  const questions = [];
+  const questionBlocks = raw.split(/##\s*题目\s*\d+/i);
+
+  questionBlocks.forEach((block, index) => {
+    if (index === 0) return; // 跳过第一个空块
+
+    const question = {
+      id: index,
+      type: extractField(block, "题目类型"),
+      difficulty: extractField(block, "难度等级"),
+      content: extractField(block, "题目内容"),
+      options: extractOptions(block),
+      answer: extractField(block, "正确答案"),
+      explanation: extractField(block, "解析"),
+      knowledgePoint: extractField(block, "知识点"),
+    };
+
+    if (question.content) {
+      questions.push(question);
+    }
+  });
+
+  return questions;
+});
+
+function extractField(text, fieldName) {
+  const regex = new RegExp(`\\*\\*${fieldName}\\*\\*[：:]\\s*([\\s\\S]*?)(?=\\*\\*|$)`, "i");
+  const match = text.match(regex);
+  if (!match) return "";
+
+  let content = match[1].trim();
+  // 清理可能混入的下一个字段
+  content = content.split(/\*\*/)[0].trim();
+  return content;
+}
+
+function extractOptions(text) {
+  const options = [];
+  
+  // 先尝试提取"选项"字段的内容块
+  const optionsBlockMatch = text.match(/\*\*选项\*\*[：:]\s*([\s\S]*?)(?=\*\*正确答案\*\*|$)/i);
+  
+  if (optionsBlockMatch) {
+    const optionsBlock = optionsBlockMatch[1];
+    
+    // 在选项块中提取各个选项
+    const lines = optionsBlock.split('\n');
+    for (const line of lines) {
+      const match = line.match(/^([A-D])[\.．。:：]\s*(.+)$/i);
+      if (match) {
+        options.push({
+          label: match[1].toUpperCase(),
+          content: match[2].trim(),
+        });
+      }
+    }
+  }
+  
+  return options;
+}
+
+// ── 构建请求体 ──
+const buildRequestBody = () => {
+  const typeLabel = TYPE_OPTIONS.find((t) => t.value === questionType.value)?.label || "选择题";
+  const difficultyLabel =
+    DIFFICULTY_OPTIONS.find((d) => d.value === difficulty.value)?.label || "中等";
+
+  const userPrompt = `请生成 ${questionCount.value} 道${difficultyLabel}难度的英语${typeLabel}${
+    topicInput.value ? `，主题为：${topicInput.value}` : ""
+  }。
+
+要求：
+1. 题目类型：${typeLabel}
+2. 难度等级：${difficultyLabel}
+3. 题目数量：${questionCount.value} 道
+${topicInput.value ? `4. 主题/知识点：${topicInput.value}` : ""}
+
+请严格按照指定的输出格式生成试题。`;
+
+  return {
+    model: QUESTION_MODEL,
+    messages: [
+      { role: "system", content: QUESTION_GENERATOR_PROMPT },
+      { role: "user", content: userPrompt },
+    ],
+    temperature: QUESTION_TEMPERATURE,
+    max_tokens: QUESTION_MAX_TOKENS,
+    stream: true,
+  };
+};
+
+// ── 提取 SSE delta 文本 ──
+const extractTextDelta = (chunk) => {
+  let result = "";
+  const lines = chunk.split("\n");
+  for (const line of lines) {
+    if (!line.startsWith("data: ")) continue;
+    const jsonStr = line.slice(6).trim();
+    if (!jsonStr || jsonStr === "[DONE]") continue;
+    try {
+      const data = JSON.parse(jsonStr);
+      const text = data?.choices?.[0]?.delta?.content;
+      if (text) result += text;
+    } catch {
+      // 忽略解析失败的行
+    }
+  }
+  return result;
+};
+
+// ── 过滤 HexString思考块 ──
+const filterThinkBlocks = (text) => {
+  let filtered = text.replace(/HexString[\s\S]*?<\/think>/g, "");
+  filtered = filtered.replace(/HexString[\s\S]*$/, "");
+  return filtered;
+};
+
+// ── 开始生成 ──
+const canGenerate = computed(() => {
+  return status.value !== "generating" && questionCount.value >= 1 && questionCount.value <= 20;
+});
+
+const startGeneration = async () => {
+  if (!canGenerate.value) return;
+
+  status.value = "generating";
+  errorMsg.value = "";
+  rawContent.value = "";
+
+  cancelTokenSource.value = axios.CancelToken.source();
+  let lastLength = 0;
+
+  await axios
+    .post(API_URL, buildRequestBody(), {
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${API_KEY}`,
+      },
+      responseType: "text",
+      cancelToken: cancelTokenSource.value.token,
+      onDownloadProgress: (event) => {
+        const text = (event.target || event.event?.target)?.responseText || "";
+        if (!text) return;
+        const newChunk = text.slice(lastLength);
+        lastLength = text.length;
+        const delta = extractTextDelta(newChunk);
+        if (delta) {
+          rawContent.value = filterThinkBlocks(rawContent.value + delta);
+        }
+      },
+    })
+    .then(() => {
+      status.value = "done";
+    })
+    .catch((err) => {
+      if (axios.isCancel(err)) return;
+      console.error(err);
+      errorMsg.value =
+        err?.response?.data?.error?.message || err.message || "请求失败，请稍后重试";
+      status.value = "error";
+    });
+};
+
+const resetAll = () => {
+  status.value = "idle";
+  rawContent.value = "";
+  errorMsg.value = "";
+};
+
+const loadExample = () => {
+  questionType.value = "choice";
+  difficulty.value = "medium";
+  questionCount.value = 3;
+  topicInput.value = "一般现在时";
+};
+
+const goBack = () => router.back();
+
+onUnmounted(() => {
+  if (cancelTokenSource.value) {
+    cancelTokenSource.value.cancel("组件卸载，取消请求");
+  }
+});
+</script>
+
+<template>
+  <div class="page-container">
+    <!-- Nav Bar -->
+    <div class="nav-bar">
+      <button class="back-btn" @click="goBack">
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+        <span>返回</span>
+      </button>
+      <h1 class="nav-title">AI 试题生成</h1>
+      <div style="width: 72px"></div>
+    </div>
+
+    <!-- Error Banner -->
+    <div v-if="errorMsg" class="error-banner">
+      <span>{{ errorMsg }}</span>
+      <button class="error-close" @click="errorMsg = ''">✕</button>
+    </div>
+
+    <!-- Main Layout: Left + Right -->
+    <div class="main-layout">
+      <!-- Left Panel: Config -->
+      <div class="left-panel">
+        <div class="config-card">
+          <div class="config-header">
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="12" cy="12" r="3" />
+              <path
+                d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+              />
+            </svg>
+            <span>参数配置</span>
+          </div>
+
+          <div class="config-body">
+            <!-- 题目类型 -->
+            <div class="config-item">
+              <label class="config-label">题目类型</label>
+              <div class="type-grid">
+                <button
+                  v-for="opt in TYPE_OPTIONS"
+                  :key="opt.value"
+                  class="type-btn"
+                  :class="{ active: questionType === opt.value }"
+                  @click="questionType = opt.value"
+                  :disabled="status === 'generating'"
+                >
+                  <div class="type-label">{{ opt.label }}</div>
+                  <div class="type-desc">{{ opt.desc }}</div>
+                </button>
+              </div>
+            </div>
+
+            <!-- 难度等级 -->
+            <div class="config-item">
+              <label class="config-label">难度等级</label>
+              <div class="difficulty-group">
+                <button
+                  v-for="opt in DIFFICULTY_OPTIONS"
+                  :key="opt.value"
+                  class="difficulty-btn"
+                  :class="{ active: difficulty === opt.value }"
+                  :style="{ '--accent-color': opt.color }"
+                  @click="difficulty = opt.value"
+                  :disabled="status === 'generating'"
+                >
+                  {{ opt.label }}
+                </button>
+              </div>
+            </div>
+
+            <!-- 题目数量 -->
+            <div class="config-item">
+              <label class="config-label">
+                题目数量
+                <span class="count-value">{{ questionCount }} 道</span>
+              </label>
+              <input
+                type="range"
+                v-model.number="questionCount"
+                min="1"
+                max="20"
+                class="range-slider"
+                :disabled="status === 'generating'"
+              />
+              <div class="range-labels">
+                <span>1</span>
+                <span>10</span>
+                <span>20</span>
+              </div>
+            </div>
+
+            <!-- 知识点/主题 -->
+            <div class="config-item">
+              <label class="config-label">知识点/主题（可选）</label>
+              <input
+                type="text"
+                v-model="topicInput"
+                class="topic-input"
+                placeholder="例如：一般现在时、定语从句、商务英语..."
+                :disabled="status === 'generating'"
+              />
+            </div>
+
+            <!-- 示例按钮 -->
+            <button class="example-btn" @click="loadExample" :disabled="status === 'generating'">
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                <polyline points="14 2 14 8 20 8" />
+                <line x1="16" y1="13" x2="8" y2="13" />
+                <line x1="16" y1="17" x2="8" y2="17" />
+              </svg>
+              <span>加载示例</span>
+            </button>
+          </div>
+        </div>
+
+        <!-- Generate Button -->
+        <div class="btn-wrap">
+          <button
+            class="generate-btn"
+            :disabled="!canGenerate"
+            @click="startGeneration"
+          >
+            <span v-if="status === 'generating'" class="btn-spinner"></span>
+            <svg
+              v-else
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+            </svg>
+            <span>{{ status === "generating" ? "生成中..." : "开始生成" }}</span>
+          </button>
+          <button
+            v-if="status === 'done' || status === 'error'"
+            class="reset-btn"
+            @click="resetAll"
+          >
+            重新生成
+          </button>
+        </div>
+      </div>
+
+      <!-- Right Panel: Result -->
+      <div class="right-panel">
+        <!-- Empty State -->
+        <div v-if="status === 'idle'" class="empty-state">
+          <div class="empty-icon">
+            <svg
+              width="48"
+              height="48"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+            </svg>
+          </div>
+          <p class="empty-title">等待生成</p>
+          <p class="empty-hint">在左侧配置参数，点击「开始生成」创建试题</p>
+        </div>
+
+        <!-- Result Area -->
+        <div
+          v-else-if="status === 'generating' || status === 'done'"
+          class="result-area"
+        >
+          <div class="result-header">
+            <div class="result-title-wrap">
+              <div
+                class="result-dot"
+                :class="{ pulse: status === 'generating' }"
+              ></div>
+              <span class="result-title">{{
+                status === "generating" ? "AI 正在生成..." : "生成完成"
+              }}</span>
+            </div>
+            <span v-if="parsedQuestions.length > 0" class="question-count-badge">
+              已生成 {{ parsedQuestions.length }} 题
+            </span>
+          </div>
+
+          <div class="questions-list">
+            <div
+              v-for="(q, idx) in parsedQuestions"
+              :key="q.id"
+              class="question-card"
+              :style="{ animationDelay: `${idx * 0.1}s` }"
+            >
+              <div class="question-header">
+                <div class="question-number">题目 {{ q.id }}</div>
+                <div class="question-meta">
+                  <span class="meta-tag type-tag">{{ q.type }}</span>
+                  <span class="meta-tag difficulty-tag">{{ q.difficulty }}</span>
+                </div>
+              </div>
+
+              <div class="question-content">
+                <p class="content-text">{{ q.content }}</p>
+              </div>
+
+              <div v-if="q.options && q.options.length > 0" class="options-grid">
+                <div
+                  v-for="opt in q.options"
+                  :key="opt.label"
+                  class="option-item"
+                >
+                  <span class="option-label">{{ opt.label }}.</span>
+                  <span class="option-text">{{ opt.content }}</span>
+                </div>
+              </div>
+
+              <div class="answer-section">
+                <div class="answer-row">
+                  <span class="answer-label">正确答案：</span>
+                  <span class="answer-value">{{ q.answer }}</span>
+                </div>
+              </div>
+
+              <div class="explanation-section">
+                <div class="explanation-header">
+                  <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <circle cx="12" cy="12" r="10" />
+                    <line x1="12" y1="16" x2="12" y2="12" />
+                    <line x1="12" y1="8" x2="12.01" y2="8" />
+                  </svg>
+                  <span>解析</span>
+                </div>
+                <p class="explanation-text">{{ q.explanation }}</p>
+              </div>
+
+              <div class="knowledge-section">
+                <span class="knowledge-label">知识点：</span>
+                <span class="knowledge-value">{{ q.knowledgePoint }}</span>
+              </div>
+            </div>
+
+            <!-- 生成中的占位符 -->
+            <div v-if="status === 'generating'" class="loading-card">
+              <div class="loading-dots">
+                <span class="dot"></span>
+                <span class="dot"></span>
+                <span class="dot"></span>
+              </div>
+              <p class="loading-text">正在生成试题，请稍候...</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Error State -->
+        <div v-else-if="status === 'error'" class="empty-state error-state">
+          <div class="empty-icon error-icon">
+            <svg
+              width="48"
+              height="48"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <line x1="12" y1="8" x2="12" y2="12" />
+              <line x1="12" y1="16" x2="12.01" y2="16" />
+            </svg>
+          </div>
+          <p class="empty-title">生成失败</p>
+          <p class="empty-hint">请检查网络连接后重试</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page-container {
+  height: 100vh;
+  overflow: hidden;
+  background: var(--bg);
+  display: flex;
+  flex-direction: column;
+  font-family: "Inter", "PingFang SC", -apple-system, sans-serif;
+}
+
+/* Nav */
+.nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  background: rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid var(--card-border);
+  backdrop-filter: blur(12px);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+.back-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 0.95rem;
+  padding: 0.4rem 0.75rem;
+  border-radius: 8px;
+  transition: all 0.2s;
+}
+.back-btn:hover {
+  background: rgba(255, 255, 255, 0.07);
+  color: var(--text-primary);
+}
+.nav-title {
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin: 0;
+  background: linear-gradient(135deg, #10b981, #059669);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* Main Layout */
+.main-layout {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+/* Left Panel */
+.left-panel {
+  width: 380px;
+  min-width: 320px;
+  max-width: 440px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+  border-right: 1px solid var(--card-border);
+  overflow-y: auto;
+  flex-shrink: 0;
+}
+
+/* Right Panel */
+.right-panel {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.right-panel::-webkit-scrollbar {
+  width: 8px;
+}
+
+.right-panel::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  margin: 4px 0;
+}
+
+.right-panel::-webkit-scrollbar-thumb {
+  background: rgba(16, 185, 129, 0.3);
+  border-radius: 4px;
+  transition: background 0.2s;
+}
+
+.right-panel::-webkit-scrollbar-thumb:hover {
+  background: rgba(16, 185, 129, 0.5);
+}
+
+/* Empty State */
+.empty-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  color: var(--text-secondary);
+  opacity: 0.5;
+}
+.empty-icon {
+  color: var(--text-secondary);
+  opacity: 0.4;
+}
+.empty-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--text-primary);
+}
+.empty-hint {
+  font-size: 0.875rem;
+  margin: 0;
+  text-align: center;
+}
+.error-state {
+  opacity: 1;
+}
+.error-icon {
+  color: #f87171;
+  opacity: 1;
+}
+.error-state .empty-title {
+  color: #fca5a5;
+}
+
+/* Error Banner */
+.error-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: rgba(239, 68, 68, 0.12);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-bottom: 1px solid rgba(239, 68, 68, 0.3);
+  padding: 0.75rem 1.5rem;
+  color: #fca5a5;
+  font-size: 0.9rem;
+  animation: fadeInUp 0.2s ease;
+  flex-shrink: 0;
+}
+.error-close {
+  background: none;
+  border: none;
+  color: #fca5a5;
+  cursor: pointer;
+  font-size: 1rem;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+.error-close:hover {
+  opacity: 1;
+}
+
+/* Config Card */
+.config-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--card-border);
+  border-radius: 20px;
+  overflow: hidden;
+  backdrop-filter: blur(12px);
+}
+
+.config-header {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 1.25rem;
+  border-bottom: 1px solid var(--card-border);
+  color: #10b981;
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.config-body {
+  padding: 1.5rem;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.config-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.config-label {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.count-value {
+  font-size: 0.85rem;
+  color: #10b981;
+  font-weight: 600;
+}
+
+/* Type Selection */
+.type-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+
+.type-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 1rem;
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.type-btn:hover:not(:disabled) {
+  background: rgba(16, 185, 129, 0.06);
+  border-color: rgba(16, 185, 129, 0.3);
+}
+.type-btn.active {
+  background: rgba(16, 185, 129, 0.12);
+  border-color: #10b981;
+}
+.type-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.type-label {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.type-desc {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+.type-btn.active .type-label {
+  color: #10b981;
+}
+
+/* Difficulty Selection */
+.difficulty-group {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.difficulty-btn {
+  flex: 1;
+  padding: 0.75rem;
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  transition: all 0.2s;
+}
+.difficulty-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: var(--accent-color);
+}
+.difficulty-btn.active {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: var(--accent-color);
+  color: var(--accent-color);
+}
+.difficulty-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Range Slider */
+.range-slider {
+  width: 100%;
+  height: 6px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+  outline: none;
+  cursor: pointer;
+  -webkit-appearance: none;
+}
+.range-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  background: #10b981;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+.range-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+}
+.range-slider:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.range-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  opacity: 0.6;
+}
+
+/* Topic Input */
+.topic-input {
+  width: 100%;
+  padding: 0.875rem 1rem;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  color: var(--text-primary);
+  font-size: 0.9rem;
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  box-sizing: border-box;
+}
+.topic-input::placeholder {
+  color: var(--text-secondary);
+  opacity: 0.5;
+}
+.topic-input:focus {
+  border-color: rgba(16, 185, 129, 0.5);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+}
+.topic-input:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Example Button */
+.example-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.25);
+  border-radius: 10px;
+  color: #10b981;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.example-btn:hover:not(:disabled) {
+  background: rgba(16, 185, 129, 0.2);
+  transform: translateY(-1px);
+}
+.example-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Generate Button */
+.btn-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+.generate-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  background: linear-gradient(135deg, #10b981, #059669);
+  border: none;
+  color: white;
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 0.875rem 2.5rem;
+  border-radius: 50px;
+  cursor: pointer;
+  transition: all 0.25s;
+  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.35);
+}
+.generate-btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 28px rgba(16, 185, 129, 0.5);
+}
+.generate-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none;
+}
+.reset-btn {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  padding: 0.875rem 1.5rem;
+  border-radius: 50px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.reset-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+}
+.btn-spinner {
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgba(255, 255, 255, 0.35);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+/* Result Area */
+.result-area {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.result-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.result-title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+.result-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #10b981;
+}
+.result-dot.pulse {
+  animation: pulse 1.2s ease-in-out infinite;
+}
+.result-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.question-count-badge {
+  background: rgba(16, 185, 129, 0.15);
+  color: #10b981;
+  padding: 0.4rem 1rem;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+/* Questions List */
+.questions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.question-card {
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid var(--card-border);
+  border-radius: 16px;
+  overflow: hidden;
+  animation: fadeInUp 0.4s ease both;
+}
+
+.question-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  background: rgba(16, 185, 129, 0.04);
+  border-bottom: 1px solid var(--card-border);
+}
+
+.question-number {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #10b981;
+}
+
+.question-meta {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.meta-tag {
+  padding: 0.25rem 0.75rem;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.type-tag {
+  background: rgba(16, 185, 129, 0.15);
+  color: #10b981;
+}
+
+.difficulty-tag {
+  background: rgba(245, 158, 11, 0.15);
+  color: #f59e0b;
+}
+
+.question-content {
+  padding: 1.25rem;
+}
+
+.content-text {
+  font-size: 0.95rem;
+  line-height: 1.7;
+  color: var(--text-primary);
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+.options-grid {
+  padding: 0 1.25rem 1.25rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+
+.option-item {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 10px;
+}
+
+.option-label {
+  font-weight: 600;
+  color: #10b981;
+  flex-shrink: 0;
+}
+
+.option-text {
+  color: var(--text-primary);
+  font-size: 0.9rem;
+}
+
+.answer-section {
+  padding: 1rem 1.25rem;
+  background: rgba(16, 185, 129, 0.06);
+  border-top: 1px solid var(--card-border);
+  border-bottom: 1px solid var(--card-border);
+}
+
+.answer-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.answer-label {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.answer-value {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #10b981;
+}
+
+.explanation-section {
+  padding: 1.25rem;
+}
+
+.explanation-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #10b981;
+  font-weight: 600;
+  font-size: 0.9rem;
+  margin-bottom: 0.75rem;
+}
+
+.explanation-text {
+  font-size: 0.9rem;
+  line-height: 1.7;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+.knowledge-section {
+  padding: 0.875rem 1.25rem;
+  background: rgba(255, 255, 255, 0.02);
+  border-top: 1px solid var(--card-border);
+}
+
+.knowledge-label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.knowledge-value {
+  font-size: 0.85rem;
+  color: var(--text-primary);
+}
+
+/* Loading Card */
+.loading-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px dashed rgba(16, 185, 129, 0.3);
+  border-radius: 16px;
+}
+
+.loading-dots {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 1rem;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(16, 185, 129, 0.4);
+  animation: bounce 1.2s ease-in-out infinite;
+}
+
+.dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+.loading-text {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+/* Animations */
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scale(0.75);
+  }
+}
+@keyframes bounce {
+  0%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-6px);
+  }
+}
+
+@media (max-width: 768px) {
+  .main-layout {
+    flex-direction: column;
+    height: auto;
+    overflow: visible;
+  }
+  .left-panel {
+    width: 100%;
+    max-width: 100%;
+    border-right: none;
+    border-bottom: 1px solid var(--card-border);
+    overflow-y: visible;
+  }
+  .right-panel {
+    padding: 1.25rem 1rem;
+  }
+  .type-grid {
+    grid-template-columns: 1fr;
+  }
+  .options-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>