diff --git a/src/uix/eidos/components/calendar/calendar.svelte b/src/uix/eidos/components/calendar/calendar.svelte
index 33c87f24c..25ed92ddf 100644
--- a/src/uix/eidos/components/calendar/calendar.svelte
+++ b/src/uix/eidos/components/calendar/calendar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './calendar.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as Calendar from '$soma/components/calendar';
 	import type { CalendarProps, CalendarProviderSnippetProps } from './types';
diff --git a/src/uix/eidos/components/color-field/color-field.svelte b/src/uix/eidos/components/color-field/color-field.svelte
index cda844f56..203e0e567 100644
--- a/src/uix/eidos/components/color-field/color-field.svelte
+++ b/src/uix/eidos/components/color-field/color-field.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './color-field.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as ColorField from '$soma/components/color-field';
 	import type { ColorFieldProps } from './types';
diff --git a/src/uix/eidos/components/color-picker/color-picker.svelte b/src/uix/eidos/components/color-picker/color-picker.svelte
index 2f71a4bbf..47d87a230 100644
--- a/src/uix/eidos/components/color-picker/color-picker.svelte
+++ b/src/uix/eidos/components/color-picker/color-picker.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// Channel sliders use soma Slider parts (not eidos <Slider>), so load slider.css here first.
+	import '$uix/eidos/components/slider/slider.css';
+	import './color-picker.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as ColorPicker from '$soma/components/color-picker';
 	import { setColorPickerVisualContext } from './context.svelte';
diff --git a/src/uix/eidos/components/date-field/date-field.svelte b/src/uix/eidos/components/date-field/date-field.svelte
index dd88e006f..f8f2c11f4 100644
--- a/src/uix/eidos/components/date-field/date-field.svelte
+++ b/src/uix/eidos/components/date-field/date-field.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './date-field.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as DateField from '$soma/components/date-field';
 	import type { DateFieldProps } from './types';
diff --git a/src/uix/eidos/components/date-picker/date-picker.svelte b/src/uix/eidos/components/date-picker/date-picker.svelte
index 0944caac8..3b818d4b3 100644
--- a/src/uix/eidos/components/date-picker/date-picker.svelte
+++ b/src/uix/eidos/components/date-picker/date-picker.svelte
@@ -1,4 +1,11 @@
 <script lang="ts">
+	// Renders calendar / month-grid / year-grid markup via soma parts (the view sub-components
+	// only `import type`), without mounting the eidos components — so load their recipes here,
+	// before date-picker.css so it can override them.
+	import '$uix/eidos/components/calendar/calendar.css';
+	import '$uix/eidos/components/month-grid/month-grid.css';
+	import '$uix/eidos/components/year-grid/year-grid.css';
+	import './date-picker.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as DatePicker from '$soma/components/date-picker';
 	import { setDatePickerVisualContext } from './context.svelte';
