Index: chapterx-frontend/src/pages/writer/CreateStoryPage.tsx
===================================================================
--- chapterx-frontend/src/pages/writer/CreateStoryPage.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
+++ chapterx-frontend/src/pages/writer/CreateStoryPage.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
@@ -0,0 +1,190 @@
+import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Feather, ArrowLeft, X } from 'lucide-react'
+import { useAuthStore } from '../../store/authStore'
+import { useStoryStore } from '../../store/storyStore'
+import { useUIStore } from '../../store/uiStore'
+import { Button } from '../../components/ui/Button'
+import { Story } from '../../types'
+
+const ALL_GENRES = ['Fantasy', 'Sci-Fi', 'Romance', 'Historical Fiction', 'Adventure', 'Thriller', 'Mystery', 'Horror', 'Contemporary', 'Poetry']
+
+export const CreateStoryPage: React.FC = () => {
+  const navigate = useNavigate()
+  const { currentUser } = useAuthStore()
+  const { addStory } = useStoryStore()
+  const { addToast } = useUIStore()
+  const [form, setForm] = useState({
+    title: '',
+    short_description: '',
+    content: '',
+    genres: [] as string[],
+    mature_content: false,
+  })
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [loading, setLoading] = useState(false)
+
+  const validate = () => {
+    const e: Record<string, string> = {}
+    if (!form.title.trim()) e.title = 'Title is required'
+    if (!form.short_description.trim()) e.short_description = 'Description is required'
+    if (form.short_description.length > 280) e.short_description = 'Max 280 characters'
+    if (!form.content.trim()) e.content = 'Story content is required'
+    if (form.genres.length === 0) e.genres = 'Select at least one genre'
+    setErrors(e)
+    return Object.keys(e).length === 0
+  }
+
+  const handleSubmit = async (status: 'draft' | 'published') => {
+    if (!validate() || !currentUser) return
+    setLoading(true)
+    await new Promise(r => setTimeout(r, 500))
+    const story: Story = {
+      story_id: Date.now(),
+      ...form,
+      user_id: currentUser.user_id,
+      author_username: currentUser.username,
+      status,
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+      total_likes: 0,
+      total_comments: 0,
+      total_chapters: 0,
+      total_views: 0,
+    }
+    addStory(story)
+    addToast(status === 'published' ? 'Story published!' : 'Draft saved!')
+    navigate(`/writer/edit-story/${story.story_id}`)
+    setLoading(false)
+  }
+
+  const toggleGenre = (g: string) => {
+    setForm(f => ({
+      ...f,
+      genres: f.genres.includes(g) ? f.genres.filter(x => x !== g) : [...f.genres, g],
+    }))
+    setErrors(e => ({ ...e, genres: '' }))
+  }
+
+  const setField = (field: string, value: string | boolean) => {
+    setForm(f => ({ ...f, [field]: value }))
+    setErrors(e => ({ ...e, [field]: '' }))
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto px-4 py-8">
+      <div className="flex items-center gap-3 mb-8">
+        <button onClick={() => navigate('/writer')} className="text-slate-400 hover:text-white transition-colors">
+          <ArrowLeft size={20} />
+        </button>
+        <div>
+          <h1 className="font-serif text-2xl font-bold text-white">Create New Story</h1>
+          <p className="text-slate-400 text-sm mt-0.5">Tell your story to the world</p>
+        </div>
+      </div>
+
+      <div className="space-y-6">
+        {/* Title */}
+        <div>
+          <label className="block text-sm font-medium text-slate-300 mb-1.5">Story Title *</label>
+          <input
+            value={form.title}
+            onChange={e => setField('title', e.target.value)}
+            placeholder="The Chronicles of Eldoria..."
+            className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-lg font-serif ${errors.title ? 'border-rose-500' : 'border-slate-700'}`}
+          />
+          {errors.title && <p className="text-rose-400 text-xs mt-1">{errors.title}</p>}
+        </div>
+
+        {/* Short description */}
+        <div>
+          <label className="block text-sm font-medium text-slate-300 mb-1.5">Short Description * <span className="text-slate-500 font-normal">(shown on story cards)</span></label>
+          <textarea
+            value={form.short_description}
+            onChange={e => setField('short_description', e.target.value)}
+            placeholder="When the last dragon awakens..."
+            rows={3}
+            maxLength={280}
+            className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 resize-none ${errors.short_description ? 'border-rose-500' : 'border-slate-700'}`}
+          />
+          <div className="flex justify-between items-center mt-1">
+            {errors.short_description ? <p className="text-rose-400 text-xs">{errors.short_description}</p> : <span />}
+            <span className="text-slate-600 text-xs">{form.short_description.length}/280</span>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div>
+          <label className="block text-sm font-medium text-slate-300 mb-1.5">Story Content *</label>
+          <textarea
+            value={form.content}
+            onChange={e => setField('content', e.target.value)}
+            placeholder="Begin your story here. This is the introduction that readers will see..."
+            rows={8}
+            className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 resize-y font-serif ${errors.content ? 'border-rose-500' : 'border-slate-700'}`}
+          />
+          {errors.content && <p className="text-rose-400 text-xs mt-1">{errors.content}</p>}
+        </div>
+
+        {/* Genres */}
+        <div>
+          <label className="block text-sm font-medium text-slate-300 mb-2">Genres * <span className="text-slate-500 font-normal">(select 1-3)</span></label>
+          <div className="flex flex-wrap gap-2 mb-2">
+            {ALL_GENRES.map(g => (
+              <button
+                key={g}
+                type="button"
+                onClick={() => toggleGenre(g)}
+                className={`px-3 py-1.5 rounded-full text-sm border transition-all ${
+                  form.genres.includes(g)
+                    ? 'bg-indigo-500/30 text-indigo-300 border-indigo-500/50'
+                    : 'bg-slate-800 text-slate-400 border-slate-700 hover:border-slate-500'
+                }`}
+              >
+                {form.genres.includes(g) && <span className="mr-1">✓</span>}
+                {g}
+              </button>
+            ))}
+          </div>
+          {form.genres.length > 0 && (
+            <div className="flex flex-wrap gap-1 mt-1">
+              {form.genres.map(g => (
+                <span key={g} className="flex items-center gap-1 text-xs px-2 py-0.5 bg-indigo-500/20 text-indigo-300 rounded-full">
+                  {g}
+                  <button onClick={() => toggleGenre(g)}><X size={10} /></button>
+                </span>
+              ))}
+            </div>
+          )}
+          {errors.genres && <p className="text-rose-400 text-xs mt-1">{errors.genres}</p>}
+        </div>
+
+        {/* Mature content */}
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            onClick={() => setField('mature_content', !form.mature_content)}
+            className={`w-11 h-6 rounded-full transition-colors ${form.mature_content ? 'bg-rose-500' : 'bg-slate-600'} relative flex-shrink-0`}
+          >
+            <div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${form.mature_content ? 'translate-x-6' : 'translate-x-1'}`} />
+          </button>
+          <div>
+            <p className="text-white text-sm font-medium">Mature Content (18+)</p>
+            <p className="text-slate-500 text-xs">Enable for stories with adult themes</p>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex gap-3 pt-4 border-t border-slate-700">
+          <Button variant="secondary" className="flex-1" onClick={() => handleSubmit('draft')} loading={loading}>
+            Save as Draft
+          </Button>
+          <Button className="flex-1" onClick={() => handleSubmit('published')} loading={loading}>
+            <Feather size={16} />
+            Publish Story
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}