diff --git a/src/uix/eidos/components/date-range-picker/date-range-picker.css b/src/uix/eidos/components/date-range-picker/date-range-picker.css
index b67c20e56..c4002555b 100644
--- a/src/uix/eidos/components/date-range-picker/date-range-picker.css
+++ b/src/uix/eidos/components/date-range-picker/date-range-picker.css
@@ -191,6 +191,73 @@
 	box-shadow: var(--date-field-focus-shadow);
 }
 
+/* ── Group treatment: single input chrome around start + end ────────────────
+ * When the consumer wraps both endpoints (and optional separator + trigger)
+ * in `<div data-date-range-field-group>`, the chrome moves to the group:
+ * a single border, a single focus ring, a single background. Each endpoint
+ * input loses its own box and the trigger lives flush inside. */
+
+[data-date-range-field-group] {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--_date-field-gap);
+	flex: 1 1 24rem;
+	min-inline-size: 0;
+	min-block-size: var(--_date-field-height);
+	padding-inline: var(--_date-field-px);
+	border: var(--date-field-border-width) solid var(--date-field-border);
+	border-radius: var(--date-field-radius);
+	background: var(--date-field-bg);
+	color: inherit;
+	transition:
+		background var(--date-field-transition-duration) var(--date-field-transition-ease),
+		border-color var(--date-field-transition-duration) var(--date-field-transition-ease),
+		box-shadow var(--date-field-transition-duration) var(--date-field-transition-ease);
+}
+
+[data-date-range-field-group]:has([data-date-field-segment]:focus-visible) {
+	border-color: var(--_date-field-accent-border);
+	box-shadow: var(--date-field-focus-shadow);
+}
+
+[data-date-range-picker][data-variant='outline'] [data-date-range-field-group] {
+	background: transparent;
+}
+
+[data-date-range-picker][data-variant='ghost'] [data-date-range-field-group] {
+	border-color: transparent;
+	background: transparent;
+	padding-inline: 0;
+}
+
+[data-date-range-picker][data-invalid] [data-date-range-field-group] {
+	border-color: var(--date-field-border-invalid);
+}
+
+[data-date-range-field-group] [data-date-range-field-input] {
+	flex: 0 1 auto;
+	min-block-size: auto;
+	padding-inline: 0;
+	border: none;
+	border-radius: 0;
+	background: transparent;
+	box-shadow: none;
+}
+
+[data-date-range-field-group] [data-date-range-field-input]:has([data-date-field-segment]:focus-visible) {
+	border: none;
+	box-shadow: none;
+}
+
+/* Separator span ("to", "/", "→") inside the group inherits the field tone
+   and stays vertically aligned. */
+[data-date-range-field-group] > .range-separator,
+[data-date-range-field-group] [data-range-separator] {
+	color: var(--date-field-literal-color);
+	flex: 0 0 auto;
+	user-select: none;
+}
+
 [data-date-range-picker][data-invalid] [data-date-range-field-input],
 [data-date-range-field-input][data-invalid] {
 	border-color: var(--date-field-border-invalid);
diff --git a/web/routes/uix/components/date-range-picker/+page.svelte b/web/routes/uix/components/date-range-picker/+page.svelte
index a835d24a9..c2128be7a 100644
--- a/web/routes/uix/components/date-range-picker/+page.svelte
+++ b/web/routes/uix/components/date-range-picker/+page.svelte
@@ -503,7 +503,7 @@
 					calendarLabel="Booking date range"
 				>
 					<DateRangePicker.Label>{labelText}</DateRangePicker.Label>
-					<div class="range-field-row">
+					<div class="range-field-row" data-date-range-field-group>
 						<DateRangePicker.Input type="start" name={startName} aria-label="Start date">
 							{#snippet children({ segments }: DateRangePickerInputSnippetProps)}
 								{#each segments as { part, value }, index (`start-${part}-${index}`)}