.suggestion-input,
.auto-title-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 7px;
  margin-top: 7px;
}

.suggestion-input input,
.auto-title-control input { margin-top: 0 !important; min-width: 0; }

.suggestion-input button,
.auto-title-control button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 43px;
  padding: 0 12px;
  border: 1px solid #b9d7ca;
  border-radius: 9px;
  background: #eef8f4;
  color: #126b4c;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.suggestion-input button:hover,
.auto-title-control button:hover { border-color: #68aa90; background: #dff2ea; transform: translateY(-1px); }
.suggestion-input button:disabled { cursor: wait; opacity: .6; transform: none; }
.suggestion-input button svg { width: 17px; height: 17px; }
.auto-title-control button svg { width: 16px; height: 16px; }

.material-entry {
  display: grid;
  grid-template-columns: 96px minmax(0,1fr);
  align-items: stretch;
  gap: 8px;
  margin-top: 7px;
}

.material-entry .suggestion-input { margin-top: 0; }
.material-percentage { position: relative; display: block; min-width: 0; }
.material-percentage input { width: 100%; height: 100%; margin-top: 0 !important; padding-right: 29px !important; text-align: right; }
.material-percentage > span { position: absolute; top: 50%; right: 11px; color: #6f7d75; font-size: 12px; font-weight: 800; transform: translateY(-50%); pointer-events: none; }

.material-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 0;
  margin-top: 9px;
}

.material-chip-list:empty { display: none; }

.material-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 6px 7px 6px 11px;
  border: 1px solid #b9d7ca;
  border-radius: 999px;
  background: #eef8f4;
  color: #125f45;
  font-size: 12px;
  font-weight: 800;
}

.material-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-chip button {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d8eee5;
  color: #0b6848;
  cursor: pointer;
}

.material-chip button:hover { background: #c2e2d5; }
.material-chip button svg { width: 14px; height: 14px; }

@media (max-width: 520px) {
  .material-entry { grid-template-columns: 82px minmax(0,1fr); }
  .material-entry .suggestion-input button { padding-inline: 10px; }
}

.auto-title-control input[data-title-mode="auto"] {
  border-color: #8fc5ae;
  background: linear-gradient(90deg, #f4fbf8, #fff 30%);
}

.capture-drop-zone b,
.drop-zone b { text-align: center; }

@media (max-width: 560px) {
  .auto-title-control { grid-template-columns: 1fr; }
  .auto-title-control button { min-height: 40px; }
}