.day-layout {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 18px;
  align-items: start;
}

.day-natural-planner { margin-bottom: 18px; }
.day-natural-preview { margin-top: 14px; }
.day-natural-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.day-natural-meta span { min-width: 0; padding: 10px; border: 1px solid var(--ui-border); border-radius: 11px; background: var(--ui-surface-soft); }
.day-natural-meta small,
.day-natural-meta strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-natural-meta small { color: var(--ui-faint); font-size: 8px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.day-natural-meta strong { margin-top: 4px; color: var(--ui-text); font-size: 10px; }
.day-natural-stops { margin-top: 10px; display: grid; gap: 7px; }
.day-natural-stop { padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: 11px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--ui-surface); }
.day-natural-stop > i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--ui-brand); background: var(--accent-soft); font: 800 9px "Manrope", sans-serif; }
.day-natural-stop strong { overflow: hidden; color: var(--ui-text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.day-natural-stop small { color: var(--ui-muted); font-size: 9px; }

@media (max-width: 760px) {
  .day-natural-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.day-settings-grid {
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) minmax(140px, .65fr) minmax(120px, .55fr) minmax(140px, .7fr);
  gap: 10px;
}

.day-stop-heading,
.day-builder-footer,
.day-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.day-stop-heading {
  margin: 22px 0 10px;
}

.day-stop-heading h3,
.day-result-header h2 {
  margin: 5px 0 0;
  color: var(--ui-text);
  font: 700 15px/1.25 "Manrope", sans-serif;
}

.day-stop-list {
  display: grid;
  gap: 8px;
}

.day-stop-row {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
  background: var(--ui-surface-soft);
}

.day-stop-index {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--ui-nav);
  font: 800 10px/1 "Manrope", sans-serif;
}

.day-stop-fields {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 130px;
  gap: 9px;
}

.day-stop-row:first-child .day-stop-duration,
.day-stop-row:last-child .day-stop-duration {
  color: var(--ui-muted);
}

.day-stop-actions {
  display: grid;
  gap: 3px;
}

.day-stop-actions button,
.saved-day-actions button {
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  color: var(--ui-muted);
  background: var(--ui-surface);
  cursor: pointer;
}

.day-stop-actions button {
  width: 27px;
  height: 25px;
  padding: 0;
  font: 700 11px/1 sans-serif;
}

.day-stop-actions button:hover,
.saved-day-actions button:hover {
  color: var(--ui-brand);
  border-color: color-mix(in srgb, var(--ui-brand) 35%, var(--ui-border));
}

.day-builder-footer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ui-border);
  align-items: flex-start;
}

.day-optimize-option {
  max-width: 390px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--ui-text);
  cursor: pointer;
}

.day-optimize-option input {
  margin: 2px 0 0;
  accent-color: var(--ui-brand);
}

.day-optimize-option span,
.day-optimize-option strong,
.day-optimize-option small {
  display: block;
}

.day-optimize-option strong {
  font-size: 10px;
}

.day-optimize-option small {
  margin-top: 4px;
  color: var(--ui-muted);
  font-size: 8px;
  line-height: 1.45;
}

.day-optimize-option.is-disabled {
  opacity: .55;
  cursor: not-allowed;
}

.day-builder-actions,
.day-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.day-status {
  min-height: 0;
  margin-top: 10px;
  color: var(--ui-muted);
  font-size: 9px;
  line-height: 1.5;
}

.day-status.is-error { color: var(--ui-brand); }
.day-status.is-success { color: var(--ui-success); }

.saved-day-card {
  position: sticky;
  top: 18px;
}

.saved-day-list {
  max-height: 610px;
  display: grid;
  gap: 8px;
  overflow-y: auto;
}

.saved-day-item {
  padding: 11px;
  border: 1px solid var(--ui-border);
  border-radius: 11px;
  background: var(--ui-surface-soft);
}

.saved-day-item > button {
  width: 100%;
  padding: 0;
  border: 0;
  color: var(--ui-text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.saved-day-item strong,
.saved-day-item span {
  display: block;
}

.saved-day-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 10px/1.3 "Manrope", sans-serif;
}

.saved-day-item span {
  margin-top: 5px;
  color: var(--ui-muted);
  font-size: 8px;
  line-height: 1.4;
}

.saved-day-actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
}

.saved-day-actions button {
  min-height: 27px;
  padding: 0 8px;
  font-size: 8px;
}

.day-results {
  margin-top: 24px;
}

.day-result-header {
  margin-bottom: 12px;
}

.day-summary-grid {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.day-summary-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
}

.day-summary-card span,
.day-summary-card strong {
  display: block;
}

.day-summary-card span {
  color: var(--ui-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.day-summary-card strong {
  margin-top: 7px;
  overflow: hidden;
  color: var(--ui-text);
  font: 700 17px/1.2 "Manrope", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-result-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
}

.day-timeline {
  max-height: 570px;
  padding-left: 4px;
  overflow-y: auto;
}

.day-timeline-stop {
  position: relative;
  padding: 0 0 18px 32px;
}

.day-timeline-stop::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: -1px;
  left: 10px;
  border-left: 1px dashed var(--ui-border);
}

.day-timeline-stop:last-child::before { display: none; }

.day-timeline-dot {
  position: absolute;
  top: 1px;
  left: 0;
  width: 21px;
  height: 21px;
  border: 4px solid var(--ui-surface);
  border-radius: 50%;
  background: var(--ui-brand);
  box-shadow: 0 0 0 1px var(--ui-border);
}

.day-timeline-stop small,
.day-timeline-stop strong,
.day-timeline-stop span {
  display: block;
}

.day-timeline-stop small {
  color: var(--ui-brand);
  font-size: 8px;
  font-weight: 800;
}

.day-timeline-stop strong {
  margin-top: 4px;
  color: var(--ui-text);
  font: 700 11px/1.35 "Manrope", sans-serif;
}

.day-timeline-stop > span {
  margin-top: 4px;
  color: var(--ui-muted);
  font-size: 8px;
  line-height: 1.45;
}

.day-timeline-leg {
  margin-top: 9px;
  padding: 8px 9px;
  border: 1px solid var(--ui-border);
  border-radius: 9px;
  color: var(--ui-muted);
  background: var(--ui-surface-soft);
  font-size: 8px;
}

@media (max-width: 1080px) {
  .day-layout { grid-template-columns: 1fr; }
  .saved-day-card { position: static; }
  .saved-day-list { max-height: none; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

@media (max-width: 860px) {
  .day-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .day-result-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .day-settings-grid,
  .day-stop-fields,
  .day-summary-grid { grid-template-columns: 1fr; }
  .day-stop-row { grid-template-columns: 30px minmax(0, 1fr); align-items: start; }
  .day-stop-actions { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .day-stop-actions button { width: 100%; }
  .day-builder-footer,
  .day-result-header { align-items: stretch; flex-direction: column; }
  .day-builder-actions > *,
  .day-result-actions > * { flex: 1; }
  .saved-day-list { grid-template-columns: 1fr; }
}