feat(frontend): full UI redesign + fix editor navigation bug

Design:
- Dark-first design system with indigo primary, amber score badges
- fadeInUp animation on cards, shimmer on progress bar
- Hover effects: clip cards lift + scale, buttons brighten/shrink on active
- Explicit transitions (150-200ms) on all interactive elements
- Sidebar layout (320px fixed) + scrollable main column
- Editor page: sticky topbar + 60/40 video/controls split

Bug fix:
- Replace editorClip-derived routing with explicit view state
(view: 'dashboard' | 'editor') — eliminates race condition that
prevented editor from opening
- Remove problematic useEffect that reset editorClipId

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/App.jsx

@@ -901,6 +901,9 @@ const translations = {
   },
 };
 
+// ============================================================
+// App root
+// ============================================================
 function App() {
   const [profile, setProfile] = useState(defaultProfile);
   const [sourceMode, setSourceMode] = useState("youtube");
@@ -910,7 +913,11 @@ function App() {
   const [health, setHealth] = useState(null);
   const [error, setError] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Explicit view state — fixes the editor navigation bug
+  const [view, setView] = useState("dashboard"); // 'dashboard' | 'editor'
   const [editorClipId, setEditorClipId] = useState(null);
+
   const [captionStyles, setCaptionStyles] = useState(() => {
     try {
       return JSON.parse(localStorage.getItem("elevenclip.captionStyles") || "{}");
@@ -918,7 +925,9 @@ function App() {
       return {};
     }
   });
-  const [language, setLanguage] = useState(() => localStorage.getItem("elevenclip.language") || "en");
+  const [language, setLanguage] = useState(
+    () => localStorage.getItem("elevenclip.language") || "en"
+  );
   const [theme, setTheme] = useState(() => {
     const saved = localStorage.getItem("elevenclip.theme");
     if (saved) return saved;
@@ -939,11 +948,26 @@ function App() {
     () => (job?.clips || []).filter((clip) => !clip.deleted),
     [job?.clips]
   );
-  const editorClip = activeClips.find((clip) => clip.id === editorClipId);
+
+  // Derive the editor clip from view state — no useEffect reset needed
+  const editorClip =
+    view === "editor" && editorClipId
+      ? activeClips.find((clip) => clip.id === editorClipId) || null
+      : null;
+
   const editorCaptionStyle = editorClip
     ? { ...defaultCaptionStyle, ...(captionStyles[editorClip.id] || {}) }
     : defaultCaptionStyle;
 
+  // Navigation helpers
+  function openEditor(clip) {
+    setEditorClipId(clip.id);
+    setView("editor");
+  }
+  function closeEditor() {
+    setView("dashboard");
+  }
+
   useEffect(() => {
     document.documentElement.dataset.theme = theme;
     localStorage.setItem("elevenclip.theme", theme);
@@ -970,14 +994,11 @@ function App() {
     return () => window.clearInterval(timer);
   }, [job]);
 
-  useEffect(() => {
-    if (editorClipId && !editorClip) setEditorClipId(null);
-  }, [editorClip, editorClipId]);
-
   async function submitJob(event) {
     event.preventDefault();
     setError("");
     setIsSubmitting(true);
+    setView("dashboard");
     setEditorClipId(null);
     try {
       if (sourceMode === "youtube") {
@@ -1060,70 +1081,129 @@ function App() {
         t={t}
       />
 
-      {editorClip ? (
+      {view === "editor" && editorClipId && editorClip ? (
         <ClipEditorPage
           clip={editorClip}
           job={job}
           t={t}
-          onBack={() => setEditorClipId(null)}
+          onBack={closeEditor}
           onPatch={patchClip}
-          onDelete={(clip) => patchClip(clip.id, { deleted: true })}
+          onDelete={(clip) => {
+            patchClip(clip.id, { deleted: true });
+            closeEditor();
+          }}
           onApprove={(clip) => patchClip(clip.id, { approved: !clip.approved })}
           onRegenerate={regenerateClip}
           captionStyle={editorCaptionStyle}
           onCaptionStyleChange={(patch) => updateCaptionStyle(editorClip.id, patch)}
         />
       ) : (
-        <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>
-
-          <section className="center-column">
-            <ProgressPanel job={job} t={t} />
-            <TranscriptPanel job={job} t={t} />
-          </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>
+        <Dashboard
+          profile={profile}
+          setProfile={setProfile}
+          setProfileValue={setProfileValue}
+          sourceMode={sourceMode}
+          setSourceMode={setSourceMode}
+          youtubeUrl={youtubeUrl}
+          setYoutubeUrl={setYoutubeUrl}
+          file={file}
+          setFile={setFile}
+          error={error}
+          isSubmitting={isSubmitting}
+          submitJob={submitJob}
+          job={job}
+          activeClips={activeClips}
+          t={t}
+          onOpenEditor={openEditor}
+          onPatch={patchClip}
+          onDelete={(clip) => patchClip(clip.id, { deleted: true })}
+          onApprove={(clip) => patchClip(clip.id, { approved: !clip.approved })}
+          onRegenerate={regenerateClip}
+        />
       )}
     </main>
   );
 }
 
+// ============================================================
+// Dashboard layout
+// ============================================================
+function Dashboard({
+  profile,
+  setProfile,
+  setProfileValue,
+  sourceMode,
+  setSourceMode,
+  youtubeUrl,
+  setYoutubeUrl,
+  file,
+  setFile,
+  error,
+  isSubmitting,
+  submitJob,
+  job,
+  activeClips,
+  t,
+  onOpenEditor,
+  onPatch,
+  onDelete,
+  onApprove,
+  onRegenerate,
+}) {
+  return (
+    <div className="workspace-grid">
+      {/* Sidebar — profile form */}
+      <div className="sidebar-column">
+        <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>
+
+      {/* Main content column */}
+      <div className="main-column">
+        <ProgressPanel job={job} t={t} />
+        <TranscriptPanel job={job} t={t} />
+        <ClipsPanel
+          clips={activeClips}
+          t={t}
+          onOpenEditor={onOpenEditor}
+          onPatch={onPatch}
+          onDelete={onDelete}
+          onApprove={onApprove}
+          onRegenerate={onRegenerate}
+        />
+      </div>
+    </div>
+  );
+}
+
+// ============================================================
+// App Header
+// ============================================================
 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} />
+          <Scissors size={20} />
         </div>
         <div>
           <h1>ElevenClip.AI</h1>
@@ -1135,7 +1215,7 @@ function AppHeader({ job, health, language, setLanguage, theme, setTheme, t }) {
         <span className={`mode-pill ${modeClass}`}>{modeLabel}</span>
         <StatusPill status={status} t={t} />
         <label className="toolbar-select" title={t("language")}>
-          <Languages size={16} />
+          <Languages size={14} />
           <select value={language} onChange={(event) => setLanguage(event.target.value)}>
             {LANGUAGES.map((item) => (
               <option key={item.code} value={item.code}>
@@ -1150,13 +1230,23 @@ function AppHeader({ job, health, language, setLanguage, theme, setTheme, t }) {
           title={t("theme")}
           onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
         >
-          {theme === "dark" ? <Sun size={17} /> : <Moon size={17} />}
+          {theme === "dark" ? <Sun size={16} /> : <Moon size={16} />}
         </button>
       </div>
     </header>
   );
 }
 
+// ============================================================
+// Status pill
+// ============================================================
+function StatusPill({ status, t }) {
+  return <span className={`status-pill ${status}`}>{t(status)}</span>;
+}
+
+// ============================================================
+// Profile form (sidebar)
+// ============================================================
 function ProfileForm({
   t,
   profile,
@@ -1179,7 +1269,9 @@ function ProfileForm({
           <h2>{t("channelProfile")}</h2>
           <p>{t("channelProfileText")}</p>
         </div>
-        <SlidersHorizontal size={18} />
+        <div className="panel-heading-icon">
+          <SlidersHorizontal size={16} />
+        </div>
       </div>
 
       <SelectField
@@ -1255,7 +1347,9 @@ function ProfileForm({
         <div>
           <h2>{t("videoInput")}</h2>
         </div>
-        <Film size={18} />
+        <div className="panel-heading-icon">
+          <Film size={16} />
+        </div>
       </div>
 
       <div className="segmented">
@@ -1264,7 +1358,7 @@ function ProfileForm({
           className={sourceMode === "youtube" ? "active" : ""}
           onClick={() => setSourceMode("youtube")}
         >
-          <LinkIcon size={16} />
+          <LinkIcon size={14} />
           {t("youtube")}
         </button>
         <button
@@ -1272,7 +1366,7 @@ function ProfileForm({
           className={sourceMode === "upload" ? "active" : ""}
           onClick={() => setSourceMode("upload")}
         >
-          <Upload size={16} />
+          <Upload size={14} />
           {t("upload")}
         </button>
       </div>
@@ -1298,22 +1392,23 @@ function ProfileForm({
       )}
 
       {error && <div className="error-box">{error}</div>}
+
       <button
         className="primary-button"
+        style={{ width: "100%" }}
         disabled={isSubmitting || (sourceMode === "youtube" ? !youtubeUrl : !file)}
         type="submit"
       >
-        {isSubmitting ? <Loader2 className="spin" size={18} /> : <Wand2 size={18} />}
+        {isSubmitting ? <Loader2 className="spin" size={16} /> : <Wand2 size={16} />}
         {t("startPipeline")}
       </button>
     </form>
   );
 }
 
-function StatusPill({ status, t }) {
-  return <span className={`status-pill ${status}`}>{t(status)}</span>;
-}
-
+// ============================================================
+// Progress panel
+// ============================================================
 function ProgressPanel({ job, t }) {
   const progress = Math.round((job?.progress || 0) * 100);
   const steps = [
@@ -1342,15 +1437,17 @@ function ProgressPanel({ job, t }) {
         </div>
         <strong className="progress-percent">{progress}%</strong>
       </div>
+
       <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" : ""
+            className={`step-item${index < stepIndex ? " done" : ""}${
+              index === stepIndex ? " active" : ""
             }`}
           >
             <span>{index + 1}</span>
@@ -1358,7 +1455,10 @@ function ProgressPanel({ job, t }) {
           </div>
         ))}
       </div>
-      <p className="helper-text">{t("progressNote")}</p>
+
+      <p className="helper-text" style={{ marginTop: 12 }}>
+        {t("progressNote")}
+      </p>
 
       {job?.timings && Object.keys(job.timings).length > 0 && (
         <div className="timing-grid">
@@ -1370,11 +1470,15 @@ function ProgressPanel({ job, t }) {
           ))}
         </div>
       )}
-      {job?.error && <div className="error-box">{job.error}</div>}
+
+      {job?.error && <div className="error-box" style={{ marginTop: 12 }}>{job.error}</div>}
     </section>
   );
 }
 
+// ============================================================
+// Transcript panel
+// ============================================================
 function TranscriptPanel({ job, t }) {
   return (
     <section className="panel transcript-panel">
@@ -1383,14 +1487,16 @@ function TranscriptPanel({ job, t }) {
           <h2>{t("transcript")}</h2>
           {!job?.transcript?.length && <p>{t("transcriptEmpty")}</p>}
         </div>
-        <Captions size={18} />
+        <div className="panel-heading-icon">
+          <Captions size={16} />
+        </div>
       </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)}
+                {formatTime(segment.start_seconds)} – {formatTime(segment.end_seconds)}
               </span>
               <p>{segment.text}</p>
             </div>
@@ -1401,6 +1507,9 @@ function TranscriptPanel({ job, t }) {
   );
 }
 
+// ============================================================
+// Clips panel
+// ============================================================
 function ClipsPanel({ clips, t, onOpenEditor, onPatch, onDelete, onApprove, onRegenerate }) {
   return (
     <section className="panel clips-panel">
@@ -1411,12 +1520,14 @@ function ClipsPanel({ clips, t, onOpenEditor, onPatch, onDelete, onApprove, onRe
             {clips.length} {t("readyClips")}
           </p>
         </div>
-        <PanelRightOpen size={18} />
+        <div className="panel-heading-icon">
+          <Film size={16} />
+        </div>
       </div>
 
       {clips.length === 0 ? (
         <div className="empty-state">
-          <Film size={34} />
+          <Film size={32} />
           <h3>{t("noClips")}</h3>
           <p>{t("noClipsText")}</p>
         </div>
@@ -1440,55 +1551,104 @@ function ClipsPanel({ clips, t, onOpenEditor, onPatch, onDelete, onApprove, onRe
   );
 }
 
+// ============================================================
+// Clip card
+// ============================================================
 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={28} />
+        )}
       </div>
+
       <div className="clip-body">
-        <div className="clip-title-row">
-          <div>
-            <h3>{clip.title}</h3>
-            <p>{clip.reason}</p>
+        {/* Title + score */}
+        <div className="clip-meta">
+          <div style={{ minWidth: 0 }}>
+            <h3 className="clip-title">{clip.title}</h3>
+            <p className="clip-reason">{clip.reason}</p>
           </div>
-          <span className="score">
-            <Gauge size={14} />
+          <span className="score-badge">
+            <Gauge size={12} />
             {Math.round(clip.score)}
           </span>
         </div>
 
-        <div className="metric-row">
+        {/* Duration row */}
+        <div className="clip-duration-row">
           <span>
-            <Clock3 size={14} />
+            <Clock3 size={12} />
             {duration.toFixed(1)}s
           </span>
           <span>
-            {formatTime(clip.start_seconds)} - {formatTime(clip.end_seconds)}
+            {formatTime(clip.start_seconds)} – {formatTime(clip.end_seconds)}
           </span>
         </div>
 
-        <p className="subtitle-snippet">{clip.subtitle_text}</p>
+        {/* Subtitle snippet */}
+        {clip.subtitle_text && (
+          <p className="subtitle-snippet">{clip.subtitle_text}</p>
+        )}
 
+        {/* Action row */}
         <div className="clip-actions">
-          <button className="action-primary" type="button" title={t("openEditor")} onClick={() => onOpenEditor(clip)}>
-            <PanelRightOpen size={16} />
+          {/* Edit — primary style, full label */}
+          <button
+            className="btn btn-primary"
+            type="button"
+            title={t("openEditor")}
+            onClick={() => onOpenEditor(clip)}
+            style={{ justifyContent: "center" }}
+          >
+            <PanelRightOpen size={14} />
             {t("openEditor")}
           </button>
-          <button className="action-approve" type="button" title={t("approve")} onClick={() => onApprove(clip)}>
-            <Check size={16} />
-            {clip.approved ? t("approved") : t("approve")}
+
+          {/* Approve toggle */}
+          <button
+            className={`btn btn-icon ${clip.approved ? "btn-success" : ""}`}
+            type="button"
+            title={clip.approved ? t("approved") : t("approve")}
+            onClick={() => onApprove(clip)}
+          >
+            <Check size={14} />
           </button>
-          <button type="button" title={t("regenerate")} onClick={() => onRegenerate(clip)}>
-            <RefreshCcw size={16} />
+
+          {/* Regenerate */}
+          <button
+            className="btn btn-icon"
+            type="button"
+            title={t("regenerate")}
+            onClick={() => onRegenerate(clip)}
+          >
+            <RefreshCcw size={14} />
           </button>
-          <button type="button" title={t("delete")} onClick={() => onDelete(clip)}>
-            <Trash2 size={16} />
+
+          {/* Delete */}
+          <button
+            className="btn btn-icon btn-danger"
+            type="button"
+            title={t("delete")}
+            onClick={() => onDelete(clip)}
+          >
+            <Trash2 size={14} />
           </button>
+
+          {/* Download */}
           {clip.download_url && (
-            <a className="download-button" href={`${API_BASE}${clip.download_url}`} title={t("download")}>
-              <Download size={16} />
+            <a
+              className="btn btn-icon"
+              href={`${API_BASE}${clip.download_url}`}
+              title={t("download")}
+              style={{ borderColor: "var(--primary-dim)", background: "var(--primary-glow)", color: "var(--primary)" }}
+            >
+              <Download size={14} />
             </a>
           )}
         </div>
@@ -1497,6 +1657,9 @@ function ClipCard({ clip, t, onOpenEditor, onPatch, onDelete, onApprove, onRegen
   );
 }
 
+// ============================================================
+// Clip editor page — full page replacement
+// ============================================================
 function ClipEditorPage({
   clip,
   job,
@@ -1514,13 +1677,18 @@ function ClipEditorPage({
   const metadataModel = clip.metadata?.model || "unknown";
   const sourceKind = job?.source?.kind || "video";
   const activeCue = cues[0]?.text || clip.subtitle_text || clip.title;
+
   const timelineDuration = Math.max(
     clip.end_seconds,
     ...(job?.transcript || []).map((segment) => Number(segment.end_seconds || 0)),
     1
   );
   const rangeLeft = clamp((clip.start_seconds / timelineDuration) * 100, 0, 100);
-  const rangeWidth = clamp(((clip.end_seconds - clip.start_seconds) / timelineDuration) * 100, 1, 100);
+  const rangeWidth = clamp(
+    ((clip.end_seconds - clip.start_seconds) / timelineDuration) * 100,
+    1,
+    100
+  );
 
   function patchCue(index, text) {
     const next = cues.map((cue, cueIndex) => (cueIndex === index ? { ...cue, text } : cue));
@@ -1546,108 +1714,114 @@ function ClipEditorPage({
   }
 
   function setClipLength(seconds) {
-    onPatch(clip.id, { end_seconds: roundTime(clamp(clip.start_seconds + seconds, clip.start_seconds + 1, timelineDuration)) });
+    onPatch(clip.id, {
+      end_seconds: roundTime(
+        clamp(clip.start_seconds + seconds, clip.start_seconds + 1, timelineDuration)
+      ),
+    });
   }
 
   return (
     <div className="editor-shell">
+      {/* Sticky top bar */}
       <div className="editor-topbar">
         <button className="ghost-button" type="button" onClick={onBack}>
-          <ArrowLeft size={17} />
+          <ArrowLeft size={16} />
           {t("backToDashboard")}
         </button>
-        <div>
-          <h2>{t("editor")}</h2>
-          <p>{t("editorText")}</p>
+
+        <div className="editor-topbar-info">
+          <h2>{clip.title}</h2>
+          <p>
+            {t("editorText")} &nbsp;&middot;&nbsp; {formatTime(clip.start_seconds)} –{" "}
+            {formatTime(clip.end_seconds)}
+          </p>
         </div>
-      </div>
 
-      <div className="editor-grid">
-        <aside className="tool-rail" aria-label={t("editorTools")}>
-          <button type="button" className="active" title={t("toolSelect")}>
-            <PanelRightOpen size={18} />
-            <span>{t("toolSelect")}</span>
-          </button>
-          <button type="button" title={t("toolTrim")}>
-            <Scissors size={18} />
-            <span>{t("toolTrim")}</span>
-          </button>
-          <button type="button" title={t("toolCaptions")}>
-            <Captions size={18} />
-            <span>{t("toolCaptions")}</span>
-          </button>
-          <button type="button" title={t("toolStyle")}>
-            <SlidersHorizontal size={18} />
-            <span>{t("toolStyle")}</span>
-          </button>
-          <button type="button" title={t("toolExport")}>
-            <Download size={18} />
-            <span>{t("toolExport")}</span>
+        <div className="editor-topbar-actions">
+          <button
+            className={`btn ${clip.approved ? "btn-success" : ""}`}
+            type="button"
+            onClick={() => onApprove(clip)}
+          >
+            <Check size={14} />
+            {clip.approved ? t("approved") : t("approve")}
           </button>
-        </aside>
-
-        <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>
+          {clip.download_url && (
+            <a
+              className="btn btn-primary"
+              href={`${API_BASE}${clip.download_url}`}
+              title={t("download")}
+            >
+              <Download size={14} />
+              {t("download")}
+            </a>
+          )}
+        </div>
+      </div>
+
+      {/* Two-column body */}
+      <div className="editor-body">
+        {/* Left: video + controls */}
+        <div className="editor-left">
+          {/* Video preview */}
           <div className="editor-preview">
-            {clip.video_url ? <video controls src={`${API_BASE}${clip.video_url}`} /> : <Film size={44} />}
+            {clip.video_url ? (
+              <video controls src={`${API_BASE}${clip.video_url}`} />
+            ) : (
+              <Film size={40} />
+            )}
             <CaptionPreview text={activeCue} settings={captionStyle} />
           </div>
 
-          <div className="range-editor">
+          {/* Clip range section */}
+          <div className="section-panel">
             <div className="panel-heading compact">
               <div>
                 <h2>{t("clipRange")}</h2>
                 <p>
-                  {formatTime(clip.start_seconds)} - {formatTime(clip.end_seconds)}
+                  {formatTime(clip.start_seconds)} – {formatTime(clip.end_seconds)} &nbsp;·&nbsp;{" "}
+                  {duration.toFixed(1)}s
                 </p>
               </div>
-              <Scissors size={18} />
+              <div className="panel-heading-icon">
+                <Scissors size={14} />
+              </div>
             </div>
+
+            {/* Quick-trim toolbox */}
             <div className="editor-toolbox">
-              <span>{t("editorTools")}</span>
-              <button type="button" onClick={() => updateStart(clip.start_seconds - 0.5)}>
-                {t("trimStartBack")}
-              </button>
-              <button type="button" onClick={() => updateStart(clip.start_seconds + 0.5)}>
-                {t("trimStartForward")}
-              </button>
-              <button type="button" onClick={() => updateEnd(clip.end_seconds - 0.5)}>
-                {t("trimEndBack")}
-              </button>
-              <button type="button" onClick={() => updateEnd(clip.end_seconds + 0.5)}>
-                {t("trimEndForward")}
-              </button>
-              <button type="button" onClick={() => moveClip(-1)}>
-                {t("moveClipLeft")}
-              </button>
-              <button type="button" onClick={() => moveClip(1)}>
-                {t("moveClipRight")}
-              </button>
-              <button type="button" onClick={() => setClipLength(30)}>
-                {t("setClipLength30")}
-              </button>
-              <button type="button" onClick={() => setClipLength(60)}>
-                {t("setClipLength60")}
-              </button>
-              <button type="button" onClick={() => setClipLength(90)}>
-                {t("setClipLength90")}
-              </button>
+              <span className="editor-toolbox-label">{t("editorTools")}</span>
+              {[
+                [t("trimStartBack"), () => updateStart(clip.start_seconds - 0.5)],
+                [t("trimStartForward"), () => updateStart(clip.start_seconds + 0.5)],
+                [t("trimEndBack"), () => updateEnd(clip.end_seconds - 0.5)],
+                [t("trimEndForward"), () => updateEnd(clip.end_seconds + 0.5)],
+                [t("moveClipLeft"), () => moveClip(-1)],
+                [t("moveClipRight"), () => moveClip(1)],
+                [t("setClipLength30"), () => setClipLength(30)],
+                [t("setClipLength60"), () => setClipLength(60)],
+                [t("setClipLength90"), () => setClipLength(90)],
+              ].map(([label, handler]) => (
+                <button key={label} className="btn" type="button" onClick={handler}>
+                  {label}
+                </button>
+              ))}
             </div>
+
+            {/* Timeline visual */}
             <div className="timeline-visual">
               <div className="timeline-fill" />
-              <div className="timeline-window" style={{ left: `${rangeLeft}%`, width: `${rangeWidth}%` }} />
+              <div
+                className="timeline-window"
+                style={{ left: `${rangeLeft}%`, width: `${rangeWidth}%` }}
+              />
               {Array.from({ length: 9 }).map((_, index) => (
                 <span key={index} style={{ left: `${index * 12.5}%` }} />
               ))}
             </div>
+
+            {/* Range sliders */}
             <div className="range-sliders">
               <label>
                 <span>{t("rangeStart")}</span>
@@ -1672,6 +1846,8 @@ function ClipEditorPage({
                 />
               </label>
             </div>
+
+            {/* Numeric inputs */}
             <div className="timeline">
               <NumberField
                 label={t("start")}
@@ -1687,21 +1863,25 @@ function ClipEditorPage({
             </div>
           </div>
 
+          {/* Timeline tracks */}
           <TimelineTracks clip={clip} cues={cues} duration={timelineDuration} t={t} />
 
-          <div className="subtitle-editor">
+          {/* Subtitle cue editor */}
+          <div className="section-panel">
             <div className="panel-heading compact">
               <div>
                 <h2>{t("subtitleCues")}</h2>
                 <p>{t("subtitleCueHelp")}</p>
               </div>
-              <Captions size={18} />
+              <div className="panel-heading-icon">
+                <Captions size={14} />
+              </div>
             </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)}
+                    {formatTime(cue.start_seconds)} – {formatTime(cue.end_seconds)}
                   </span>
                   <textarea
                     defaultValue={cue.text}
@@ -1714,72 +1894,181 @@ function ClipEditorPage({
               ))}
             </div>
           </div>
-        </section>
+        </div>
 
-        <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>
+        {/* Right: inspector + caption style + mini transcript */}
+        <div className="editor-right">
+          {/* Inspector */}
+          <div className="section-panel">
+            <div className="panel-heading compact">
+              <div>
+                <h2>{t("inspector")}</h2>
+              </div>
+              <div className="panel-heading-icon">
+                <Sparkles size={14} />
+              </div>
             </div>
-            <div>
-              <dt>{t("source")}</dt>
-              <dd>{t(`source_${sourceKind}`)}</dd>
+
+            <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>{t(`source_${sourceKind}`)}</dd>
+              </div>
+            </dl>
+
+            <div className="inspector-actions" style={{ marginTop: 12 }}>
+              <button
+                className={`btn-primary ${clip.approved ? "btn-success" : "btn-primary"}`}
+                style={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: 7,
+                  minHeight: 38,
+                  padding: "0 14px",
+                  border: "1px solid",
+                  borderRadius: "var(--radius-sm)",
+                  fontSize: "0.84rem",
+                  fontWeight: 600,
+                  cursor: "pointer",
+                  transition: "all 150ms ease",
+                  borderColor: clip.approved
+                    ? "rgba(52,211,153,0.35)"
+                    : "var(--primary-dim)",
+                  background: clip.approved ? "var(--success-soft)" : "var(--primary-glow)",
+                  color: clip.approved ? "var(--success)" : "var(--primary)",
+                }}
+                type="button"
+                onClick={() => onApprove(clip)}
+              >
+                <Check size={14} />
+                {clip.approved ? t("approved") : t("approve")}
+              </button>
+
+              <button
+                className="inspector-actions"
+                style={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: 7,
+                  minHeight: 38,
+                  padding: "0 14px",
+                  border: "1px solid var(--border)",
+                  borderRadius: "var(--radius-sm)",
+                  background: "var(--surface2)",
+                  color: "var(--text-muted)",
+                  fontSize: "0.84rem",
+                  fontWeight: 600,
+                  cursor: "pointer",
+                  transition: "all 150ms ease",
+                  width: "100%",
+                }}
+                type="button"
+                onClick={() => onRegenerate(clip)}
+              >
+                <RefreshCcw size={14} />
+                {t("regenerate")}
+              </button>
+
+              {clip.download_url && (
+                <a
+                  style={{
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: 7,
+                    minHeight: 38,
+                    padding: "0 14px",
+                    border: "1px solid var(--primary-dim)",
+                    borderRadius: "var(--radius-sm)",
+                    background: "var(--primary-glow)",
+                    color: "var(--primary)",
+                    fontSize: "0.84rem",
+                    fontWeight: 600,
+                    textDecoration: "none",
+                    transition: "all 150ms ease",
+                  }}
+                  href={`${API_BASE}${clip.download_url}`}
+                >
+                  <Download size={14} />
+                  {t("download")}
+                </a>
+              )}
+
+              <button
+                style={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: 7,
+                  minHeight: 38,
+                  padding: "0 14px",
+                  border: "1px solid rgba(248,113,113,0.3)",
+                  borderRadius: "var(--radius-sm)",
+                  background: "var(--danger-soft)",
+                  color: "var(--danger)",
+                  fontSize: "0.84rem",
+                  fontWeight: 600,
+                  cursor: "pointer",
+                  transition: "all 150ms ease",
+                  width: "100%",
+                }}
+                type="button"
+                onClick={() => onDelete(clip)}
+              >
+                <Trash2 size={14} />
+                {t("delete")}
+              </button>
             </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>
 
-          <CaptionStylePanel t={t} settings={captionStyle} onChange={onCaptionStyleChange} />
+          {/* Caption style panel */}
+          <div className="section-panel">
+            <div className="panel-heading compact">
+              <div>
+                <h2>{t("captionStyle")}</h2>
+              </div>
+              <div className="panel-heading-icon">
+                <Captions size={14} />
+              </div>
+            </div>
+            <CaptionStylePanel t={t} settings={captionStyle} onChange={onCaptionStyleChange} />
+          </div>
 
-          <TranscriptMini transcript={job?.transcript || []} clip={clip} t={t} />
-        </aside>
+          {/* Mini transcript */}
+          <div className="section-panel">
+            <TranscriptMini transcript={job?.transcript || []} clip={clip} t={t} />
+          </div>
+        </div>
       </div>
     </div>
   );
 }
 
+// ============================================================
+// Caption preview (overlay on video)
+// ============================================================
 function CaptionPreview({ text, settings }) {
   const words = text.split(/\s+/).filter(Boolean);
   const litCount = Math.max(1, Math.ceil(words.length * 0.45));
@@ -1806,24 +2095,33 @@ function CaptionPreview({ text, settings }) {
   );
 }
 
+// ============================================================
+// Timeline tracks
+// ============================================================
 function TimelineTracks({ clip, cues, duration, t }) {
   const clipLeft = clamp((clip.start_seconds / duration) * 100, 0, 100);
   const clipWidth = clamp(((clip.end_seconds - clip.start_seconds) / duration) * 100, 4, 100);
   const subtitleItems = cues.slice(0, 8);
+
   return (
-    <div className="timeline-workbench">
+    <div className="section-panel">
       <div className="panel-heading compact">
         <div>
           <h2>{t("timelineTracks")}</h2>
           <p>
-            {formatTime(clip.start_seconds)} - {formatTime(clip.end_seconds)}
+            {formatTime(clip.start_seconds)} – {formatTime(clip.end_seconds)}
           </p>
         </div>
-        <Film size={18} />
+        <div className="panel-heading-icon">
+          <Film size={14} />
+        </div>
       </div>
       <div className="track-stack">
         <TrackRow label={t("videoTrack")}>
-          <div className="track-clip video" style={{ left: `${clipLeft}%`, width: `${clipWidth}%` }}>
+          <div
+            className="track-clip video"
+            style={{ left: `${clipLeft}%`, width: `${clipWidth}%` }}
+          >
             {clip.title}
           </div>
         </TrackRow>
@@ -1833,8 +2131,16 @@ function TimelineTracks({ clip, cues, duration, t }) {
               className="track-clip subtitle"
               key={`${cue.start_seconds}-${index}`}
               style={{
-                left: `${clamp(((clip.start_seconds + cue.start_seconds) / duration) * 100, 0, 100)}%`,
-                width: `${clamp(((cue.end_seconds - cue.start_seconds) / duration) * 100, 3, 45)}%`,
+                left: `${clamp(
+                  ((clip.start_seconds + cue.start_seconds) / duration) * 100,
+                  0,
+                  100
+                )}%`,
+                width: `${clamp(
+                  ((cue.end_seconds - cue.start_seconds) / duration) * 100,
+                  3,
+                  45
+                )}%`,
               }}
             >
               {cue.text}
@@ -1862,16 +2168,12 @@ function TrackRow({ label, children }) {
   );
 }
 
+// ============================================================
+// Caption style panel
+// ============================================================
 function CaptionStylePanel({ t, settings, onChange }) {
   return (
-    <section className="caption-style-panel">
-      <div className="panel-heading compact">
-        <div>
-          <h2>{t("captionStyle")}</h2>
-        </div>
-        <Captions size={18} />
-      </div>
-
+    <div className="caption-style-panel">
       <div className="preset-row">
         {Object.entries(captionPresets).map(([key, preset]) => (
           <button type="button" key={key} onClick={() => onChange(preset)}>
@@ -1902,7 +2204,11 @@ function CaptionStylePanel({ t, settings, onChange }) {
       </div>
 
       <div className="color-grid">
-        <ColorField label={t("fillColor")} value={settings.fillColor} onChange={(fillColor) => onChange({ fillColor })} />
+        <ColorField
+          label={t("fillColor")}
+          value={settings.fillColor}
+          onChange={(fillColor) => onChange({ fillColor })}
+        />
         <ColorField
           label={t("strokeColor")}
           value={settings.strokeColor}
@@ -1910,7 +2216,13 @@ function CaptionStylePanel({ t, settings, onChange }) {
         />
       </div>
 
-      <RangeControl label={t("fontSize")} value={settings.fontSize} min={24} max={64} onChange={(fontSize) => onChange({ fontSize })} />
+      <RangeControl
+        label={t("fontSize")}
+        value={settings.fontSize}
+        min={24}
+        max={64}
+        onChange={(fontSize) => onChange({ fontSize })}
+      />
       <RangeControl
         label={t("strokeWidth")}
         value={settings.strokeWidth}
@@ -1925,49 +2237,31 @@ function CaptionStylePanel({ t, settings, onChange }) {
         max={38}
         onChange={(position) => onChange({ position })}
       />
-    </section>
-  );
-}
-
-function ColorField({ label, value, onChange }) {
-  return (
-    <label className="color-field">
-      <span>{label}</span>
-      <input type="color" value={value} onChange={(event) => onChange(event.target.value)} />
-    </label>
-  );
-}
-
-function RangeControl({ label, value, min, max, onChange }) {
-  return (
-    <label className="range-control">
-      <span>
-        {label}
-        <strong>{value}</strong>
-      </span>
-      <input
-        type="range"
-        min={min}
-        max={max}
-        step="1"
-        value={value}
-        onChange={(event) => onChange(Number(event.target.value))}
-      />
-    </label>
+    </div>
   );
 }
 
+// ============================================================
+// Mini transcript (editor right column)
+// ============================================================
 function TranscriptMini({ transcript, clip, t }) {
   const rows = transcript.filter(
-    (segment) => segment.end_seconds >= clip.start_seconds && segment.start_seconds <= clip.end_seconds
+    (segment) =>
+      segment.end_seconds >= clip.start_seconds && segment.start_seconds <= clip.end_seconds
   );
+
   return (
     <div className="mini-transcript">
       <h3>{t("transcript")}</h3>
+      {rows.length === 0 && (
+        <p style={{ margin: 0, fontSize: "0.8rem", color: "var(--text-soft)" }}>
+          {t("transcriptEmpty")}
+        </p>
+      )}
       {rows.map((segment) => (
         <div key={segment.id}>
           <span>
-            {formatTime(segment.start_seconds)} - {formatTime(segment.end_seconds)}
+            {formatTime(segment.start_seconds)} – {formatTime(segment.end_seconds)}
           </span>
           <p>{segment.text}</p>
         </div>
@@ -1976,6 +2270,9 @@ function TranscriptMini({ transcript, clip, t }) {
   );
 }
 
+// ============================================================
+// Reusable form fields
+// ============================================================
 function TextField({ label, value, onChange, placeholder, helper }) {
   return (
     <label className="field-block">
@@ -2010,7 +2307,11 @@ function SelectField({ label, value, onChange, options, helper }) {
   return (
     <label className="field-block">
       <span className="field-label">{label}</span>
-      <select className="text-input" value={value} onChange={(event) => onChange(event.target.value)}>
+      <select
+        className="text-input"
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+      >
         {options.map((option) => (
           <option key={option.value} value={option.value}>
             {option.label}
@@ -2025,18 +2326,62 @@ function SelectField({ label, value, onChange, options, helper }) {
 function NumberField({ label, value, onChange }) {
   return (
     <label>
-      <span>{label}</span>
+      <span style={{ display: "block", fontSize: "0.74rem", fontWeight: 700, color: "var(--text-muted)", marginBottom: 5 }}>
+        {label}
+      </span>
       <input
         type="number"
         min="0"
         step="0.5"
         value={value}
         onChange={(event) => onChange(event.target.value)}
+        style={{
+          width: "100%",
+          minHeight: 36,
+          padding: "7px 10px",
+          border: "1px solid var(--border)",
+          borderRadius: "var(--radius-sm)",
+          background: "var(--surface)",
+          color: "var(--text)",
+          outline: "none",
+          fontVariantNumeric: "tabular-nums",
+        }}
       />
     </label>
   );
 }
 
+function ColorField({ label, value, onChange }) {
+  return (
+    <label className="color-field">
+      <span>{label}</span>
+      <input type="color" value={value} onChange={(event) => onChange(event.target.value)} />
+    </label>
+  );
+}
+
+function RangeControl({ label, value, min, max, onChange }) {
+  return (
+    <label className="range-control">
+      <span>
+        {label}
+        <strong>{value}</strong>
+      </span>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step="1"
+        value={value}
+        onChange={(event) => onChange(Number(event.target.value))}
+      />
+    </label>
+  );
+}
+
+// ============================================================
+// Utility functions — unchanged
+// ============================================================
 async function fetchJson(path, options) {
   const response = await fetch(`${API_BASE}${path}`, options);
   if (!response.ok) {
@@ -2053,14 +2398,16 @@ async function fetchJson(path, options) {
 }
 
 function getSubtitleCues(clip, duration, settings = defaultCaptionStyle) {
-  return splitSubtitleText(clip.subtitle_text || "", settings.cueDensity).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,
-    };
-  });
+  return splitSubtitleText(clip.subtitle_text || "", settings.cueDensity).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, density = "short") {
@@ -2085,8 +2432,14 @@ function splitSubtitleText(text, density = "short") {
   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 > limit.chars || current.length >= limit.words || punctuationBreak)) {
+    const punctuationBreak =
+      current.length > 0 && /[,.!?;:]$/.test(current[current.length - 1]);
+    if (
+      current.length > 0 &&
+      (candidate.length > limit.chars ||
+        current.length >= limit.words ||
+        punctuationBreak)
+    ) {
       chunks.push(current.join(" "));
       current = [word];
     } else {

frontend/src/styles.css

@@ -2,51 +2,92 @@
 @tailwind components;
 @tailwind utilities;
 
+/* ============================================================
+   ElevenClip.AI — Design System
+   Dark-first professional. Human-crafted feel.
+   ============================================================ */
+
 :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);
-}
-
-* {
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+
+  /* Core palette — dark (default) */
+  --bg:           #0a0c12;
+  --surface:      #13171f;
+  --surface2:     #1c2130;
+  --border:       #252d3f;
+  --border-strong:#2f3a52;
+
+  /* Brand */
+  --primary:      #818cf8;
+  --primary-dim:  #4f56b3;
+  --primary-glow: rgba(129,140,248,0.18);
+  --primary-ring: rgba(129,140,248,0.35);
+
+  /* Accent / score */
+  --accent:       #f59e0b;
+  --accent-soft:  rgba(245,158,11,0.12);
+
+  /* Semantic */
+  --success:      #34d399;
+  --success-soft: rgba(52,211,153,0.12);
+  --danger:       #f87171;
+  --danger-soft:  rgba(248,113,113,0.12);
+
+  /* Text */
+  --text:         #e2e8f0;
+  --text-muted:   #8896a8;
+  --text-soft:    #4a5568;
+
+  /* Shadows */
+  --shadow-sm:    0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
+  --shadow-md:    0 4px 16px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.3);
+  --shadow-lg:    0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4);
+  --shadow-glow:  0 0 0 1px var(--primary-ring), 0 8px 28px rgba(129,140,248,0.14);
+
+  --radius:       10px;
+  --radius-sm:    6px;
+  --radius-lg:    14px;
+}
+
+/* Light theme overrides */
+:root[data-theme="light"] {
+  color-scheme: light;
+  --bg:           #f0f2f7;
+  --surface:      #ffffff;
+  --surface2:     #f5f7fb;
+  --border:       #d8dde8;
+  --border-strong:#b6bece;
+
+  --primary:      #4f56e8;
+  --primary-dim:  #3b43d6;
+  --primary-glow: rgba(79,86,232,0.12);
+  --primary-ring: rgba(79,86,232,0.3);
+
+  --accent:       #d97706;
+  --accent-soft:  rgba(217,119,6,0.1);
+
+  --success:      #059669;
+  --success-soft: rgba(5,150,105,0.1);
+  --danger:       #dc2626;
+  --danger-soft:  rgba(220,38,38,0.1);
+
+  --text:         #111827;
+  --text-muted:   #4b5563;
+  --text-soft:    #9ca3af;
+
+  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
+  --shadow-md:    0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
+  --shadow-lg:    0 8px 32px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06);
+  --shadow-glow:  0 0 0 1px var(--primary-ring), 0 8px 28px rgba(79,86,232,0.1);
+}
+
+/* ============================================================
+   Base reset
+   ============================================================ */
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -54,6 +95,8 @@ body {
   margin: 0;
   background: var(--bg);
   color: var(--text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 button,
@@ -70,227 +113,306 @@ select {
 
 button:disabled {
   cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* ============================================================
+   Keyframe animations
+   ============================================================ */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes progress-shimmer {
+  0%   { background-position: -200% center; }
+  100% { background-position: 200% center; }
+}
+
+@keyframes caption-pop {
+  from { transform: translateX(-50%) scale(0.97); }
+  to   { transform: translateX(-50%) scale(1.04); }
+}
+
+@keyframes caption-bounce {
+  from { transform: translateX(-50%) translateY(0); }
+  to   { transform: translateX(-50%) translateY(-8px); }
+}
+
+@keyframes pulse-ring {
+  0%   { box-shadow: 0 0 0 0 var(--primary-ring); }
+  70%  { box-shadow: 0 0 0 6px transparent; }
+  100% { box-shadow: 0 0 0 0 transparent; }
 }
 
+/* ============================================================
+   App shell
+   ============================================================ */
 .app-shell {
   min-height: 100vh;
-  background:
-    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 60%, transparent), transparent 360px),
-    var(--bg);
+  background: var(--bg);
   color: var(--text);
 }
 
+/* ============================================================
+   Header
+   ============================================================ */
 .app-header {
   position: sticky;
   top: 0;
-  z-index: 20;
+  z-index: 30;
   display: flex;
-  min-height: 76px;
+  min-height: 72px;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
+  padding: 0 clamp(16px, 4vw, 48px);
   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;
+  background: rgba(10, 12, 18, 0.88);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+:root[data-theme="light"] .app-header {
+  background: rgba(255, 255, 255, 0.88);
 }
 
 .brand-block {
-  min-width: 0;
+  display: flex;
+  align-items: center;
   gap: 12px;
+  min-width: 0;
 }
 
 .brand-mark {
   display: grid;
-  width: 44px;
-  height: 44px;
-  flex: 0 0 auto;
   place-items: center;
-  border-radius: var(--radius);
-  background: #020617;
-  color: white;
+  width: 42px;
+  height: 42px;
+  flex: 0 0 auto;
+  border-radius: var(--radius-sm);
+  background: linear-gradient(135deg, var(--primary-dim), var(--primary));
+  color: #fff;
+  box-shadow: 0 2px 8px var(--primary-glow);
+  transition: box-shadow 150ms ease, transform 150ms ease;
 }
 
-.brand-block h1,
-.panel-heading h2,
-.editor-topbar h2,
-.mini-transcript h3 {
-  margin: 0;
-  color: var(--text);
-  letter-spacing: 0;
+.brand-mark:hover {
+  box-shadow: 0 4px 16px var(--primary-ring);
+  transform: scale(1.05);
 }
 
 .brand-block h1 {
-  font-size: 1.2rem;
+  margin: 0;
+  font-size: 1.15rem;
   font-weight: 800;
+  color: var(--text);
+  letter-spacing: -0.01em;
 }
 
-.brand-block p,
-.panel-heading p,
-.helper-text,
-.file-name {
+.brand-block p {
   margin: 2px 0 0;
+  font-size: 0.78rem;
   color: var(--text-muted);
-  font-size: 0.86rem;
-  line-height: 1.5;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 340px;
 }
 
 .header-actions {
+  display: flex;
+  align-items: center;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 8px;
 }
 
+/* ============================================================
+   Pills
+   ============================================================ */
 .mode-pill,
 .status-pill {
-  min-height: 34px;
-  border-radius: 999px;
-  border: 1px solid var(--border);
+  display: inline-flex;
+  align-items: center;
+  min-height: 30px;
   padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--surface2);
   color: var(--text-muted);
-  font-size: 0.76rem;
-  font-weight: 800;
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
   text-transform: uppercase;
+  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
 }
 
 .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);
+  border-color: rgba(52, 211, 153, 0.35);
+  background: var(--success-soft);
+  color: var(--success);
 }
 
 .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;
+  border-color: rgba(129, 140, 248, 0.35);
+  background: var(--primary-glow);
+  color: var(--primary);
+  animation: pulse-ring 2s ease-out infinite;
 }
 
 .status-pill.failed {
-  border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
+  border-color: rgba(248, 113, 113, 0.35);
   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;
+/* ============================================================
+   Toolbar controls
+   ============================================================ */
+.toolbar-select {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 34px;
+  padding: 0 10px;
   border: 1px solid var(--border);
-  border-radius: 7px;
+  border-radius: var(--radius-sm);
   background: var(--surface);
-  color: var(--text);
-  text-decoration: none;
+  color: var(--text-muted);
+  font-size: 0.82rem;
+  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
 }
 
-.toolbar-select {
-  padding: 0 8px;
-  background: var(--surface);
+.toolbar-select:hover {
+  border-color: var(--border-strong);
+  background: var(--surface2);
+  color: var(--text);
 }
 
 .toolbar-select select {
-  min-width: 52px;
   border: 0;
-  background: var(--surface);
-  color: var(--text);
-  -webkit-text-fill-color: var(--text);
+  background: transparent;
+  color: inherit;
   outline: none;
+  min-width: 44px;
+  -webkit-text-fill-color: currentColor;
 }
 
 .toolbar-select select option,
 .text-input option {
+  background: #1c2130;
+  color: #e2e8f0;
+}
+
+:root[data-theme="light"] .toolbar-select select option,
+:root[data-theme="light"] .text-input option {
   background: #ffffff;
   color: #111827;
 }
 
-:root[data-theme="dark"] .toolbar-select select option,
-:root[data-theme="dark"] .text-input option {
-  background: #111827;
-  color: #f8fafc;
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--text-muted);
+  text-decoration: none;
+  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
+}
+
+.icon-button:hover {
+  border-color: var(--border-strong);
+  background: var(--surface2);
+  color: var(--text);
+  transform: scale(1.08);
 }
 
-.icon-button {
-  width: 36px;
-  padding: 0;
+.icon-button:active {
+  transform: scale(0.94);
 }
 
+/* ============================================================
+   Layout — workspace
+   ============================================================ */
 .workspace-grid {
   display: grid;
-  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
-  gap: 14px;
+  grid-template-columns: 320px minmax(0, 1fr);
+  grid-template-rows: auto;
+  gap: 16px;
   align-items: start;
-  padding: 18px clamp(16px, 3vw, 40px) 36px;
+  padding: 20px clamp(16px, 3vw, 44px) 48px;
 }
 
-.center-column,
-.results-column,
-.form-stack {
+.sidebar-column {
+  position: sticky;
+  top: 88px;
+  max-height: calc(100vh - 104px);
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+
+.sidebar-column::-webkit-scrollbar {
+  width: 4px;
+}
+.sidebar-column::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 999px;
+}
+
+.main-column {
   display: grid;
-  align-content: start;
   gap: 16px;
+  align-content: start;
 }
 
+/* ============================================================
+   Panels
+   ============================================================ */
 .panel {
   border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: color-mix(in srgb, var(--surface) 96%, transparent);
-  box-shadow: var(--shadow);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: var(--shadow-sm);
+  animation: fadeInUp 240ms ease both;
 }
 
-.input-panel,
-.progress-panel,
-.transcript-panel,
-.clips-panel,
-.editor-main,
-.inspector-panel {
+.panel-body {
   padding: 18px;
 }
 
-.input-panel {
-  position: static;
-  overflow: visible;
-}
-
-.results-column {
-  grid-column: 1 / -1;
+.input-panel,
+.progress-panel,
+.transcript-panel,
+.clips-panel {
+  padding: 20px;
 }
 
 .panel-heading {
+  display: flex;
+  align-items: center;
   justify-content: space-between;
   gap: 12px;
+  margin-bottom: 16px;
 }
 
 .panel-heading.compact {
@@ -300,20 +422,44 @@ button:disabled {
 .panel-heading h2,
 .editor-topbar h2,
 .mini-transcript h3 {
-  font-size: 0.92rem;
-  font-weight: 850;
+  margin: 0;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
+  color: var(--text);
 }
 
-.divider {
-  height: 1px;
-  background: var(--border);
+.panel-heading p {
+  margin: 3px 0 0;
+  font-size: 0.82rem;
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+
+.panel-heading-icon {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-sm);
+  background: var(--surface2);
+  color: var(--text-muted);
+  flex: 0 0 auto;
+}
+
+/* ============================================================
+   Form elements
+   ============================================================ */
+.form-stack {
+  display: grid;
+  gap: 14px;
 }
 
 .form-grid-two {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 12px;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
 }
 
 .field-block {
@@ -322,257 +468,468 @@ button:disabled {
 }
 
 .field-label {
-  color: var(--text);
-  font-size: 0.82rem;
-  font-weight: 750;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  letter-spacing: 0.02em;
 }
 
 .text-input,
-.file-input,
 textarea,
-.timeline input {
+.file-input {
   width: 100%;
-  border: 1px solid var(--border-strong);
-  border-radius: 7px;
-  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface2);
   color: var(--text);
   outline: none;
+  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
 }
 
 .text-input,
 .file-input {
-  min-height: 42px;
-  padding: 9px 11px;
+  min-height: 40px;
+  padding: 8px 12px;
+  font-size: 0.88rem;
 }
 
 textarea {
   resize: vertical;
-  padding: 10px 11px;
-  line-height: 1.5;
+  padding: 9px 12px;
+  font-size: 0.88rem;
+  line-height: 1.55;
+}
+
+.text-input:hover,
+textarea:hover,
+.file-input:hover {
+  border-color: var(--border-strong);
 }
 
 .text-input:focus,
-.file-input:focus,
 textarea:focus,
-.timeline input:focus {
+.file-input:focus {
   border-color: var(--primary);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
+  background: var(--surface);
+  box-shadow: 0 0 0 3px var(--primary-ring);
+}
+
+.helper-text,
+.file-name {
+  margin: 0;
+  font-size: 0.76rem;
+  color: var(--text-soft);
+  line-height: 1.45;
+}
+
+.divider {
+  height: 1px;
+  background: var(--border);
 }
 
+/* ============================================================
+   Segmented control
+   ============================================================ */
 .segmented {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 4px;
-  border-radius: var(--radius);
-  background: var(--surface-muted);
-  padding: 4px;
+  gap: 3px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface2);
+  padding: 3px;
 }
 
 .segmented button {
   display: flex;
-  min-height: 40px;
   align-items: center;
   justify-content: center;
-  gap: 8px;
-  border: 0;
-  border-radius: 6px;
+  gap: 7px;
+  min-height: 36px;
+  border: 1px solid transparent;
+  border-radius: 5px;
   background: transparent;
   color: var(--text-muted);
+  font-size: 0.84rem;
+  font-weight: 600;
+  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.segmented button:hover {
+  color: var(--text);
+  background: rgba(255,255,255,0.04);
 }
 
 .segmented button.active {
+  border-color: var(--border);
   background: var(--surface);
   color: var(--text);
-  box-shadow: 0 1px 2px rgb(15 23 42 / 0.10);
+  box-shadow: var(--shadow-sm);
 }
 
+/* ============================================================
+   Buttons
+   ============================================================ */
 .primary-button {
-  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
   justify-content: center;
-  gap: 10px;
-  border: 1px solid var(--primary-strong);
-  border-radius: 7px;
-  background: var(--primary-strong);
-  color: white;
-  font-weight: 850;
+  gap: 8px;
+  min-height: 42px;
+  padding: 0 18px;
+  border: 1px solid var(--primary-dim);
+  border-radius: var(--radius-sm);
+  background: linear-gradient(135deg, var(--primary-dim), var(--primary));
+  color: #fff;
+  font-size: 0.88rem;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  transition: filter 150ms ease, transform 150ms ease, box-shadow 150ms ease;
+  box-shadow: 0 2px 8px var(--primary-glow);
+}
+
+.primary-button:hover:not(:disabled) {
+  filter: brightness(1.12);
+  box-shadow: 0 4px 16px var(--primary-ring);
 }
 
-:root[data-theme="dark"] .primary-button {
-  color: #042f2e;
+.primary-button:active:not(:disabled) {
+  transform: scale(0.97);
+  filter: brightness(0.95);
 }
 
 .primary-button:disabled {
-  opacity: 0.55;
+  opacity: 0.45;
 }
 
-.progress-percent {
+.ghost-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 36px;
+  padding: 0 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--text-muted);
+  font-size: 0.84rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
+}
+
+.ghost-button:hover {
+  background: var(--surface2);
+  border-color: var(--border-strong);
   color: var(--text);
+}
+
+.ghost-button:active {
+  transform: scale(0.97);
+}
+
+/* Inline action buttons (clip cards, inspector) */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 34px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface2);
+  color: var(--text-muted);
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
+  white-space: nowrap;
+}
+
+.btn:hover {
+  background: var(--surface);
+  border-color: var(--border-strong);
+  color: var(--text);
+  filter: brightness(1.08);
+}
+
+.btn:active {
+  transform: scale(0.95);
+}
+
+.btn-primary {
+  border-color: var(--primary-dim);
+  background: var(--primary-glow);
+  color: var(--primary);
+}
+
+.btn-primary:hover {
+  background: var(--primary);
+  color: #fff;
+  border-color: var(--primary);
+}
+
+.btn-success {
+  border-color: rgba(52,211,153,0.35);
+  background: var(--success-soft);
+  color: var(--success);
+}
+
+.btn-success:hover {
+  background: var(--success);
+  color: #0a0c12;
+  border-color: var(--success);
+}
+
+.btn-danger {
+  border-color: rgba(248,113,113,0.3);
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+
+.btn-danger:hover {
+  background: var(--danger);
+  color: #fff;
+  border-color: var(--danger);
+}
+
+.btn-icon {
+  width: 34px;
+  padding: 0;
+  flex: 0 0 auto;
+}
+
+/* ============================================================
+   Error / status boxes
+   ============================================================ */
+.error-box {
+  padding: 10px 14px;
+  border: 1px solid rgba(248,113,113,0.35);
+  border-radius: var(--radius-sm);
+  background: var(--danger-soft);
+  color: var(--danger);
+  font-size: 0.86rem;
+  line-height: 1.5;
+}
+
+/* ============================================================
+   Progress panel
+   ============================================================ */
+.progress-percent {
   font-size: 2rem;
+  font-weight: 800;
   font-variant-numeric: tabular-nums;
+  color: var(--text);
+  flex: 0 0 auto;
 }
 
 .progress-track {
-  height: 12px;
+  height: 8px;
   overflow: hidden;
   border-radius: 999px;
-  background: var(--surface-strong);
-  margin-top: 16px;
+  background: var(--surface2);
+  margin-top: 4px;
+  margin-bottom: 16px;
 }
 
 .progress-bar {
   height: 100%;
   border-radius: 999px;
-  background: linear-gradient(90deg, var(--primary), var(--accent));
-  transition: width 260ms ease;
+  background-size: 200% auto;
+  background-image: linear-gradient(90deg, var(--primary-dim), var(--primary), var(--accent), var(--primary));
+  animation: progress-shimmer 2.4s linear infinite;
+  transition: width 300ms ease;
 }
 
 .step-list {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
-  gap: 8px;
-  margin-top: 16px;
+  gap: 6px;
 }
 
 .step-item {
   display: grid;
-  gap: 6px;
-  min-width: 0;
+  gap: 5px;
   color: var(--text-soft);
-  font-size: 0.75rem;
-  font-weight: 750;
+  font-size: 0.7rem;
+  font-weight: 600;
 }
 
 .step-item span {
   display: grid;
-  width: 28px;
-  height: 28px;
+  width: 26px;
+  height: 26px;
   place-items: center;
   border: 1px solid var(--border);
-  border-radius: 999px;
-  background: var(--surface);
+  border-radius: 50%;
+  background: var(--surface2);
   font-variant-numeric: tabular-nums;
+  font-size: 0.7rem;
+  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
 }
 
 .step-item p {
   margin: 0;
   overflow-wrap: anywhere;
+  line-height: 1.35;
+}
+
+.step-item.done {
+  color: var(--success);
+}
+
+.step-item.done span {
+  border-color: rgba(52,211,153,0.5);
+  background: var(--success-soft);
+  color: var(--success);
 }
 
-.step-item.done,
 .step-item.active {
-  color: var(--text);
+  color: var(--primary);
 }
 
-.step-item.done span,
 .step-item.active span {
   border-color: var(--primary);
-  background: var(--primary-soft);
-  color: var(--primary-strong);
+  background: var(--primary-glow);
+  color: var(--primary);
 }
 
 .timing-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  gap: 10px;
-  margin-top: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
+  gap: 8px;
+  margin-top: 12px;
 }
 
 .timing-grid div {
+  padding: 10px 12px;
   border: 1px solid var(--border);
-  border-radius: 7px;
-  background: var(--surface-muted);
-  padding: 10px;
+  border-radius: var(--radius-sm);
+  background: var(--surface2);
 }
 
-.timing-grid span,
-.inspector-list dt,
-.cue-row span,
-.transcript-row span,
-.mini-transcript span {
+.timing-grid span {
+  display: block;
+  font-size: 0.7rem;
+  font-weight: 600;
   color: var(--text-muted);
-  font-size: 0.76rem;
-  font-weight: 750;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 .timing-grid strong {
   display: block;
   margin-top: 4px;
-  color: var(--text);
-  font-size: 1.02rem;
+  font-size: 1.1rem;
+  font-weight: 700;
   font-variant-numeric: tabular-nums;
+  color: var(--text);
 }
 
+/* ============================================================
+   Transcript panel
+   ============================================================ */
 .transcript-list {
   display: grid;
-  max-height: 420px;
-  overflow: auto;
-  gap: 8px;
-  padding-right: 6px;
+  gap: 6px;
+  max-height: 380px;
+  overflow-y: auto;
+  padding-right: 4px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
 }
 
 .transcript-row {
   display: grid;
-  grid-template-columns: 112px 1fr;
-  gap: 12px;
-  border-bottom: 1px solid var(--border);
+  grid-template-columns: 108px 1fr;
+  gap: 10px;
   padding-bottom: 8px;
+  border-bottom: 1px solid var(--border);
 }
 
-.transcript-row p,
-.mini-transcript p {
+.transcript-row span {
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+  padding-top: 2px;
+}
+
+.transcript-row p {
   margin: 0;
+  font-size: 0.86rem;
   color: var(--text);
-  font-size: 0.9rem;
   line-height: 1.55;
 }
 
+/* ============================================================
+   Empty state
+   ============================================================ */
 .empty-state {
   display: grid;
-  min-height: 280px;
+  min-height: 260px;
   place-items: center;
   align-content: center;
   gap: 10px;
   border: 1px dashed var(--border-strong);
   border-radius: var(--radius);
-  background: var(--surface-muted);
+  background: var(--surface2);
   color: var(--text-muted);
   text-align: center;
+  padding: 32px 24px;
 }
 
 .empty-state h3 {
   margin: 0;
-  color: var(--text);
   font-size: 1rem;
+  font-weight: 700;
+  color: var(--text);
 }
 
 .empty-state p {
-  max-width: 270px;
+  max-width: 260px;
   margin: 0;
-  line-height: 1.5;
+  font-size: 0.84rem;
+  line-height: 1.55;
 }
 
+/* ============================================================
+   Clip grid & cards
+   ============================================================ */
 .clip-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 14px;
   align-items: start;
 }
 
 .clip-card {
+  display: grid;
   overflow: hidden;
   border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--surface-muted);
-  min-width: 0;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: var(--shadow-sm);
+  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
+  animation: fadeInUp 240ms ease both;
+  cursor: default;
+}
+
+.clip-card:hover {
+  transform: translateY(-3px) scale(1.012);
+  box-shadow: var(--shadow-md), 0 0 0 1px var(--border-strong);
+  border-color: var(--border-strong);
 }
 
 .clip-video {
   display: grid;
   aspect-ratio: 9 / 16;
-  max-height: 300px;
+  max-height: 240px;
   place-items: center;
-  background: #050b16;
-  color: white;
+  background: #070b14;
+  color: var(--text-soft);
+  overflow: hidden;
 }
 
 .clip-video video {
@@ -583,209 +940,205 @@ textarea:focus,
 
 .clip-body {
   display: grid;
-  gap: 12px;
-  padding: 13px;
+  gap: 10px;
+  padding: 14px;
 }
 
-.clip-title-row {
+/* Title row: title + score badge side by side */
+.clip-meta {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 10px;
 }
 
-.clip-title-row h3 {
+.clip-title {
   margin: 0;
+  font-size: 0.9rem;
+  font-weight: 700;
   color: var(--text);
-  font-size: 0.96rem;
-  font-weight: 850;
   line-height: 1.35;
 }
 
-.clip-title-row p {
-  margin: 5px 0 0;
+.clip-reason {
+  margin: 4px 0 0;
+  font-size: 0.78rem;
   color: var(--text-muted);
-  font-size: 0.82rem;
   line-height: 1.45;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
 }
 
-.score {
+.score-badge {
   display: inline-flex;
+  align-items: center;
+  gap: 4px;
   min-width: 52px;
-  min-height: 34px;
+  height: 28px;
   flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  border-radius: 7px;
+  padding: 0 8px;
+  border-radius: 999px;
   background: var(--accent-soft);
+  border: 1px solid rgba(245,158,11,0.25);
   color: var(--accent);
-  font-weight: 900;
+  font-size: 0.78rem;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
 }
 
-.metric-row {
+.clip-duration-row {
+  display: flex;
+  align-items: center;
   justify-content: space-between;
   gap: 8px;
+  font-size: 0.76rem;
+  font-weight: 600;
   color: var(--text-muted);
-  font-size: 0.8rem;
-  font-weight: 750;
 }
 
-.metric-row span {
+.clip-duration-row span {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
-}
-
-.clip-actions {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
-  gap: 8px;
-}
-
-.clip-actions button,
-.download-button {
-  min-width: 38px;
-  padding: 0 10px;
-  white-space: nowrap;
-}
-
-.clip-actions button:not(.action-primary):not(.action-approve),
-.download-button {
-  width: 38px;
-  padding: 0;
-}
-
-.clip-actions .action-approve {
-  min-width: 92px;
+  gap: 4px;
 }
 
 .subtitle-snippet {
-  display: -webkit-box;
-  min-height: 54px;
   margin: 0;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
+  padding: 8px 10px;
   border: 1px solid var(--border);
-  border-radius: 7px;
-  background: var(--surface);
-  color: var(--text);
-  font-size: 0.84rem;
-  line-height: 1.45;
-  padding: 10px;
-}
-
-.download-button {
-  margin-left: auto;
-  border-color: var(--primary);
-  background: var(--primary);
-  color: white;
+  border-radius: var(--radius-sm);
+  background: var(--surface2);
+  color: var(--text-muted);
+  font-size: 0.78rem;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  min-height: 46px;
 }
 
-:root[data-theme="dark"] .download-button {
-  color: #042f2e;
+/* Clip action row */
+.clip-actions {
+  display: grid;
+  grid-template-columns: 1fr auto auto auto auto;
+  gap: 6px;
+  align-items: center;
 }
 
+/* ============================================================
+   Editor page
+   ============================================================ */
 .editor-shell {
-  display: grid;
-  gap: 14px;
-  padding: 18px clamp(16px, 3vw, 40px) 32px;
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - 72px);
+  padding: 0;
 }
 
 .editor-topbar {
-  justify-content: space-between;
-  gap: 18px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px clamp(16px, 3vw, 44px);
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+  position: sticky;
+  top: 72px;
+  z-index: 20;
 }
 
-.editor-topbar > div {
+.editor-topbar-info {
   flex: 1;
+  min-width: 0;
 }
 
-.editor-topbar p {
-  margin: 4px 0 0;
-  color: var(--text-muted);
-}
-
-.ghost-button {
-  padding: 0 12px;
+.editor-topbar-info h2 {
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.editor-grid {
-  display: grid;
-  grid-template-columns: 74px minmax(0, 1fr) minmax(330px, 420px);
-  gap: 14px;
-  align-items: start;
+.editor-topbar-info p {
+  margin: 3px 0 0;
+  font-size: 0.76rem;
+  color: var(--text-muted);
 }
 
-.tool-rail {
-  position: sticky;
-  top: 96px;
-  display: grid;
+.editor-topbar-actions {
+  display: flex;
+  align-items: center;
   gap: 8px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: color-mix(in srgb, var(--surface) 96%, transparent);
-  padding: 8px;
-  box-shadow: var(--shadow);
+  flex: 0 0 auto;
 }
 
-.tool-rail button {
+.editor-body {
   display: grid;
-  min-height: 58px;
-  place-items: center;
-  gap: 4px;
-  border: 1px solid transparent;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--text-muted);
-  font-size: 0.68rem;
-  font-weight: 800;
+  grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr);
+  gap: 0;
+  flex: 1;
+  align-items: start;
 }
 
-.tool-rail button.active,
-.tool-rail button:hover {
-  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
-  background: var(--primary-soft);
-  color: var(--primary-strong);
+.editor-left {
+  padding: 20px clamp(12px, 2vw, 28px) 32px;
+  border-right: 1px solid var(--border);
+  display: grid;
+  gap: 20px;
+  align-content: start;
 }
 
-.editor-main,
-.inspector-panel {
+.editor-right {
+  padding: 20px clamp(12px, 2vw, 24px) 32px;
   display: grid;
-  gap: 16px;
+  gap: 20px;
+  align-content: start;
+  max-height: calc(100vh - 132px);
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+  position: sticky;
+  top: 132px;
 }
 
+/* ============================================================
+   Editor preview
+   ============================================================ */
 .editor-preview {
-  display: grid;
   position: relative;
-  min-height: 520px;
-  max-height: 68vh;
-  overflow: hidden;
+  display: grid;
   place-items: center;
-  border-radius: var(--radius);
-  background: #050b16;
-  color: white;
+  min-height: 400px;
+  max-height: 60vh;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: #050810;
+  color: var(--text-soft);
 }
 
 .editor-preview video {
   width: 100%;
   height: 100%;
-  max-height: 68vh;
+  max-height: 60vh;
   object-fit: contain;
 }
 
 .caption-preview {
   position: absolute;
   left: 50%;
-  width: min(82%, 760px);
+  width: min(84%, 640px);
   transform: translateX(-50%);
-  color: white;
   font-weight: 900;
   letter-spacing: 0;
-  line-height: 1.08;
+  line-height: 1.1;
   text-align: center;
-  text-transform: none;
   pointer-events: none;
 }
 
@@ -801,137 +1154,101 @@ textarea:focus,
   animation: caption-bounce 760ms ease-in-out infinite alternate;
 }
 
-@keyframes caption-pop {
-  from {
-    transform: translateX(-50%) scale(0.98);
-  }
-  to {
-    transform: translateX(-50%) scale(1.04);
-  }
+/* ============================================================
+   Range editor / timeline
+   ============================================================ */
+.section-panel {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface2);
+  padding: 16px;
+}
+
+.section-panel .panel-heading {
+  margin-bottom: 14px;
 }
 
-@keyframes caption-bounce {
-  from {
-    transform: translateX(-50%) translateY(0);
-  }
-  to {
-    transform: translateX(-50%) translateY(-8px);
-  }
+.editor-toolbox {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: 2px;
 }
 
-.range-editor,
-.subtitle-editor,
-.timeline-workbench,
-.caption-style-panel {
-  display: grid;
-  gap: 12px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--surface-muted);
-  padding: 14px;
+.editor-toolbox-label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-right: 4px;
+  flex: 0 0 auto;
 }
 
 .timeline-visual {
   position: relative;
-  height: 54px;
+  height: 48px;
   overflow: hidden;
-  border-radius: 7px;
-  background: var(--surface);
   border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
 }
 
 .timeline-fill {
   position: absolute;
-  inset: 21px 14px;
+  inset: 20px 12px;
   border-radius: 999px;
-  background: var(--surface-strong);
+  background: var(--surface2);
 }
 
 .timeline-window {
   position: absolute;
-  top: 14px;
+  top: 11px;
   height: 26px;
   border: 2px solid var(--primary);
   border-radius: 999px;
-  background: color-mix(in srgb, var(--primary) 24%, transparent);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
+  background: var(--primary-glow);
+  box-shadow: 0 0 8px var(--primary-glow);
+  transition: left 120ms ease, width 120ms ease;
 }
 
 .timeline-window::before,
 .timeline-window::after {
+  content: "";
   position: absolute;
-  top: 4px;
+  top: 5px;
   width: 2px;
-  height: 14px;
+  height: 12px;
   border-radius: 999px;
-  background: var(--primary-strong);
-  content: "";
-}
-
-.timeline-window::before {
-  left: 8px;
+  background: var(--primary);
 }
 
-.timeline-window::after {
-  right: 8px;
-}
+.timeline-window::before { left: 7px; }
+.timeline-window::after  { right: 7px; }
 
 .timeline-visual span {
   position: absolute;
-  top: 18px;
+  top: 16px;
   width: 1px;
-  height: 18px;
-  background: var(--border-strong);
-}
-
-.timeline {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 82px;
-  align-items: end;
-  gap: 10px;
-}
-
-.editor-toolbox {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-.editor-toolbox span {
-  margin-right: 2px;
-  color: var(--text);
-  font-size: 0.82rem;
-  font-weight: 850;
-}
-
-.editor-toolbox button {
-  min-height: 34px;
-  border: 1px solid var(--border);
-  border-radius: 7px;
-  background: var(--surface);
-  color: var(--text);
-  padding: 0 10px;
-  font-size: 0.82rem;
-  font-weight: 750;
-}
-
-.editor-toolbox button:hover {
-  border-color: var(--primary);
+  height: 16px;
+  background: var(--border);
 }
 
 .range-sliders {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  grid-template-columns: 1fr 1fr;
   gap: 12px;
 }
 
 .range-sliders label {
   display: grid;
-  gap: 6px;
+  gap: 5px;
+  font-size: 0.74rem;
+  font-weight: 700;
   color: var(--text-muted);
-  font-size: 0.76rem;
-  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 .range-sliders input[type="range"] {
@@ -939,29 +1256,55 @@ textarea:focus,
   accent-color: var(--primary);
 }
 
+.timeline {
+  display: grid;
+  grid-template-columns: 1fr 1fr 72px;
+  gap: 10px;
+  align-items: end;
+}
+
 .timeline label {
   display: grid;
   gap: 5px;
+  font-size: 0.74rem;
+  font-weight: 700;
   color: var(--text-muted);
-  font-size: 0.76rem;
-  font-weight: 800;
 }
 
 .timeline input {
-  min-height: 38px;
-  padding: 7px 9px;
+  width: 100%;
+  min-height: 36px;
+  padding: 7px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--text);
+  outline: none;
+  font-variant-numeric: tabular-nums;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.timeline input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px var(--primary-ring);
 }
 
 .timeline strong {
-  min-height: 38px;
-  border-radius: 7px;
-  background: var(--surface-strong);
-  padding: 9px 8px;
-  color: var(--text);
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  border-radius: var(--radius-sm);
+  background: var(--surface2);
+  color: var(--text-muted);
+  font-size: 0.82rem;
   font-variant-numeric: tabular-nums;
+  border: 1px solid var(--border);
 }
 
+/* ============================================================
+   Timeline tracks workbench
+   ============================================================ */
 .track-stack {
   display: grid;
   gap: 8px;
@@ -969,99 +1312,133 @@ textarea:focus,
 
 .track-row {
   display: grid;
-  grid-template-columns: 92px minmax(0, 1fr);
+  grid-template-columns: 80px 1fr;
   gap: 10px;
   align-items: center;
 }
 
 .track-row > span {
+  font-size: 0.72rem;
+  font-weight: 700;
   color: var(--text-muted);
-  font-size: 0.75rem;
-  font-weight: 850;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 
 .track-lane {
   position: relative;
-  min-height: 42px;
+  min-height: 38px;
   overflow: hidden;
   border: 1px solid var(--border);
-  border-radius: 7px;
+  border-radius: var(--radius-sm);
   background:
     repeating-linear-gradient(
       90deg,
       transparent 0,
       transparent 11.8%,
-      color-mix(in srgb, var(--border) 70%, transparent) 12%,
+      rgba(255,255,255,0.03) 12%,
       transparent 12.2%
     ),
-    var(--surface);
+    var(--surface2);
 }
 
 .track-clip {
   position: absolute;
-  top: 7px;
-  bottom: 7px;
+  top: 5px;
+  bottom: 5px;
   display: flex;
-  min-width: 54px;
+  min-width: 44px;
   align-items: center;
   overflow: hidden;
-  border-radius: 6px;
-  color: #042f2e;
-  font-size: 0.72rem;
-  font-weight: 850;
-  padding: 0 8px;
-  text-overflow: ellipsis;
+  border-radius: 5px;
+  font-size: 0.68rem;
+  font-weight: 700;
+  padding: 0 7px;
   white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .track-clip.video {
-  background: linear-gradient(90deg, #5eead4, #22c55e);
+  background: linear-gradient(90deg, var(--primary-dim), var(--primary));
+  color: #fff;
 }
 
 .track-clip.subtitle {
-  background: #fde68a;
-  color: #422006;
+  background: var(--accent-soft);
+  border: 1px solid rgba(245,158,11,0.25);
+  color: var(--accent);
 }
 
 .waveform {
   position: absolute;
-  inset: 8px 10px;
+  inset: 6px 8px;
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 3px;
 }
 
 .waveform span {
-  width: 4px;
+  width: 3px;
   border-radius: 999px;
-  background: color-mix(in srgb, var(--primary) 70%, var(--text-soft));
+  background: var(--primary);
+  opacity: 0.6;
 }
 
+/* ============================================================
+   Subtitle cue editor
+   ============================================================ */
 .cue-list {
   display: grid;
-  gap: 10px;
+  gap: 8px;
 }
 
 .cue-row {
   display: grid;
-  grid-template-columns: 112px minmax(0, 1fr);
-  gap: 10px;
+  grid-template-columns: 104px 1fr;
+  gap: 8px;
   align-items: start;
 }
 
+.cue-row > span {
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+  padding-top: 10px;
+}
+
+/* ============================================================
+   Inspector panel
+   ============================================================ */
 .inspector-list {
   display: grid;
-  gap: 12px;
+  gap: 10px;
   margin: 0;
 }
 
 .inspector-list div {
-  border-bottom: 1px solid var(--border);
+  display: grid;
+  gap: 3px;
   padding-bottom: 10px;
+  border-bottom: 1px solid var(--border);
+}
+
+.inspector-list div:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.inspector-list dt {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
 }
 
 .inspector-list dd {
-  margin: 4px 0 0;
+  margin: 0;
+  font-size: 0.86rem;
   color: var(--text);
   line-height: 1.45;
 }
@@ -1073,33 +1450,101 @@ textarea:focus,
 
 .inspector-actions a,
 .inspector-actions button {
-  min-height: 40px;
-  padding: 0 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-height: 38px;
+  padding: 0 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface2);
+  color: var(--text-muted);
+  font-size: 0.84rem;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
+}
+
+.inspector-actions a:hover,
+.inspector-actions button:hover {
+  background: var(--surface);
+  border-color: var(--border-strong);
+  color: var(--text);
+}
+
+.inspector-actions button:active,
+.inspector-actions a:active {
+  transform: scale(0.97);
+}
+
+.inspector-actions .btn-success {
+  border-color: rgba(52,211,153,0.35);
+  background: var(--success-soft);
+  color: var(--success);
+}
+
+.inspector-actions .btn-success:hover {
+  background: var(--success);
+  color: #0a0c12;
 }
 
-.inspector-actions .danger {
-  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
+.inspector-actions .btn-danger {
+  border-color: rgba(248,113,113,0.3);
   background: var(--danger-soft);
   color: var(--danger);
 }
 
+.inspector-actions .btn-danger:hover {
+  background: var(--danger);
+  color: #fff;
+}
+
+.inspector-actions .btn-primary {
+  border-color: var(--primary-dim);
+  background: var(--primary-glow);
+  color: var(--primary);
+}
+
+.inspector-actions .btn-primary:hover {
+  background: var(--primary);
+  color: #fff;
+}
+
+/* ============================================================
+   Caption style panel
+   ============================================================ */
 .caption-style-panel {
-  background: color-mix(in srgb, var(--surface-muted) 92%, var(--surface));
+  display: grid;
+  gap: 12px;
 }
 
 .preset-row {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 8px;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 7px;
 }
 
 .preset-row button {
-  min-height: 36px;
+  min-height: 34px;
   border: 1px solid var(--border);
-  border-radius: 7px;
-  background: var(--surface);
-  color: var(--text);
-  font-weight: 800;
+  border-radius: var(--radius-sm);
+  background: var(--surface2);
+  color: var(--text-muted);
+  font-size: 0.78rem;
+  font-weight: 700;
+  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
+}
+
+.preset-row button:hover {
+  background: var(--primary-glow);
+  border-color: var(--primary-dim);
+  color: var(--primary);
+}
+
+.preset-row button:active {
+  transform: scale(0.95);
 }
 
 .style-grid,
@@ -1115,16 +1560,18 @@ textarea:focus,
 .color-field,
 .range-control {
   display: grid;
-  gap: 7px;
+  gap: 6px;
 }
 
 .color-field span,
 .range-control span {
   display: flex;
   justify-content: space-between;
+  font-size: 0.72rem;
+  font-weight: 700;
   color: var(--text-muted);
-  font-size: 0.76rem;
-  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 .range-control strong {
@@ -1134,114 +1581,146 @@ textarea:focus,
 
 .color-field input {
   width: 100%;
-  height: 38px;
+  height: 36px;
   border: 1px solid var(--border);
-  border-radius: 7px;
-  background: var(--surface);
-  padding: 4px;
+  border-radius: var(--radius-sm);
+  background: var(--surface2);
+  padding: 3px;
+  cursor: pointer;
+  transition: border-color 150ms ease;
 }
 
-.range-control input {
+.color-field input:hover {
+  border-color: var(--border-strong);
+}
+
+.range-control input[type="range"] {
   width: 100%;
   accent-color: var(--primary);
 }
 
+/* ============================================================
+   Mini transcript
+   ============================================================ */
 .mini-transcript {
   display: grid;
-  gap: 10px;
-  border-top: 1px solid var(--border);
-  padding-top: 14px;
+  gap: 8px;
 }
 
-.mini-transcript div {
+.mini-transcript h3 {
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--text-muted);
+  margin: 0 0 4px;
+}
+
+.mini-transcript > div {
   display: grid;
-  gap: 4px;
+  gap: 3px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border);
 }
 
-.error-box {
-  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
-  border-radius: 7px;
-  background: var(--danger-soft);
-  padding: 10px;
-  color: var(--danger);
-  font-size: 0.9rem;
-  line-height: 1.45;
+.mini-transcript > div:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.mini-transcript span {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.mini-transcript p {
+  margin: 0;
+  font-size: 0.82rem;
+  color: var(--text);
+  line-height: 1.5;
 }
 
+/* ============================================================
+   Utility
+   ============================================================ */
 .spin {
-  animation: spin 0.9s linear infinite;
+  animation: spin 0.85s linear infinite;
 }
 
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
+/* ============================================================
+   Responsive — 1300px
+   ============================================================ */
+@media (max-width: 1300px) {
+  .workspace-grid {
+    grid-template-columns: 290px minmax(0, 1fr);
   }
 }
 
-@media (max-width: 1260px) {
+/* ============================================================
+   Responsive — 1000px
+   ============================================================ */
+@media (max-width: 1000px) {
   .workspace-grid {
-    grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
+    grid-template-columns: 1fr;
+  }
+
+  .sidebar-column {
+    position: static;
+    max-height: none;
+    overflow: visible;
   }
 
-  .editor-grid {
-    grid-template-columns: 64px minmax(0, 1fr);
+  .editor-body {
+    grid-template-columns: 1fr;
   }
 
-  .inspector-panel {
-    grid-column: 1 / -1;
+  .editor-left {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
   }
 
-  .results-column {
-    grid-column: 1 / -1;
+  .editor-right {
+    position: static;
+    max-height: none;
+    overflow: visible;
   }
 
   .clip-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+
+  .step-list {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
 }
 
-@media (max-width: 900px) {
-  .app-header,
-  .editor-topbar {
+/* ============================================================
+   Responsive — 720px
+   ============================================================ */
+@media (max-width: 720px) {
+  .app-header {
     align-items: flex-start;
     flex-direction: column;
+    padding-top: 12px;
+    padding-bottom: 12px;
+    gap: 10px;
   }
 
-  .workspace-grid,
-  .editor-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .tool-rail {
-    position: static;
-    display: flex;
-    overflow-x: auto;
-  }
-
-  .tool-rail button {
-    min-width: 72px;
+  .brand-block p {
+    max-width: 100%;
+    white-space: normal;
   }
 
-  .input-panel {
-    position: static;
-    max-height: none;
+  .editor-topbar {
+    align-items: flex-start;
+    flex-wrap: wrap;
   }
 
   .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,
   .range-sliders,
   .timeline,
   .cue-row,
@@ -1255,11 +1734,15 @@ textarea:focus,
     grid-template-columns: 1fr;
   }
 
-  .progress-percent {
-    font-size: 1.5rem;
+  .form-grid-two {
+    grid-template-columns: 1fr;
   }
 
   .step-list {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+
+  .progress-percent {
+    font-size: 1.6rem;
+  }
 }