feat(frontend): redesign product demo workspace

Add a polished responsive dashboard, light/dark mode, multilingual UI, richer profile controls, clip count selection, improved clip cards, and a full clip editor view.

frontend/src/App.jsx

@@ -1,53 +1,418 @@
 import {
+  ArrowLeft,
+  Captions,
   Check,
+  Clock3,
   Download,
   Film,
+  Gauge,
+  Languages,
   Link as LinkIcon,
   Loader2,
+  Moon,
+  PanelRightOpen,
   RefreshCcw,
   Scissors,
+  SlidersHorizontal,
+  Sparkles,
+  Sun,
   Trash2,
   Upload,
+  Wand2,
 } from "lucide-react";
 import React, { useEffect, useMemo, useState } from "react";
 
 const API_BASE = import.meta.env.VITE_API_BASE_URL || "http://localhost:8000";
 
+const LANGUAGES = [
+  { code: "en", label: "EN", name: "English" },
+  { code: "th", label: "TH", name: "ไทย" },
+  { code: "ja", label: "JP", name: "日本語" },
+  { code: "zh", label: "ZH", name: "中文" },
+  { code: "ko", label: "KO", name: "한국어" },
+];
+
+const NICHES = [
+  "education",
+  "gaming",
+  "podcast",
+  "commentary",
+  "cars",
+  "beauty",
+  "fitness",
+  "finance",
+  "tech",
+  "lifestyle",
+  "music",
+  "other",
+];
+
+const CLIP_STYLES = ["informative", "funny", "dramatic", "educational", "commentary"];
+const LANGUAGE_OPTIONS = ["Thai", "English", "Japanese", "Chinese", "Korean", "Auto"];
+const PLATFORM_OPTIONS = ["tiktok", "youtube_shorts", "instagram_reels"];
+
 const defaultProfile = {
   niche: "education",
+  niche_custom: "",
+  channel_description: "",
   clip_style: "informative",
   clip_length_seconds: 60,
+  clip_count: 5,
   primary_language: "Thai",
   target_platform: "tiktok",
 };
 
