theme fix

src/App.css

@@ -28,7 +28,6 @@
   background-image: var(--background-image);
   background-position: center;
   background-size: cover;
-  transition: background-image 350ms ease;
 }
 
 .app::after {
@@ -63,11 +62,14 @@
   --accent: #a84524;
 }
 
-.app.theme-black .orb,
-.app.theme-white .orb {
+.app .orb {
   display: none;
 }
 
+.app.theme-violet .orb {
+  display: block;
+}
+
 .app.theme-light::after {
   background: rgb(0 0 0 / var(--light-overlay-opacity, 0.07));
 }
@@ -168,12 +170,6 @@
   animation: liquid-float 22s ease-in-out infinite alternate;
 }
 
-.app.theme-motion-lava .orb,
-.app.theme-motion-liquid .orb {
-  opacity: 0.38;
-  animation: orb-breathe 14s ease-in-out infinite alternate;
-}
-
 .topbar {
   display: flex;
   align-items: center;
@@ -264,11 +260,25 @@
   position: fixed;
   inset: 0;
   z-index: 2;
-  display: grid;
-  place-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.1rem;
   cursor: default;
 }
 
+.focus-mode-phase {
+  margin: 0;
+  color: var(--clock-color, currentColor);
+  font-family: var(--app-font, 'Space Grotesk', sans-serif);
+  font-size: clamp(0.75rem, 1.8vw, 1rem);
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  opacity: 0.72;
+  text-transform: uppercase;
+}
+
 .focus-mode-time {
   color: var(--clock-color, currentColor);
   font-family: var(--app-font, 'Space Grotesk', sans-serif);
@@ -882,11 +892,6 @@ h1 {
   100% { background-position: 35% 55%; transform: scale(1.04) rotate(-1deg); }
 }
 
-@keyframes orb-breathe {
-  0% { transform: translate3d(-4%, 2%, 0) scale(0.9); }
-  100% { transform: translate3d(8%, -7%, 0) scale(1.18); }
-}
-
 @keyframes fade-in {
   from { opacity: 0; }
 }

src/App.test.tsx

@@ -136,6 +136,7 @@ describe('Pomodoro app', () => {
     const focusModeTrigger = screen.getByRole('button', { name: 'Enter focus mode' })
     fireEvent.click(focusModeTrigger)
     expect(screen.getByLabelText('Current time with seconds')).toHaveTextContent('10:08:09')
+    expect(screen.getByText('Focus session')).toBeInTheDocument()
     expect(screen.queryByRole('button', { name: 'Customize' })).not.toBeInTheDocument()
     expect(screen.queryByLabelText('Time remaining')).not.toBeInTheDocument()
 
@@ -181,6 +182,7 @@ describe('Pomodoro app', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Enter focus mode' }))
 
     expect(screen.getByLabelText('Short break time remaining')).toHaveTextContent('05:00')
+    expect(screen.getByText('Short break')).toBeInTheDocument()
   })
 
   it('starts, pauses, resumes, and resets the countdown', async () => {
@@ -345,13 +347,31 @@ describe('Pomodoro app', () => {
     fireEvent.click(screen.getByRole('radio', { name: 'Lava bloom' }))
     const app = screen.getByTestId('app')
     expect(app).toHaveClass('theme-motion-lava')
+    expect(app.style.getPropertyValue('--background-image')).not.toMatch(/,\s*#[0-9a-f]{6}$/i)
 
     fireEvent.click(screen.getByRole('radio', { name: 'Liquid aurora' }))
     expect(app).toHaveClass('theme-motion-liquid')
+    expect(app.style.getPropertyValue('--background-image')).not.toMatch(/,\s*#[0-9a-f]{6}$/i)
     expect(appCss).toMatch(/@keyframes lava-drift/)
     expect(appCss).toMatch(/@keyframes liquid-float/)
   })
 
+  it('shows the decorative color orbs only on Violet haze', async () => {
+    await renderHydratedApp()
+    expect(appCss).toMatch(/\.app \.orb\s*{[\s\S]*display:\s*none/)
+    expect(appCss).toMatch(/\.app\.theme-violet \.orb\s*{[\s\S]*display:\s*block/)
+  })
+
+  it('applies a valid green background to Quiet aurora', async () => {
+    await renderHydratedApp()
+    fireEvent.click(screen.getByRole('button', { name: 'Customize' }))
+    fireEvent.click(screen.getByRole('radio', { name: 'Quiet aurora' }))
+
+    const background = screen.getByTestId('app').style.getPropertyValue('--background-image')
+    expect(background).toContain('#2e9f83')
+    expect(background).not.toMatch(/,\s*#[0-9a-f]{6}$/i)
+  })
+
   it('keeps a custom clock color behind a separate control when themes change', async () => {
     const store = new MemorySettingsStore()
     await renderHydratedApp(store)

src/App.tsx

@@ -455,6 +455,7 @@ function App({
 
       {focusMode && (
         <section className="focus-mode-view">
+          <p className="focus-mode-phase">{PHASE_LABELS[timer.phase]}</p>
           {timer.status === 'idle' ? (
             <time aria-label="Current time with seconds" className="focus-mode-time">
               {formatClock(currentTime, true)}

src/features/settings/options.ts

@@ -31,7 +31,7 @@ export const BACKGROUND_OPTIONS: Array<{
   {
     id: 'aurora',
     label: 'Quiet aurora',
-    css: 'radial-gradient(circle at 28% 72%, #2e9f83 0%, transparent 38%), radial-gradient(circle at 78% 18%, #5755a8 0%, transparent 42%), #101e2d',
+    css: 'radial-gradient(circle at 28% 72%, #2e9f83 0%, transparent 38%), radial-gradient(circle at 78% 18%, #216d64 0%, transparent 42%), linear-gradient(145deg, #0a1f23, #123d35)',
     preview: 'linear-gradient(135deg, #183244, #2e9f83)',
     clockColor: '#effffb',
     foregroundColor: '#effffb',
@@ -85,7 +85,7 @@ export const BACKGROUND_OPTIONS: Array<{
   {
     id: 'lava',
     label: 'Lava bloom',
-    css: 'radial-gradient(circle at 18% 28%, #ff4d6d 0%, transparent 34%), radial-gradient(circle at 78% 70%, #ff9f1c 0%, transparent 38%), radial-gradient(circle at 62% 18%, #8338ec 0%, transparent 32%), #210b2c',
+    css: 'radial-gradient(circle at 18% 28%, #ff4d6d 0%, transparent 34%), radial-gradient(circle at 78% 70%, #ff9f1c 0%, transparent 38%), radial-gradient(circle at 62% 18%, #8338ec 0%, transparent 32%), linear-gradient(145deg, #210b2c, #12081d)',
     preview: 'linear-gradient(135deg, #ff4d6d, #ff9f1c 54%, #6f2dbd)',
     clockColor: '#fff7ee',
     foregroundColor: '#fff7ee',
@@ -95,7 +95,7 @@ export const BACKGROUND_OPTIONS: Array<{
   {
     id: 'liquid',
     label: 'Liquid aurora',
-    css: 'radial-gradient(circle at 20% 72%, #00d4a6 0%, transparent 38%), radial-gradient(circle at 82% 24%, #6c63ff 0%, transparent 36%), radial-gradient(circle at 46% 42%, #0088ff 0%, transparent 42%), #07182b',
+    css: 'radial-gradient(circle at 20% 72%, #00d4a6 0%, transparent 38%), radial-gradient(circle at 82% 24%, #6c63ff 0%, transparent 36%), radial-gradient(circle at 46% 42%, #0088ff 0%, transparent 42%), linear-gradient(145deg, #07182b, #071126)',
     preview: 'linear-gradient(135deg, #00c9a7, #0088ff 54%, #6c63ff)',
     clockColor: '#efffff',
     foregroundColor: '#efffff',