diff --git a/src/uix/eidos/components/date-range-field/date-range-field.svelte b/src/uix/eidos/components/date-range-field/date-range-field.svelte
index 4a7ba2305..3ea3ab8ab 100644
--- a/src/uix/eidos/components/date-range-field/date-range-field.svelte
+++ b/src/uix/eidos/components/date-range-field/date-range-field.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// Renders date-field markup without mounting eidos <DateField> — load its recipe first.
+	import '$uix/eidos/components/date-field/date-field.css';
+	import './date-range-field.css';
 	/**
 	 * Eidos `<DateRangeField>` — root. Sets the visual cascade
 	 * (data-size / data-variant / data-color) that both endpoint
diff --git a/src/uix/eidos/components/date-range-picker/date-range-picker.svelte b/src/uix/eidos/components/date-range-picker/date-range-picker.svelte
index a753285b2..2424b692b 100644
--- a/src/uix/eidos/components/date-range-picker/date-range-picker.svelte
+++ b/src/uix/eidos/components/date-range-picker/date-range-picker.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// Renders range-calendar markup without mounting eidos <RangeCalendar> — load its recipe first.
+	import '$uix/eidos/components/range-calendar/range-calendar.css';
+	import './date-range-picker.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as DateRangePicker from '$soma/components/date-range-picker';
 	import { setDateRangePickerVisualContext } from './context.svelte';
diff --git a/src/uix/eidos/components/month-grid/month-grid.svelte b/src/uix/eidos/components/month-grid/month-grid.svelte
index a6ebcb56f..e0fc39513 100644
--- a/src/uix/eidos/components/month-grid/month-grid.svelte
+++ b/src/uix/eidos/components/month-grid/month-grid.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './month-grid.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as MonthGrid from '$soma/components/month-grid';
 	import type { MonthGridProps, MonthGridProviderSnippetProps } from './types';
diff --git a/src/uix/eidos/components/picker-shell/picker-shell.svelte b/src/uix/eidos/components/picker-shell/picker-shell.svelte
index 82111da37..dd8b0df43 100644
--- a/src/uix/eidos/components/picker-shell/picker-shell.svelte
+++ b/src/uix/eidos/components/picker-shell/picker-shell.svelte
@@ -1,4 +1,8 @@
 <script lang="ts">
+	// The shell renders content inside a soma Popover ([data-popover-content]); picker-shell.css
+	// tunes that content, but its base chrome (bg/radius/shadow) comes from popover.css — load it.
+	import '$uix/eidos/components/popover/popover.css';
+	import './picker-shell.css';
 	import { getPickerShellHandle } from '$soma/components/picker-shell';
 	import type { PickerShellProps } from './types';
 
diff --git a/src/uix/eidos/components/range-calendar/range-calendar.svelte b/src/uix/eidos/components/range-calendar/range-calendar.svelte
index 78979bebf..ff63be840 100644
--- a/src/uix/eidos/components/range-calendar/range-calendar.svelte
+++ b/src/uix/eidos/components/range-calendar/range-calendar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './range-calendar.css';
 	/**
 	 * Eidos `<RangeCalendar>` — root wrapper around Soma's RangeCalendar
 	 * provider. Adds size / variant / color cascades; otherwise pass-through.
diff --git a/src/uix/eidos/components/slider/slider.svelte b/src/uix/eidos/components/slider/slider.svelte
index f4e8a7e15..ea66f55df 100644
--- a/src/uix/eidos/components/slider/slider.svelte
+++ b/src/uix/eidos/components/slider/slider.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './slider.css';
 	import { ActiveEidos } from '$uix/eidos';
 	/**
 	 * Eidos `<Slider>` — visual wrapper over Soma's slider primitive.
diff --git a/src/uix/eidos/components/time-field/time-field.svelte b/src/uix/eidos/components/time-field/time-field.svelte
index b791f41ef..d72eec6c6 100644
--- a/src/uix/eidos/components/time-field/time-field.svelte
+++ b/src/uix/eidos/components/time-field/time-field.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './time-field.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as TimeField from '$soma/components/time-field';
 	import type { TimeFieldProps } from './types';
diff --git a/src/uix/eidos/components/time-picker/time-picker.svelte b/src/uix/eidos/components/time-picker/time-picker.svelte
index 1094761f7..18d8ea864 100644
--- a/src/uix/eidos/components/time-picker/time-picker.svelte
+++ b/src/uix/eidos/components/time-picker/time-picker.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// Hour/minute sliders use soma Slider parts (not eidos <Slider>), so load slider.css here first.
+	import '$uix/eidos/components/slider/slider.css';
+	import './time-picker.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as TimePicker from '$soma/components/time-picker';
 	import { setTimePickerVisualContext } from './context.svelte';
diff --git a/src/uix/eidos/components/time-range-field/time-range-field.svelte b/src/uix/eidos/components/time-range-field/time-range-field.svelte
index 7b541236d..920d05cf4 100644
--- a/src/uix/eidos/components/time-range-field/time-range-field.svelte
+++ b/src/uix/eidos/components/time-range-field/time-range-field.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// Renders time-field markup without mounting eidos <TimeField> — load its recipe first.
+	import '$uix/eidos/components/time-field/time-field.css';
+	import './time-range-field.css';
 	/**
 	 * Eidos `<TimeRangeField>` — root. Sets the visual cascade
 	 * (data-size / data-variant / data-color) that both endpoint
diff --git a/src/uix/eidos/components/time-range-picker/time-range-picker.svelte b/src/uix/eidos/components/time-range-picker/time-range-picker.svelte
index 0184ffb02..f654eaef7 100644
--- a/src/uix/eidos/components/time-range-picker/time-range-picker.svelte
+++ b/src/uix/eidos/components/time-range-picker/time-range-picker.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// Hour/minute sliders use soma Slider parts (not eidos <Slider>), so load slider.css here first.
+	import '$uix/eidos/components/slider/slider.css';
+	import './time-range-picker.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as TimeRangePicker from '$soma/components/time-range-picker';
 	import { setTimeRangePickerVisualContext } from './context.svelte';
diff --git a/src/uix/eidos/components/year-grid/year-grid.svelte b/src/uix/eidos/components/year-grid/year-grid.svelte
index 2a484db3d..ea793db1e 100644
--- a/src/uix/eidos/components/year-grid/year-grid.svelte
+++ b/src/uix/eidos/components/year-grid/year-grid.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './year-grid.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as YearGrid from '$soma/components/year-grid';
 	import type { YearGridProps, YearGridProviderSnippetProps } from './types';
diff --git a/src/uix/eidos/index.css b/src/uix/eidos/index.css
index 0e2b721ed..a478476b4 100644
--- a/src/uix/eidos/index.css
+++ b/src/uix/eidos/index.css
@@ -78,22 +78,6 @@
 @import './components/section/section.css';
 @import './components/aspect-ratio/aspect-ratio.css';
 @import './components/auto-grid/auto-grid.css';
-@import './components/time-range-field/time-range-field.css';
-@import './components/date-range-field/date-range-field.css';
-@import './components/calendar/calendar.css';
-@import './components/range-calendar/range-calendar.css';
-@import './components/month-grid/month-grid.css';
-@import './components/year-grid/year-grid.css';
-@import './components/date-field/date-field.css';
-@import './components/date-picker/date-picker.css';
-@import './components/date-range-picker/date-range-picker.css';
-@import './components/time-field/time-field.css';
-@import './components/color-field/color-field.css';
-@import './components/picker-shell/picker-shell.css';
-@import './components/time-picker/time-picker.css';
-@import './components/time-range-picker/time-range-picker.css';
-@import './components/color-picker/color-picker.css';
-@import './components/slider/slider.css';
 @import './components/words/words.css';
 @import './components/table/table.css';
 @import './components/tree-view/tree-view.css';