+const en = {
+  appSubtitle: "Creator clipping workspace for AMD ROCm demos",
+  idle: "Idle",
+  queued: "Queued",
+  running: "Running",
+  completed: "Completed",
+  failed: "Failed",
+  demoMode: "Demo mode",
+  productionMode: "Production mode",
+  theme: "Theme",
+  language: "Language",
+  startPipeline: "Start pipeline",
+  channelProfile: "Channel profile",
+  channelProfileText: "Tell the AI what kind of creator you are before it scores highlights.",
+  videoInput: "Video input",
+  niche: "Niche",
+  nicheHelp: "Choose the closest category. Pick Other if your channel is more specific.",
+  customNiche: "Custom niche",
+  customNichePlaceholder: "Example: Thai AI tutorials for beginners",
+  channelDescription: "Channel description",
+  channelDescriptionHelp: "Write naturally. The AI will use this to judge what feels on-brand.",
+  channelDescriptionPlaceholder:
+    "Example: I explain AI tools in Thai with simple examples and a little humor.",
+  clipStyle: "Clip style",
+  clipLength: "Clip length (seconds)",
+  clipCount: "Number of clips",
+  clipCountHelp: "How many clip candidates should the AI generate from this video.",
+  primaryLanguage: "Primary language",
+  platform: "Platform",
+  youtube: "YouTube",
+  upload: "Upload",
+  youtubeUrl: "YouTube URL",
+  youtubePlaceholder: "https://www.youtube.com/watch?v=...",
+  videoFile: "Video file",
+  pipeline: "Pipeline",
+  ready: "Ready",
+  progressNote: "Progress is updated by backend steps. Rendering shows clip-by-clip status.",
+  currentStep: "Current step",
+  timing: "Timing",
+  transcript: "Transcript",
+  transcriptEmpty: "Transcript will appear after transcription finishes.",
+  clips: "Clips",
+  noClips: "No clips yet",
+  noClipsText: "Start the pipeline to generate profile-aware clip candidates.",
+  readyClips: "ready",
+  score: "Score",
+  reason: "Reason",
+  duration: "Duration",
+  start: "Start",
+  end: "End",
+  subtitles: "Subtitles",
+  openEditor: "Open editor",
+  approve: "Approve",
+  approved: "Approved",
+  regenerate: "Regenerate",
+  delete: "Delete",
+  download: "Download",
+  backToDashboard: "Back to dashboard",
+  editor: "Clip editor",
+  editorText: "Fine-tune timing, subtitles, and final approval for this clip.",
+  preview: "Preview",
+  clipRange: "Clip range",
+  subtitleCues: "Subtitle cues",
+  subtitleCueHelp: "Short cues read better on TikTok, Reels, and Shorts.",
+  inspector: "Inspector",
+  title: "Title",
+  status: "Status",
+  notApproved: "Not approved",
+  model: "Model",
+  source: "Source",
+  settings: "Settings",
+  stepInput: "Input",
+  stepTranscription: "Transcription",
+  stepHighlights: "Highlights",
+  stepVisual: "Visual check",
+  stepRender: "Render",
+  stepFinal: "Finalize",
+  renderProgress: "Rendering clip {{current}}/{{total}}",
+  appCta: "Generate clips",
+  niche_education: "Education",
+  niche_gaming: "Gaming",
+  niche_podcast: "Podcast",
+  niche_commentary: "Commentary",
+  niche_cars: "Cars",
+  niche_beauty: "Beauty",
+  niche_fitness: "Fitness",
+  niche_finance: "Finance",
+  niche_tech: "Tech",
+  niche_lifestyle: "Lifestyle",
+  niche_music: "Music",
+  niche_other: "Other",
+  style_informative: "Informative",
+  style_funny: "Funny",
+  style_dramatic: "Dramatic",
+  style_educational: "Educational",
+  style_commentary: "Commentary",
+  platform_tiktok: "TikTok",
+  platform_youtube_shorts: "YouTube Shorts",
+  platform_instagram_reels: "Instagram Reels",
+};
+
+const translations = {
+  en,
+  th: {
+    ...en,
+    appSubtitle: "พื้นที่ทำคลิปสั้นสำหรับเดโม AMD ROCm",
+    idle: "ว่าง",
+    queued: "รอคิว",
+    running: "กำลังทำงาน",
+    completed: "เสร็จแล้ว",
+    failed: "ล้มเหลว",
+    demoMode: "โหมดเดโม",
+    productionMode: "โหมดจริง",
+    theme: "ธีม",
+    language: "ภาษา",
+    startPipeline: "เริ่มประมวลผล",
+    channelProfile: "โปรไฟล์ช่อง",
+    channelProfileText: "บอก AI ว่าช่องของคุณเป็นแนวไหน ก่อนให้มันเลือกไฮไลต์",
+    videoInput: "วิดีโอ",
+    niche: "หมวดช่อง",
+    nicheHelp: "เลือกหมวดที่ใกล้ที่สุด ถ้าเฉพาะทางมากให้เลือกอื่น ๆ",
+    customNiche: "หมวดช่องของคุณ",
+    customNichePlaceholder: "เช่น สอน AI ภาษาไทยสำหรับมือใหม่",
+    channelDescription: "อธิบายช่อง",
+    channelDescriptionHelp: "เขียนเป็นภาษาพูดได้เลย AI จะใช้ดูว่าอะไรเข้ากับแบรนด์ช่อง",
+    channelDescriptionPlaceholder: "เช่น ช่องผมสอนใช้ AI แบบง่าย ๆ มีมุกนิดหน่อย",
+    clipStyle: "สไตล์คลิป",
+    clipLength: "ความยาวคลิป (วินาที)",
+    clipCount: "จำนวนคลิป",
+    clipCountHelp: "จำนวนคลิปที่อยากให้ AI สร้างจากวิดีโอนี้",
+    primaryLanguage: "ภาษาหลัก",
+    platform: "แพลตฟอร์ม",
+    youtubeUrl: "ลิงก์ YouTube",
+    videoFile: "ไฟล์วิดีโอ",
+    pipeline: "ขั้นตอนประมวลผล",
+    ready: "พร้อม",
+    progressNote: "แถบนี้อัปเดตตามขั้นตอน backend และตอน render จะแสดงทีละคลิป",
+    currentStep: "ขั้นตอนปัจจุบัน",
+    timing: "เวลา",
+    transcript: "ถอดเสียง",
+    transcriptEmpty: "ข้อความถอดเสียงจะแสดงหลังประมวลผลเสร็จ",
+    clips: "คลิป",
+    noClips: "ยังไม่มีคลิป",
+    noClipsText: "เริ่ม pipeline เพื่อให้ AI สร้างคลิปตามโปรไฟล์ช่อง",
+    readyClips: "พร้อม",
+    score: "คะแนน",
+    reason: "เหตุผล",
+    duration: "ความยาว",
+    start: "เริ่ม",
+    end: "จบ",
+    subtitles: "ซับไตเติล",
+    openEditor: "เปิดตัวแก้ไข",
+    approve: "อนุมัติ",
+    approved: "อนุมัติแล้ว",
+    regenerate: "สร้างใหม่",
+    delete: "ลบ",
+    download: "ดาวน์โหลด",
+    backToDashboard: "กลับหน้า dashboard",
+    editor: "ตัวแก้ไขคลิป",
+    editorText: "ปรับเวลา ซับไตเติล และอนุมัติคลิปสุดท้าย",
+    preview: "พรีวิว",
+    clipRange: "ช่วงคลิป",
+    subtitleCues: "จังหวะซับ",
+    subtitleCueHelp: "ซับสั้น ๆ อ่านง่ายกว่าสำหรับ TikTok, Reels และ Shorts",
+    inspector: "รายละเอียด",
+    title: "ชื่อคลิป",
+    status: "สถานะ",
+    notApproved: "ยังไม่อนุมัติ",
+    model: "โมเดล",
+    source: "แหล่งที่มา",
+    settings: "ตั้งค่า",
+    stepInput: "รับวิดีโอ",
+    stepTranscription: "ถอดเสียง",
+    stepHighlights: "หาไฮไลต์",
+    stepVisual: "ตรวจภาพ",
+    stepRender: "เรนเดอร์",
+    stepFinal: "สรุปผล",
+    appCta: "สร้างคลิป",
+    niche_education: "การศึกษา",
+    niche_gaming: "เกม",
+    niche_podcast: "พอดแคสต์",
+    niche_commentary: "คอมเมนต์/วิเคราะห์",
+    niche_cars: "รถยนต์",
+    niche_beauty: "ความงาม",
+    niche_fitness: "ฟิตเนส",
+    niche_finance: "การเงิน",
+    niche_tech: "เทคโนโลยี",
+    niche_lifestyle: "ไลฟ์สไตล์",
+    niche_music: "ดนตรี",
+    niche_other: "อื่น ๆ",
+    style_informative: "ให้ข้อมูล",
+    style_funny: "ตลก",
+    style_dramatic: "ดราม่า",
+    style_educational: "สอน/ให้ความรู้",
+    style_commentary: "วิเคร��ะห์",
+    platform_youtube_shorts: "YouTube Shorts",
+    platform_instagram_reels: "Instagram Reels",
+  },
+  ja: {
+    ...en,
+    appSubtitle: "AMD ROCm デモ向けクリエイター用クリップ制作ワークスペース",
+    channelProfile: "チャンネル設定",
+    videoInput: "動画入力",
+    niche: "ジャンル",
+    customNiche: "カスタムジャンル",
+    channelDescription: "チャンネル説明",
+    clipStyle: "クリップスタイル",
+    clipLength: "クリップ長（秒）",
+    clipCount: "クリップ数",
+    primaryLanguage: "主な言語",
+    platform: "プラットフォーム",
+    startPipeline: "パイプライン開始",
+    pipeline: "パイプライン",
+    transcript: "文字起こし",
+    clips: "クリップ",
+    noClips: "まだクリップがありません",
+    openEditor: "エディターを開く",
+    editor: "クリップエディター",
+    subtitles: "字幕",
+    subtitleCues: "字幕キュー",
+    approve: "承認",
+    approved: "承認済み",
+    regenerate: "再生成",
+    delete: "削除",
+    download: "ダウンロード",
+    backToDashboard: "ダッシュボードへ戻る",
+  },
+  zh: {
+    ...en,
+    appSubtitle: "面向 AMD ROCm 演示的创作者剪辑工作台",
+    channelProfile: "频道资料",
+    videoInput: "视频输入",
+    niche: "频道领域",
+    customNiche: "自定义领域",
+    channelDescription: "频道描述",
+    clipStyle: "剪辑风格",
+    clipLength: "剪辑长度（秒）",
+    clipCount: "剪辑数量",
+    primaryLanguage: "主要语言",
+    platform: "平台",
+    startPipeline: "开始处理",
+    pipeline: "处理流程",
+    transcript: "转录文本",
+    clips: "剪辑",
+    noClips: "还没有剪辑",
+    openEditor: "打开编辑器",
+    editor: "剪辑编辑器",
+    subtitles: "字幕",
+    subtitleCues: "字幕片段",
+    approve: "批准",
+    approved: "已批准",
+    regenerate: "重新生成",
+    delete: "删除",
+    download: "下载",
+    backToDashboard: "返回仪表盘",
+  },
+  ko: {
+    ...en,
+    appSubtitle: "AMD ROCm 데모를 위한 크리에이터 클립 작업 공간",
+    channelProfile: "채널 프로필",
+    videoInput: "비디오 입력",
+    niche: "채널 분야",
+    customNiche: "사용자 분야",
+    channelDescription: "채널 설명",
+    clipStyle: "클립 스타일",
+    clipLength: "클립 길이(초)",
+    clipCount: "클립 개수",
+    primaryLanguage: "기본 언어",
+    platform: "플랫폼",
+    startPipeline: "파이프라인 시작",
+    pipeline: "파이프라인",
+    transcript: "전사",
+    clips: "클립",
+    noClips: "아직 클립이 없습니다",
+    openEditor: "편집기 열기",
+    editor: "클립 편집기",
+    subtitles: "자막",
+    subtitleCues: "자막 큐",
+    approve: "승인",
+    approved: "승인됨",
+    regenerate: "다시 생성",
+    delete: "삭제",
+    download: "다운로드",
+    backToDashboard: "대시보드로 돌아가기",
+  },
+};
+
 function App() {
   const [profile, setProfile] = useState(defaultProfile);
   const [sourceMode, setSourceMode] = useState("youtube");
   const [youtubeUrl, setYoutubeUrl] = useState("");
   const [file, setFile] = useState(null);
   const [job, setJob] = useState(null);
+  const [health, setHealth] = useState(null);
   const [error, setError] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [editorClipId, setEditorClipId] = useState(null);
+  const [language, setLanguage] = useState(() => localStorage.getItem("elevenclip.language") || "en");
+  const [theme, setTheme] = useState(() => {
+    const saved = localStorage.getItem("elevenclip.theme");
+    if (saved) return saved;
+    return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  });
+
+  const t = (key, params) => {
+    let value = translations[language]?.[key] ?? translations.en[key] ?? key;
+    if (params) {
+      Object.entries(params).forEach(([name, replacement]) => {
+        value = value.replaceAll(`{{${name}}}`, String(replacement));
+      });
+    }
+    return value;
+  };
 
   const activeClips = useMemo(
     () => (job?.clips || []).filter((clip) => !clip.deleted),
     [job?.clips]
   );
+  const editorClip = activeClips.find((clip) => clip.id === editorClipId);
+
+  useEffect(() => {
+    document.documentElement.dataset.theme = theme;
+    localStorage.setItem("elevenclip.theme", theme);
+  }, [theme]);
+
+  useEffect(() => {
+    localStorage.setItem("elevenclip.language", language);
+  }, [language]);
+
+  useEffect(() => {
+    fetchJson("/health").then(setHealth).catch(() => setHealth(null));
+  }, []);
 
   useEffect(() => {
     if (!job || !["queued", "running"].includes(job.status)) return;
     const timer = window.setInterval(async () => {
       const next = await fetchJson(`/api/jobs/${job.id}`);
       setJob(next);
-    }, 1800);
+    }, 1200);
     return () => window.clearInterval(timer);
   }, [job]);
 
+  useEffect(() => {
+    if (editorClipId && !editorClip) setEditorClipId(null);
+  }, [editorClip, editorClipId]);
+
   async function submitJob(event) {
     event.preventDefault();
     setError("");
     setIsSubmitting(true);
+    setEditorClipId(null);
     try {
       if (sourceMode === "youtube") {
         const next = await fetchJson("/api/jobs/youtube", {
@@ -98,156 +463,319 @@ function App() {
     }));
   }
 
+  function setProfileValue(key) {
+    return (value) => setProfile((current) => ({ ...current, [key]: value }));
+  }
+
   return (
-    <main className="min-h-screen bg-stone-50 text-slate-950">
-      <header className="border-b border-slate-200 bg-white">
-        <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4">
-          <div className="flex items-center gap-3">
-            <div className="grid h-10 w-10 place-items-center rounded-md bg-slate-950 text-white">
-              <Scissors size={20} />
-            </div>
-            <div>
-              <h1 className="text-xl font-semibold tracking-normal">ElevenClip.AI</h1>
-              <p className="text-sm text-slate-500">AMD ROCm multimodal clipping workspace</p>
-            </div>
-          </div>
-          <StatusPill job={job} />
-        </div>
-      </header>
+    <main className="app-shell">
+      <AppHeader
+        job={job}
+        health={health}
+        language={language}
+        setLanguage={setLanguage}
+        theme={theme}
+        setTheme={setTheme}
+        t={t}
+      />
 
-      <div className="mx-auto grid max-w-7xl gap-5 px-5 py-5 lg:grid-cols-[360px_1fr]">
-        <section className="panel">
-          <form className="space-y-5" onSubmit={submitJob}>
-            <div>
-              <h2 className="section-title">Channel Profile</h2>
-              <div className="mt-3 grid gap-3">
-                <TextField label="Niche" value={profile.niche} onChange={setProfileValue("niche")} />
-                <SelectField
-                  label="Clip style"
-                  value={profile.clip_style}
-                  onChange={setProfileValue("clip_style")}
-                  options={["informative", "funny", "dramatic", "educational", "commentary"]}
-                />
-                <SelectField
-                  label="Clip length"
-                  value={profile.clip_length_seconds}
-                  onChange={(value) =>
-                    setProfile((current) => ({
-                      ...current,
-                      clip_length_seconds: Number(value),
-                    }))
-                  }
-                  options={[30, 60, 90]}
-                />
-                <TextField
-                  label="Primary language"
-                  value={profile.primary_language}
-                  onChange={setProfileValue("primary_language")}
-                />
-                <SelectField
-                  label="Platform"
-                  value={profile.target_platform}
-                  onChange={setProfileValue("target_platform")}
-                  options={["tiktok", "youtube_shorts", "instagram_reels"]}
-                />
-              </div>
-            </div>
+      {editorClip ? (
+        <ClipEditorPage
+          clip={editorClip}
+          job={job}
+          t={t}
+          onBack={() => setEditorClipId(null)}
+          onPatch={patchClip}
+          onDelete={(clip) => patchClip(clip.id, { deleted: true })}
+          onApprove={(clip) => patchClip(clip.id, { approved: !clip.approved })}
+          onRegenerate={regenerateClip}
+        />
+      ) : (
+        <div className="workspace-grid">
+          <section className="panel input-panel">
+            <ProfileForm
+              t={t}
+              profile={profile}
+              setProfile={setProfile}
+              setProfileValue={setProfileValue}
+              sourceMode={sourceMode}
+              setSourceMode={setSourceMode}
+              youtubeUrl={youtubeUrl}
+              setYoutubeUrl={setYoutubeUrl}
+              file={file}
+              setFile={setFile}
+              error={error}
+              isSubmitting={isSubmitting}
+              submitJob={submitJob}
+            />
+          </section>
 
-            <div>
-              <h2 className="section-title">Video Input</h2>
-              <div className="segmented mt-3">
-                <button
-                  type="button"
-                  className={sourceMode === "youtube" ? "active" : ""}
-                  onClick={() => setSourceMode("youtube")}
-                >
-                  <LinkIcon size={16} />
-                  YouTube
-                </button>
-                <button
-                  type="button"
-                  className={sourceMode === "upload" ? "active" : ""}
-                  onClick={() => setSourceMode("upload")}
-                >
-                  <Upload size={16} />
-                  Upload
-                </button>
-              </div>
-              <div className="mt-3">
-                {sourceMode === "youtube" ? (
-                  <TextField
-                    label="YouTube URL"
-                    value={youtubeUrl}
-                    onChange={setYoutubeUrl}
-                    placeholder="https://www.youtube.com/watch?v=..."
-                  />
-                ) : (
-                  <label className="block">
-                    <span className="field-label">Video file</span>
-                    <input
-                      className="file-input"
-                      type="file"
-                      accept="video/mp4,video/quicktime,video/*"
-                      onChange={(event) => setFile(event.target.files?.[0] || null)}
-                    />
-                  </label>
-                )}
-              </div>
-            </div>
+          <section className="center-column">
+            <ProgressPanel job={job} t={t} />
+            <TranscriptPanel job={job} t={t} />
+          </section>
 
-            {error && <div className="error-box">{error}</div>}
-            <button
-              className="primary-button"
-              disabled={isSubmitting || (sourceMode === "youtube" ? !youtubeUrl : !file)}
-              type="submit"
-            >
-              {isSubmitting ? <Loader2 className="animate-spin" size={18} /> : <Film size={18} />}
-              Start Pipeline
-            </button>
-          </form>
-        </section>
+          <section className="results-column">
+            <ClipsPanel
+              clips={activeClips}
+              t={t}
+              onOpenEditor={(clip) => setEditorClipId(clip.id)}
+              onPatch={patchClip}
+              onDelete={(clip) => patchClip(clip.id, { deleted: true })}
+              onApprove={(clip) => patchClip(clip.id, { approved: !clip.approved })}
+              onRegenerate={regenerateClip}
+            />
+          </section>
+        </div>
+      )}
+    </main>
+  );
+}
 
-        <section className="space-y-5">
-          <ProgressPanel job={job} />
-          <TranscriptPanel job={job} />
-          <ClipsPanel
-            clips={activeClips}
-            onPatch={patchClip}
-            onDelete={(clip) => patchClip(clip.id, { deleted: true })}
-            onApprove={(clip) => patchClip(clip.id, { approved: !clip.approved })}
-            onRegenerate={regenerateClip}
-          />
-        </section>
+function AppHeader({ job, health, language, setLanguage, theme, setTheme, t }) {
+  const status = job?.status || "idle";
+  const modeLabel = health ? (health.demo_mode ? t("demoMode") : t("productionMode")) : "API";
+  const modeClass = health ? (health.demo_mode ? "demo" : "prod") : "";
+  return (
+    <header className="app-header">
+      <div className="brand-block">
+        <div className="brand-mark">
+          <Scissors size={22} />
+        </div>
+        <div>
+          <h1>ElevenClip.AI</h1>
+          <p>{t("appSubtitle")}</p>
+        </div>
       </div>
-    </main>
+
+      <div className="header-actions">
+        <span className={`mode-pill ${modeClass}`}>{modeLabel}</span>
+        <StatusPill status={status} t={t} />
+        <label className="toolbar-select" title={t("language")}>
+          <Languages size={16} />
+          <select value={language} onChange={(event) => setLanguage(event.target.value)}>
+            {LANGUAGES.map((item) => (
+              <option key={item.code} value={item.code}>
+                {item.label}
+              </option>
+            ))}
+          </select>
+        </label>
+        <button
+          className="icon-button"
+          type="button"
+          title={t("theme")}
+          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+        >
+          {theme === "dark" ? <Sun size={17} /> : <Moon size={17} />}
+        </button>
+      </div>
+    </header>
   );
+}
 
-  function setProfileValue(key) {
-    return (value) => setProfile((current) => ({ ...current, [key]: value }));
-  }
+function ProfileForm({
+  t,
+  profile,
+  setProfile,
+  setProfileValue,
+  sourceMode,
+  setSourceMode,
+  youtubeUrl,
+  setYoutubeUrl,
+  file,
+  setFile,
+  error,
+  isSubmitting,
+  submitJob,
+}) {
+  return (
+    <form className="form-stack" onSubmit={submitJob}>
+      <div className="panel-heading">
+        <div>
+          <h2>{t("channelProfile")}</h2>
+          <p>{t("channelProfileText")}</p>
+        </div>
+        <SlidersHorizontal size={18} />
+      </div>
+
+      <SelectField
+        label={t("niche")}
+        helper={t("nicheHelp")}
+        value={profile.niche}
+        onChange={setProfileValue("niche")}
+        options={NICHES.map((value) => ({ value, label: t(`niche_${value}`) }))}
+      />
+      {profile.niche === "other" && (
+        <TextField
+          label={t("customNiche")}
+          value={profile.niche_custom}
+          onChange={setProfileValue("niche_custom")}
+          placeholder={t("customNichePlaceholder")}
+        />
+      )}
+      <TextAreaField
+        label={t("channelDescription")}
+        helper={t("channelDescriptionHelp")}
+        value={profile.channel_description}
+        onChange={setProfileValue("channel_description")}
+        placeholder={t("channelDescriptionPlaceholder")}
+        rows={4}
+      />
+
+      <div className="form-grid-two">
+        <SelectField
+          label={t("clipStyle")}
+          value={profile.clip_style}
+          onChange={setProfileValue("clip_style")}
+          options={CLIP_STYLES.map((value) => ({ value, label: t(`style_${value}`) }))}
+        />
+        <SelectField
+          label={t("clipLength")}
+          value={profile.clip_length_seconds}
+          onChange={(value) =>
+            setProfile((current) => ({ ...current, clip_length_seconds: Number(value) }))
+          }
+          options={[30, 45, 60, 90, 120].map((value) => ({ value, label: String(value) }))}
+        />
+      </div>
+
+      <SelectField
+        label={t("clipCount")}
+        helper={t("clipCountHelp")}
+        value={profile.clip_count}
+        onChange={(value) => setProfile((current) => ({ ...current, clip_count: Number(value) }))}
+        options={[3, 5, 10].map((value) => ({ value, label: String(value) }))}
+      />
+
+      <div className="form-grid-two">
+        <SelectField
+          label={t("primaryLanguage")}
+          value={profile.primary_language}
+          onChange={setProfileValue("primary_language")}
+          options={LANGUAGE_OPTIONS.map((value) => ({ value, label: value }))}
+        />
+        <SelectField
+          label={t("platform")}
+          value={profile.target_platform}
+          onChange={setProfileValue("target_platform")}
+          options={PLATFORM_OPTIONS.map((value) => ({ value, label: t(`platform_${value}`) }))}
+        />
+      </div>
+
+      <div className="divider" />
+
+      <div className="panel-heading compact">
+        <div>
+          <h2>{t("videoInput")}</h2>
+        </div>
+        <Film size={18} />
+      </div>
+
+      <div className="segmented">
+        <button
+          type="button"
+          className={sourceMode === "youtube" ? "active" : ""}
+          onClick={() => setSourceMode("youtube")}
+        >
+          <LinkIcon size={16} />
+          {t("youtube")}
+        </button>
+        <button
+          type="button"
+          className={sourceMode === "upload" ? "active" : ""}
+          onClick={() => setSourceMode("upload")}
+        >
+          <Upload size={16} />
+          {t("upload")}
+        </button>
+      </div>
+
+      {sourceMode === "youtube" ? (
+        <TextField
+          label={t("youtubeUrl")}
+          value={youtubeUrl}
+          onChange={setYoutubeUrl}
+          placeholder={t("youtubePlaceholder")}
+        />
+      ) : (
+        <label className="field-block">
+          <span className="field-label">{t("videoFile")}</span>
+          <input
+            className="file-input"
+            type="file"
+            accept="video/mp4,video/quicktime,video/*"
+            onChange={(event) => setFile(event.target.files?.[0] || null)}
+          />
+          {file && <span className="file-name">{file.name}</span>}
+        </label>
+      )}
+
+      {error && <div className="error-box">{error}</div>}
+      <button
+        className="primary-button"
+        disabled={isSubmitting || (sourceMode === "youtube" ? !youtubeUrl : !file)}
+        type="submit"
+      >
+        {isSubmitting ? <Loader2 className="spin" size={18} /> : <Wand2 size={18} />}
+        {t("startPipeline")}
+      </button>
+    </form>
+  );
 }
 
-function StatusPill({ job }) {
-  const status = job?.status || "idle";
-  return <span className={`status-pill ${status}`}>{status}</span>;
+function StatusPill({ status, t }) {
+  return <span className={`status-pill ${status}`}>{t(status)}</span>;
 }
 
-function ProgressPanel({ job }) {
+function ProgressPanel({ job, t }) {
   const progress = Math.round((job?.progress || 0) * 100);
+  const steps = [
+    ["input", t("stepInput")],
+    ["transcription", t("stepTranscription")],
+    ["highlight_detection", t("stepHighlights")],
+    ["multimodal_analysis", t("stepVisual")],
+    ["clip_generation", t("stepRender")],
+    ["finalizing", t("stepFinal")],
+  ];
+  const stepIndex = Math.max(0, (job?.step_index || 0) - 1);
+  const message =
+    job?.current_step === "clip_generation" && job.active_clip_total
+      ? t("renderProgress", {
+          current: job.active_clip_index || 1,
+          total: job.active_clip_total,
+        })
+      : job?.message || t("ready");
+
   return (
-    <section className="panel">
-      <div className="flex items-center justify-between gap-3">
+    <section className="panel progress-panel">
+      <div className="panel-heading">
         <div>
-          <h2 className="section-title">Pipeline</h2>
-          <p className="mt-1 text-sm text-slate-500">{job?.message || "Ready"}</p>
+          <h2>{t("pipeline")}</h2>
+          <p>{message}</p>
         </div>
-        <span className="text-2xl font-semibold tabular-nums">{progress}%</span>
+        <strong className="progress-percent">{progress}%</strong>
       </div>
-      <div className="progress-track mt-4">
+      <div className="progress-track">
         <div className="progress-bar" style={{ width: `${progress}%` }} />
       </div>
+      <div className="step-list" aria-label={t("currentStep")}>
+        {steps.map(([id, label], index) => (
+          <div
+            key={id}
+            className={`step-item ${index < stepIndex ? "done" : ""} ${
+              index === stepIndex ? "active" : ""
+            }`}
+          >
+            <span>{index + 1}</span>
+            <p>{label}</p>
+          </div>
+        ))}
+      </div>
+      <p className="helper-text">{t("progressNote")}</p>
+
       {job?.timings && Object.keys(job.timings).length > 0 && (
-        <div className="timing-grid mt-4">
+        <div className="timing-grid">
           {Object.entries(job.timings).map(([name, value]) => (
             <div key={name}>
               <span>{name.replaceAll("_", " ")}</span>
@@ -256,124 +784,134 @@ function ProgressPanel({ job }) {
           ))}
         </div>
       )}
-      {job?.error && <div className="error-box mt-4">{job.error}</div>}
+      {job?.error && <div className="error-box">{job.error}</div>}
     </section>
   );
 }
 
-function TranscriptPanel({ job }) {
-  if (!job?.transcript?.length) return null;
+function TranscriptPanel({ job, t }) {
   return (
-    <section className="panel">
-      <h2 className="section-title">Transcript</h2>
-      <div className="transcript-list mt-3">
-        {job.transcript.map((segment) => (
-          <div key={segment.id} className="transcript-row">
-            <span>
-              {formatTime(segment.start_seconds)} - {formatTime(segment.end_seconds)}
-            </span>
-            <p>{segment.text}</p>
-          </div>
-        ))}
+    <section className="panel transcript-panel">
+      <div className="panel-heading compact">
+        <div>
+          <h2>{t("transcript")}</h2>
+          {!job?.transcript?.length && <p>{t("transcriptEmpty")}</p>}
+        </div>
+        <Captions size={18} />
       </div>
+      {job?.transcript?.length > 0 && (
+        <div className="transcript-list">
+          {job.transcript.map((segment) => (
+            <div key={segment.id} className="transcript-row">
+              <span>
+                {formatTime(segment.start_seconds)} - {formatTime(segment.end_seconds)}
+              </span>
+              <p>{segment.text}</p>
+            </div>
+          ))}
+        </div>
+      )}
     </section>
   );
 }
 
-function ClipsPanel({ clips, onPatch, onDelete, onApprove, onRegenerate }) {
+function ClipsPanel({ clips, t, onOpenEditor, onPatch, onDelete, onApprove, onRegenerate }) {
   return (
-    <section className="panel">
-      <div className="flex items-center justify-between gap-3">
-        <h2 className="section-title">Clips</h2>
-        <span className="text-sm text-slate-500">{clips.length} ready</span>
-      </div>
-      <div className="mt-4 grid gap-4 xl:grid-cols-2">
-        {clips.map((clip) => (
-          <ClipEditor
-            key={clip.id}
-            clip={clip}
-            onPatch={onPatch}
-            onDelete={onDelete}
-            onApprove={onApprove}
-            onRegenerate={onRegenerate}
-          />
-        ))}
+    <section className="panel clips-panel">
+      <div className="panel-heading">
+        <div>
+          <h2>{t("clips")}</h2>
+          <p>
+            {clips.length} {t("readyClips")}
+          </p>
+        </div>
+        <PanelRightOpen size={18} />
       </div>
+
+      {clips.length === 0 ? (
+        <div className="empty-state">
+          <Film size={34} />
+          <h3>{t("noClips")}</h3>
+          <p>{t("noClipsText")}</p>
+        </div>
+      ) : (
+        <div className="clip-grid">
+          {clips.map((clip) => (
+            <ClipCard
+              key={clip.id}
+              clip={clip}
+              t={t}
+              onOpenEditor={onOpenEditor}
+              onPatch={onPatch}
+              onDelete={onDelete}
+              onApprove={onApprove}
+              onRegenerate={onRegenerate}
+            />
+          ))}
+        </div>
+      )}
     </section>
   );
 }
 
-function ClipEditor({ clip, onPatch, onDelete, onApprove, onRegenerate }) {
+function ClipCard({ clip, t, onOpenEditor, onPatch, onDelete, onApprove, onRegenerate }) {
   const duration = Math.max(1, clip.end_seconds - clip.start_seconds);
   return (
     <article className="clip-card">
       <div className="clip-video">
-        {clip.video_url ? (
-          <video controls src={`${API_BASE}${clip.video_url}`} />
-        ) : (
-          <Film size={34} />
-        )}
+        {clip.video_url ? <video controls src={`${API_BASE}${clip.video_url}`} /> : <Film size={34} />}
       </div>
       <div className="clip-body">
-        <div className="flex items-start justify-between gap-3">
+        <div className="clip-title-row">
           <div>
             <h3>{clip.title}</h3>
             <p>{clip.reason}</p>
           </div>
-          <span className="score">{Math.round(clip.score)}</span>
+          <span className="score">
+            <Gauge size={14} />
+            {Math.round(clip.score)}
+          </span>
         </div>
 
-        <div className="timeline">
-          <div>
-            <label>Start</label>
-            <input
-              type="number"
-              min="0"
-              step="0.5"
-              value={Number(clip.start_seconds).toFixed(1)}
-              onChange={(event) =>
-                onPatch(clip.id, { start_seconds: Number(event.target.value) })
-              }
-            />
-          </div>
-          <div>
-            <label>End</label>
-            <input
-              type="number"
-              min="1"
-              step="0.5"
-              value={Number(clip.end_seconds).toFixed(1)}
-              onChange={(event) => onPatch(clip.id, { end_seconds: Number(event.target.value) })}
-            />
-          </div>
-          <strong>{duration.toFixed(1)}s</strong>
+        <div className="metric-row">
+          <span>
+            <Clock3 size={14} />
+            {duration.toFixed(1)}s
+          </span>
+          <span>
+            {formatTime(clip.start_seconds)} - {formatTime(clip.end_seconds)}
+          </span>
         </div>
 
         <textarea
-          value={clip.subtitle_text}
-          onChange={(event) => onPatch(clip.id, { subtitle_text: event.target.value })}
+          defaultValue={clip.subtitle_text}
+          aria-label={t("subtitles")}
           rows={3}
+          onBlur={(event) => {
+            if (event.target.value !== clip.subtitle_text) {
+              onPatch(clip.id, { subtitle_text: event.target.value });
+            }
+          }}
         />
 
         <div className="clip-actions">
-          <button type="button" title="Approve" onClick={() => onApprove(clip)}>
-            <Check size={17} />
-            {clip.approved ? "Approved" : "Approve"}
+          <button type="button" title={t("openEditor")} onClick={() => onOpenEditor(clip)}>
+            <PanelRightOpen size={16} />
+            {t("openEditor")}
           </button>
-          <button type="button" title="Regenerate" onClick={() => onRegenerate(clip)}>
-            <RefreshCcw size={17} />
-            Regenerate
+          <button type="button" title={t("approve")} onClick={() => onApprove(clip)}>
+            <Check size={16} />
+            {clip.approved ? t("approved") : t("approve")}
           </button>
-          <button type="button" title="Delete" onClick={() => onDelete(clip)}>
-            <Trash2 size={17} />
+          <button type="button" title={t("regenerate")} onClick={() => onRegenerate(clip)}>
+            <RefreshCcw size={16} />
+          </button>
+          <button type="button" title={t("delete")} onClick={() => onDelete(clip)}>
+            <Trash2 size={16} />
           </button>
           {clip.download_url && (
-            <a
-              className="download-button"
-              href={`${API_BASE}${clip.download_url}`}
-              title="Download"
-            >
-              <Download size={17} />
+            <a className="download-button" href={`${API_BASE}${clip.download_url}`} title={t("download")}>
+              <Download size={16} />
             </a>
           )}
         </div>
@@ -382,9 +920,178 @@ function ClipEditor({ clip, onPatch, onDelete, onApprove, onRegenerate }) {
   );
 }
 
-function TextField({ label, value, onChange, placeholder }) {
+function ClipEditorPage({ clip, job, t, onBack, onPatch, onDelete, onApprove, onRegenerate }) {
+  const duration = Math.max(1, clip.end_seconds - clip.start_seconds);
+  const cues = getSubtitleCues(clip, duration);
+  const metadataModel = clip.metadata?.model || "unknown";
+
+  function patchCue(index, text) {
+    const next = cues.map((cue, cueIndex) => (cueIndex === index ? { ...cue, text } : cue));
+    onPatch(clip.id, { subtitle_text: next.map((cue) => cue.text).join(" ") });
+  }
+
   return (
-    <label className="block">
+    <div className="editor-shell">
+      <div className="editor-topbar">
+        <button className="ghost-button" type="button" onClick={onBack}>
+          <ArrowLeft size={17} />
+          {t("backToDashboard")}
+        </button>
+        <div>
+          <h2>{t("editor")}</h2>
+          <p>{t("editorText")}</p>
+        </div>
+      </div>
+
+      <div className="editor-grid">
+        <section className="panel editor-main">
+          <div className="panel-heading compact">
+            <div>
+              <h2>{t("preview")}</h2>
+              <p>
+                {formatTime(clip.start_seconds)} - {formatTime(clip.end_seconds)}
+              </p>
+            </div>
+            <Film size={18} />
+          </div>
+          <div className="editor-preview">
+            {clip.video_url ? <video controls src={`${API_BASE}${clip.video_url}`} /> : <Film size={44} />}
+          </div>
+
+          <div className="range-editor">
+            <div className="timeline-visual">
+              <div className="timeline-fill" />
+              <div className="timeline-window" style={{ left: "18%", width: "46%" }} />
+              {Array.from({ length: 9 }).map((_, index) => (
+                <span key={index} style={{ left: `${index * 12.5}%` }} />
+              ))}
+            </div>
+            <div className="timeline">
+              <NumberField
+                label={t("start")}
+                value={Number(clip.start_seconds).toFixed(1)}
+                onChange={(value) => onPatch(clip.id, { start_seconds: Number(value) })}
+              />
+              <NumberField
+                label={t("end")}
+                value={Number(clip.end_seconds).toFixed(1)}
+                onChange={(value) => onPatch(clip.id, { end_seconds: Number(value) })}
+              />
+              <strong>{duration.toFixed(1)}s</strong>
+            </div>
+          </div>
+
+          <div className="subtitle-editor">
+            <div className="panel-heading compact">
+              <div>
+                <h2>{t("subtitleCues")}</h2>
+                <p>{t("subtitleCueHelp")}</p>
+              </div>
+              <Captions size={18} />
+            </div>
+            <div className="cue-list">
+              {cues.map((cue, index) => (
+                <div className="cue-row" key={`${cue.start_seconds}-${index}`}>
+                  <span>
+                    {formatTime(cue.start_seconds)} - {formatTime(cue.end_seconds)}
+                  </span>
+                  <textarea
+                    defaultValue={cue.text}
+                    rows={2}
+                    onBlur={(event) => {
+                      if (event.target.value !== cue.text) patchCue(index, event.target.value);
+                    }}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        <aside className="panel inspector-panel">
+          <div className="panel-heading compact">
+            <div>
+              <h2>{t("inspector")}</h2>
+            </div>
+            <Sparkles size={18} />
+          </div>
+          <dl className="inspector-list">
+            <div>
+              <dt>{t("title")}</dt>
+              <dd>{clip.title}</dd>
+            </div>
+            <div>
+              <dt>{t("reason")}</dt>
+              <dd>{clip.reason}</dd>
+            </div>
+            <div>
+              <dt>{t("score")}</dt>
+              <dd>{Math.round(clip.score)}</dd>
+            </div>
+            <div>
+              <dt>{t("status")}</dt>
+              <dd>{clip.approved ? t("approved") : t("notApproved")}</dd>
+            </div>
+            <div>
+              <dt>{t("model")}</dt>
+              <dd>{metadataModel}</dd>
+            </div>
+            <div>
+              <dt>{t("source")}</dt>
+              <dd>{job?.source?.kind || "video"}</dd>
+            </div>
+          </dl>
+
+          <div className="inspector-actions">
+            <button type="button" onClick={() => onApprove(clip)}>
+              <Check size={16} />
+              {clip.approved ? t("approved") : t("approve")}
+            </button>
+            <button type="button" onClick={() => onRegenerate(clip)}>
+              <RefreshCcw size={16} />
+              {t("regenerate")}
+            </button>
+            {clip.download_url && (
+              <a href={`${API_BASE}${clip.download_url}`}>
+                <Download size={16} />
+                {t("download")}
+              </a>
+            )}
+            <button className="danger" type="button" onClick={() => onDelete(clip)}>
+              <Trash2 size={16} />
+              {t("delete")}
+            </button>
+          </div>
+
+          <TranscriptMini transcript={job?.transcript || []} clip={clip} t={t} />
+        </aside>
+      </div>
+    </div>
+  );
+}
+
+function TranscriptMini({ transcript, clip, t }) {
+  const rows = transcript.filter(
+    (segment) => segment.end_seconds >= clip.start_seconds && segment.start_seconds <= clip.end_seconds
+  );
+  return (
+    <div className="mini-transcript">
+      <h3>{t("transcript")}</h3>
+      {rows.map((segment) => (
+        <div key={segment.id}>
+          <span>
+            {formatTime(segment.start_seconds)} - {formatTime(segment.end_seconds)}
+          </span>
+          <p>{segment.text}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function TextField({ label, value, onChange, placeholder, helper }) {
+  return (
+    <label className="field-block">
       <span className="field-label">{label}</span>
       <input
         className="text-input"
@@ -392,21 +1099,53 @@ function TextField({ label, value, onChange, placeholder }) {
         placeholder={placeholder}
         onChange={(event) => onChange(event.target.value)}
       />
+      {helper && <span className="helper-text">{helper}</span>}
+    </label>
+  );
+}
+
+function TextAreaField({ label, value, onChange, placeholder, helper, rows = 3 }) {
+  return (
+    <label className="field-block">
+      <span className="field-label">{label}</span>
+      <textarea
+        value={value}
+        placeholder={placeholder}
+        onChange={(event) => onChange(event.target.value)}
+        rows={rows}
+      />
+      {helper && <span className="helper-text">{helper}</span>}
     </label>
   );
 }
 
-function SelectField({ label, value, onChange, options }) {
+function SelectField({ label, value, onChange, options, helper }) {
   return (
-    <label className="block">
+    <label className="field-block">
       <span className="field-label">{label}</span>
       <select className="text-input" value={value} onChange={(event) => onChange(event.target.value)}>
         {options.map((option) => (
-          <option key={option} value={option}>
-            {String(option).replaceAll("_", " ")}
+          <option key={option.value} value={option.value}>
+            {option.label}
           </option>
         ))}
       </select>
+      {helper && <span className="helper-text">{helper}</span>}
+    </label>
+  );
+}
+
+function NumberField({ label, value, onChange }) {
+  return (
+    <label>
+      <span>{label}</span>
+      <input
+        type="number"
+        min="0"
+        step="0.5"
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+      />
     </label>
   );
 }
@@ -426,9 +1165,60 @@ async function fetchJson(path, options) {
   return response.json();
 }
 
+function getSubtitleCues(clip, duration) {
+  const fromMetadata = clip.metadata?.subtitle_cues;
+  if (Array.isArray(fromMetadata) && fromMetadata.length > 0) {
+    return fromMetadata.map((cue) => ({
+      start_seconds: Number(cue.start_seconds || 0),
+      end_seconds: Number(cue.end_seconds || cue.start_seconds || 0),
+      text: cue.text || "",
+    }));
+  }
+  return splitSubtitleText(clip.subtitle_text || "").map((text, index, all) => {
+    const cueDuration = duration / Math.max(all.length, 1);
+    return {
+      start_seconds: roundTime(index * cueDuration),
+      end_seconds: roundTime((index + 1) * cueDuration),
+      text,
+    };
+  });
+}
+
+function splitSubtitleText(text) {
+  const clean = text.trim().replace(/\s+/g, " ");
+  if (!clean) return [""];
+  const words = clean.split(" ");
+  if (words.length <= 1) {
+    const chunks = [];
+    for (let index = 0; index < clean.length; index += 38) {
+      chunks.push(clean.slice(index, index + 38));
+    }
+    return chunks;
+  }
+  const chunks = [];
+  let current = [];
+  words.forEach((word) => {
+    const candidate = [...current, word].join(" ");
+    const punctuationBreak = current.length > 0 && /[,.!?;:]$/.test(current[current.length - 1]);
+    if (current.length > 0 && (candidate.length > 42 || current.length >= 7 || punctuationBreak)) {
+      chunks.push(current.join(" "));
+      current = [word];
+    } else {
+      current.push(word);
+    }
+  });
+  if (current.length) chunks.push(current.join(" "));
+  return chunks;
+}
+
+function roundTime(value) {
+  return Math.round(value * 10) / 10;
+}
+
 function formatTime(value) {
-  const minutes = Math.floor(value / 60);
-  const seconds = Math.floor(value % 60);
+  const safeValue = Number.isFinite(Number(value)) ? Number(value) : 0;
+  const minutes = Math.floor(safeValue / 60);
+  const seconds = Math.floor(safeValue % 60);
   return `${minutes}:${String(seconds).padStart(2, "0")}`;
 }
 

frontend/src/styles.css

@@ -5,10 +5,55 @@
 :root {
   color-scheme: light;
   font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+  --bg: #f6f7f9;
+  --surface: #ffffff;
+  --surface-muted: #eef2f6;
+  --surface-strong: #e2e8f0;
+  --text: #111827;
+  --text-muted: #64748b;
+  --text-soft: #94a3b8;
+  --border: #d9e2ec;
+  --border-strong: #b7c4d4;
+  --primary: #0f766e;
+  --primary-strong: #115e59;
+  --primary-soft: #ccfbf1;
+  --accent: #d97706;
+  --accent-soft: #fef3c7;
+  --danger: #be123c;
+  --danger-soft: #ffe4e6;
+  --shadow: 0 18px 40px rgb(15 23 42 / 0.08);
+  --radius: 8px;
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #09111f;
+  --surface: #111827;
+  --surface-muted: #172033;
+  --surface-strong: #243044;
+  --text: #f8fafc;
+  --text-muted: #a8b3c7;
+  --text-soft: #748198;
+  --border: #28364d;
+  --border-strong: #3b4d67;
+  --primary: #2dd4bf;
+  --primary-strong: #5eead4;
+  --primary-soft: #133b3b;
+  --accent: #fbbf24;
+  --accent-soft: #3d2e12;
+  --danger: #fb7185;
+  --danger-soft: #3d1723;
+  --shadow: 0 20px 44px rgb(0 0 0 / 0.26);
+}
+
+* {
+  box-sizing: border-box;
 }
 
 body {
   margin: 0;
+  background: var(--bg);
+  color: var(--text);
 }
 
 button,
@@ -18,315 +63,839 @@ textarea {
   font: inherit;
 }
 
-.panel {
-  border: 1px solid rgb(226 232 240);
-  border-radius: 8px;
-  background: white;
-  padding: 20px;
-  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
+button,
+select {
+  cursor: pointer;
 }
 
-.section-title {
-  font-size: 0.82rem;
-  font-weight: 700;
+button:disabled {
+  cursor: not-allowed;
+}
+
+.app-shell {
+  min-height: 100vh;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 60%, transparent), transparent 360px),
+    var(--bg);
+  color: var(--text);
+}
+
+.app-header {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: flex;
+  min-height: 76px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  border-bottom: 1px solid var(--border);
+  background: color-mix(in srgb, var(--surface) 92%, transparent);
+  padding: 14px clamp(16px, 4vw, 44px);
+  backdrop-filter: blur(18px);
+}
+
+.brand-block,
+.header-actions,
+.clip-actions,
+.metric-row,
+.editor-topbar,
+.panel-heading,
+.toolbar-select,
+.mode-pill,
+.status-pill,
+.icon-button,
+.ghost-button,
+.primary-button,
+.inspector-actions a,
+.inspector-actions button {
+  display: flex;
+  align-items: center;
+}
+
+.brand-block {
+  min-width: 0;
+  gap: 12px;
+}
+
+.brand-mark {
+  display: grid;
+  width: 44px;
+  height: 44px;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: var(--radius);
+  background: #020617;
+  color: white;
+}
+
+.brand-block h1,
+.panel-heading h2,
+.editor-topbar h2,
+.mini-transcript h3 {
+  margin: 0;
+  color: var(--text);
   letter-spacing: 0;
-  color: rgb(15 23 42);
+}
+
+.brand-block h1 {
+  font-size: 1.2rem;
+  font-weight: 800;
+}
+
+.brand-block p,
+.panel-heading p,
+.helper-text,
+.file-name {
+  margin: 2px 0 0;
+  color: var(--text-muted);
+  font-size: 0.86rem;
+  line-height: 1.5;
+}
+
+.header-actions {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.mode-pill,
+.status-pill {
+  min-height: 34px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  padding: 0 10px;
+  color: var(--text-muted);
+  font-size: 0.76rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.mode-pill.prod,
+.status-pill.completed {
+  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
+  background: var(--primary-soft);
+  color: var(--primary-strong);
+}
+
+.mode-pill.demo,
+.status-pill.running,
+.status-pill.queued {
+  border-color: color-mix(in srgb, #0ea5e9 45%, var(--border));
+  background: color-mix(in srgb, #e0f2fe 70%, var(--surface));
+  color: #0369a1;
+}
+
+:root[data-theme="dark"] .mode-pill.demo,
+:root[data-theme="dark"] .status-pill.running,
+:root[data-theme="dark"] .status-pill.queued {
+  background: #102a3d;
+  color: #7dd3fc;
+}
+
+.status-pill.failed {
+  border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+
+.toolbar-select,
+.icon-button,
+.ghost-button,
+.clip-actions button,
+.download-button,
+.inspector-actions a,
+.inspector-actions button {
+  min-height: 36px;
+  justify-content: center;
+  gap: 8px;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--surface);
+  color: var(--text);
+  text-decoration: none;
+}
+
+.toolbar-select {
+  padding: 0 8px;
+}
+
+.toolbar-select select {
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  outline: none;
+}
+
+.icon-button {
+  width: 36px;
+  padding: 0;
+}
+
+.workspace-grid {
+  display: grid;
+  grid-template-columns: minmax(300px, 360px) minmax(360px, 1fr) minmax(340px, 460px);
+  gap: 18px;
+  padding: 20px clamp(16px, 4vw, 44px) 44px;
+}
+
+.center-column,
+.results-column,
+.form-stack {
+  display: grid;
+  align-content: start;
+  gap: 16px;
+}
+
+.panel {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: color-mix(in srgb, var(--surface) 96%, transparent);
+  box-shadow: var(--shadow);
+}
+
+.input-panel,
+.progress-panel,
+.transcript-panel,
+.clips-panel,
+.editor-main,
+.inspector-panel {
+  padding: 18px;
+}
+
+.input-panel {
+  position: sticky;
+  top: 96px;
+}
+
+.panel-heading {
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.panel-heading.compact {
+  margin-bottom: 12px;
+}
+
+.panel-heading h2,
+.editor-topbar h2,
+.mini-transcript h3 {
+  font-size: 0.92rem;
+  font-weight: 850;
   text-transform: uppercase;
 }
 
+.divider {
+  height: 1px;
+  background: var(--border);
+}
+
+.form-grid-two {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 12px;
+}
+
+.field-block {
+  display: grid;
+  gap: 6px;
+}
+
 .field-label {
-  display: block;
-  margin-bottom: 6px;
+  color: var(--text);
   font-size: 0.82rem;
-  font-weight: 650;
-  color: rgb(71 85 105);
+  font-weight: 750;
 }
 
 .text-input,
-.file-input {
+.file-input,
+textarea,
+.timeline input {
   width: 100%;
+  border: 1px solid var(--border-strong);
+  border-radius: 7px;
+  background: var(--surface);
+  color: var(--text);
+  outline: none;
+}
+
+.text-input,
+.file-input {
   min-height: 42px;
-  border: 1px solid rgb(203 213 225);
-  border-radius: 6px;
-  background: white;
   padding: 9px 11px;
-  color: rgb(15 23 42);
-  outline: none;
+}
+
+textarea {
+  resize: vertical;
+  padding: 10px 11px;
+  line-height: 1.5;
 }
 
 .text-input:focus,
 .file-input:focus,
-textarea:focus {
-  border-color: rgb(20 184 166);
-  box-shadow: 0 0 0 3px rgb(20 184 166 / 0.16);
+textarea:focus,
+.timeline input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
 }
 
 .segmented {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4px;
-  border-radius: 7px;
-  background: rgb(241 245 249);
+  border-radius: var(--radius);
+  background: var(--surface-muted);
   padding: 4px;
 }
 
 .segmented button {
   display: flex;
-  min-height: 38px;
+  min-height: 40px;
   align-items: center;
   justify-content: center;
   gap: 8px;
   border: 0;
-  border-radius: 5px;
-  color: rgb(71 85 105);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-muted);
 }
 
 .segmented button.active {
-  background: white;
-  color: rgb(15 23 42);
-  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
+  background: var(--surface);
+  color: var(--text);
+  box-shadow: 0 1px 2px rgb(15 23 42 / 0.10);
 }
 
-.primary-button,
-.clip-actions button,
-.download-button {
-  display: inline-flex;
-  min-height: 40px;
-  align-items: center;
+.primary-button {
+  min-height: 44px;
   justify-content: center;
-  gap: 8px;
-  border-radius: 6px;
-  border: 1px solid rgb(203 213 225);
-  padding: 0 12px;
-  color: rgb(15 23 42);
-  text-decoration: none;
+  gap: 10px;
+  border: 1px solid var(--primary-strong);
+  border-radius: 7px;
+  background: var(--primary-strong);
+  color: white;
+  font-weight: 850;
 }
 
-.primary-button {
-  width: 100%;
-  border-color: rgb(15 23 42);
-  background: rgb(15 23 42);
-  color: white;
-  font-weight: 700;
+:root[data-theme="dark"] .primary-button {
+  color: #042f2e;
 }
 
 .primary-button:disabled {
-  cursor: not-allowed;
   opacity: 0.55;
 }
 
-.status-pill {
+.progress-percent {
+  color: var(--text);
+  font-size: 2rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.progress-track {
+  height: 12px;
+  overflow: hidden;
   border-radius: 999px;
-  border: 1px solid rgb(203 213 225);
-  padding: 6px 10px;
-  font-size: 0.78rem;
-  font-weight: 800;
-  text-transform: uppercase;
+  background: var(--surface-strong);
+  margin-top: 16px;
 }
 
-.status-pill.running,
-.status-pill.queued {
-  border-color: rgb(14 165 233);
-  background: rgb(240 249 255);
-  color: rgb(3 105 161);
+.progress-bar {
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--primary), var(--accent));
+  transition: width 260ms ease;
 }
 
-.status-pill.completed {
-  border-color: rgb(20 184 166);
-  background: rgb(240 253 250);
-  color: rgb(15 118 110);
+.step-list {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 16px;
 }
 
-.status-pill.failed {
-  border-color: rgb(244 63 94);
-  background: rgb(255 241 242);
-  color: rgb(190 18 60);
+.step-item {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+  color: var(--text-soft);
+  font-size: 0.75rem;
+  font-weight: 750;
 }
 
-.progress-track {
-  height: 10px;
-  overflow: hidden;
+.step-item span {
+  display: grid;
+  width: 28px;
+  height: 28px;
+  place-items: center;
+  border: 1px solid var(--border);
   border-radius: 999px;
-  background: rgb(226 232 240);
+  background: var(--surface);
+  font-variant-numeric: tabular-nums;
 }
 
-.progress-bar {
-  height: 100%;
-  border-radius: 999px;
-  background: linear-gradient(90deg, rgb(20 184 166), rgb(245 158 11));
-  transition: width 220ms ease;
+.step-item p {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.step-item.done,
+.step-item.active {
+  color: var(--text);
+}
+
+.step-item.done span,
+.step-item.active span {
+  border-color: var(--primary);
+  background: var(--primary-soft);
+  color: var(--primary-strong);
 }
 
 .timing-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   gap: 10px;
+  margin-top: 16px;
 }
 
 .timing-grid div {
-  border: 1px solid rgb(226 232 240);
-  border-radius: 6px;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--surface-muted);
   padding: 10px;
 }
 
-.timing-grid span {
-  display: block;
-  color: rgb(100 116 139);
-  font-size: 0.78rem;
+.timing-grid span,
+.inspector-list dt,
+.cue-row span,
+.transcript-row span,
+.mini-transcript span {
+  color: var(--text-muted);
+  font-size: 0.76rem;
+  font-weight: 750;
 }
 
 .timing-grid strong {
   display: block;
   margin-top: 4px;
-  font-size: 1.05rem;
+  color: var(--text);
+  font-size: 1.02rem;
+  font-variant-numeric: tabular-nums;
 }
 
 .transcript-list {
   display: grid;
-  max-height: 330px;
+  max-height: 420px;
   overflow: auto;
   gap: 8px;
+  padding-right: 6px;
 }
 
 .transcript-row {
   display: grid;
-  grid-template-columns: 108px 1fr;
+  grid-template-columns: 112px 1fr;
   gap: 12px;
-  border-bottom: 1px solid rgb(241 245 249);
+  border-bottom: 1px solid var(--border);
   padding-bottom: 8px;
 }
 
-.transcript-row span {
-  color: rgb(100 116 139);
-  font-size: 0.8rem;
-  font-variant-numeric: tabular-nums;
+.transcript-row p,
+.mini-transcript p {
+  margin: 0;
+  color: var(--text);
+  font-size: 0.9rem;
+  line-height: 1.55;
+}
+
+.empty-state {
+  display: grid;
+  min-height: 280px;
+  place-items: center;
+  align-content: center;
+  gap: 10px;
+  border: 1px dashed var(--border-strong);
+  border-radius: var(--radius);
+  background: var(--surface-muted);
+  color: var(--text-muted);
+  text-align: center;
 }
 
-.transcript-row p {
+.empty-state h3 {
   margin: 0;
-  color: rgb(30 41 59);
-  font-size: 0.92rem;
+  color: var(--text);
+  font-size: 1rem;
+}
+
+.empty-state p {
+  max-width: 270px;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.clip-grid {
+  display: grid;
+  gap: 14px;
 }
 
 .clip-card {
   overflow: hidden;
-  border: 1px solid rgb(226 232 240);
-  border-radius: 8px;
-  background: rgb(248 250 252);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-muted);
 }
 
 .clip-video {
   display: grid;
   aspect-ratio: 9 / 16;
-  max-height: 360px;
+  max-height: 390px;
   place-items: center;
-  background: rgb(15 23 42);
+  background: #050b16;
   color: white;
 }
 
 .clip-video video {
-  height: 100%;
   width: 100%;
+  height: 100%;
   object-fit: contain;
 }
 
 .clip-body {
   display: grid;
-  gap: 13px;
-  padding: 14px;
+  gap: 12px;
+  padding: 13px;
 }
 
-.clip-body h3 {
+.clip-title-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.clip-title-row h3 {
   margin: 0;
-  font-size: 1rem;
+  color: var(--text);
+  font-size: 0.96rem;
+  font-weight: 850;
+  line-height: 1.35;
+}
+
+.clip-title-row p {
+  margin: 5px 0 0;
+  color: var(--text-muted);
+  font-size: 0.82rem;
+  line-height: 1.45;
+}
+
+.score {
+  display: inline-flex;
+  min-width: 52px;
+  min-height: 34px;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  border-radius: 7px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-weight: 900;
+}
+
+.metric-row {
+  justify-content: space-between;
+  gap: 8px;
+  color: var(--text-muted);
+  font-size: 0.8rem;
   font-weight: 750;
 }
 
-.clip-body p {
+.metric-row span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.clip-actions {
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.clip-actions button,
+.download-button {
+  padding: 0 10px;
+}
+
+.download-button {
+  margin-left: auto;
+  border-color: var(--primary);
+  background: var(--primary);
+  color: white;
+}
+
+:root[data-theme="dark"] .download-button {
+  color: #042f2e;
+}
+
+.editor-shell {
+  display: grid;
+  gap: 18px;
+  padding: 20px clamp(16px, 4vw, 44px) 44px;
+}
+
+.editor-topbar {
+  justify-content: space-between;
+  gap: 18px;
+}
+
+.editor-topbar > div {
+  flex: 1;
+}
+
+.editor-topbar p {
   margin: 4px 0 0;
-  color: rgb(71 85 105);
-  font-size: 0.86rem;
+  color: var(--text-muted);
 }
 
-.score {
-  min-width: 42px;
-  border-radius: 6px;
-  background: rgb(254 243 199);
-  padding: 6px 8px;
-  text-align: center;
-  font-weight: 850;
-  color: rgb(146 64 14);
+.ghost-button {
+  padding: 0 12px;
+}
+
+.editor-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
+  gap: 18px;
+  align-items: start;
+}
+
+.editor-main,
+.inspector-panel {
+  display: grid;
+  gap: 16px;
+}
+
+.editor-preview {
+  display: grid;
+  min-height: 520px;
+  max-height: 68vh;
+  place-items: center;
+  border-radius: var(--radius);
+  background: #050b16;
+  color: white;
+}
+
+.editor-preview video {
+  width: 100%;
+  height: 100%;
+  max-height: 68vh;
+  object-fit: contain;
+}
+
+.range-editor,
+.subtitle-editor {
+  display: grid;
+  gap: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-muted);
+  padding: 14px;
+}
+
+.timeline-visual {
+  position: relative;
+  height: 54px;
+  overflow: hidden;
+  border-radius: 7px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+}
+
+.timeline-fill {
+  position: absolute;
+  inset: 21px 14px;
+  border-radius: 999px;
+  background: var(--surface-strong);
+}
+
+.timeline-window {
+  position: absolute;
+  top: 14px;
+  height: 26px;
+  border: 2px solid var(--primary);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--primary) 24%, transparent);
+}
+
+.timeline-visual span {
+  position: absolute;
+  top: 18px;
+  width: 1px;
+  height: 18px;
+  background: var(--border-strong);
 }
 
 .timeline {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 68px;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 82px;
   align-items: end;
-  gap: 8px;
+  gap: 10px;
 }
 
 .timeline label {
-  display: block;
-  margin-bottom: 4px;
-  color: rgb(100 116 139);
+  display: grid;
+  gap: 5px;
+  color: var(--text-muted);
   font-size: 0.76rem;
-  font-weight: 700;
+  font-weight: 800;
 }
 
 .timeline input {
-  width: 100%;
-  min-height: 36px;
-  border: 1px solid rgb(203 213 225);
-  border-radius: 6px;
-  padding: 6px 8px;
+  min-height: 38px;
+  padding: 7px 9px;
 }
 
 .timeline strong {
-  min-height: 36px;
-  border-radius: 6px;
-  background: rgb(226 232 240);
-  padding: 8px;
+  min-height: 38px;
+  border-radius: 7px;
+  background: var(--surface-strong);
+  padding: 9px 8px;
+  color: var(--text);
   text-align: center;
   font-variant-numeric: tabular-nums;
 }
 
-textarea {
-  width: 100%;
-  resize: vertical;
-  border: 1px solid rgb(203 213 225);
-  border-radius: 6px;
-  padding: 9px 10px;
-  color: rgb(15 23 42);
+.cue-list {
+  display: grid;
+  gap: 10px;
 }
 
-.clip-actions {
-  display: flex;
-  flex-wrap: wrap;
+.cue-row {
+  display: grid;
+  grid-template-columns: 112px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+}
+
+.inspector-list {
+  display: grid;
+  gap: 12px;
+  margin: 0;
+}
+
+.inspector-list div {
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 10px;
+}
+
+.inspector-list dd {
+  margin: 4px 0 0;
+  color: var(--text);
+  line-height: 1.45;
+}
+
+.inspector-actions {
+  display: grid;
   gap: 8px;
 }
 
-.download-button {
-  margin-left: auto;
-  background: rgb(20 184 166);
-  border-color: rgb(20 184 166);
-  color: white;
+.inspector-actions a,
+.inspector-actions button {
+  min-height: 40px;
+  padding: 0 12px;
+}
+
+.inspector-actions .danger {
+  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+
+.mini-transcript {
+  display: grid;
+  gap: 10px;
+  border-top: 1px solid var(--border);
+  padding-top: 14px;
+}
+
+.mini-transcript div {
+  display: grid;
+  gap: 4px;
 }
 
 .error-box {
-  border: 1px solid rgb(251 113 133);
-  border-radius: 6px;
-  background: rgb(255 241 242);
+  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
+  border-radius: 7px;
+  background: var(--danger-soft);
   padding: 10px;
-  color: rgb(159 18 57);
+  color: var(--danger);
   font-size: 0.9rem;
+  line-height: 1.45;
+}
+
+.spin {
+  animation: spin 0.9s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 1260px) {
+  .workspace-grid {
+    grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
+  }
+
+  .results-column {
+    grid-column: 1 / -1;
+  }
+
+  .clip-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
-@media (max-width: 720px) {
-  .panel {
-    padding: 16px;
+@media (max-width: 900px) {
+  .app-header,
+  .editor-topbar {
+    align-items: flex-start;
+    flex-direction: column;
   }
 
+  .workspace-grid,
+  .editor-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .input-panel {
+    position: static;
+  }
+
+  .clip-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .step-list {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .editor-preview {
+    min-height: 420px;
+  }
+}
+
+@media (max-width: 620px) {
+  .form-grid-two,
+  .timeline,
+  .cue-row,
   .transcript-row {
     grid-template-columns: 1fr;
   }
+
+  .progress-percent {
+    font-size: 1.5rem;
+  }
+
+  .step-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }