body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #333;
}
header { background-color: #1e1e1e; color: white; padding: 1em; text-align: center; }
.container { padding: 2em; max-width: 800px; margin: auto; }

.card { background-color: white; padding: 1.5em; margin-bottom: 1.5em;
  border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
h2 { color: #f97316; margin-top: 0; }

input[type="text"], textarea, select, input[type="date"] {
  width: 100%; padding: 12px; margin-top: 8px; margin-bottom: 16px;
  border: 1px solid #ccc; border-radius: 6px; font-size: 1rem; box-sizing: border-box; resize: vertical;
}
button { background-color: #f97316; color: white; border: none; padding: 12px 24px;
  border-radius: 6px; font-size: 1rem; cursor: pointer; transition: background-color .3s ease; }
button:hover { background-color: #ea580c; }

.smiley-scale { display: flex; gap: 10px; font-size: 1.5rem; margin-top: 5px; margin-bottom: 16px; }
.smiley-scale span { cursor: pointer; transition: transform .2s ease; }
.smiley-scale span:hover { transform: scale(1.2); }
.smiley-scale span.selected { border: 2px solid #f97316; border-radius: 50%; padding: 2px; }

.approbations { margin-top: 1em; display: flex; flex-direction: column; gap: .5em; }
.checkbox-label { display: flex; align-items: center; gap: .5em; font-weight: normal; }

.flex-row { display: flex; gap: 1em; margin-bottom: 1em; }
.flex-col { flex: 1; display: flex; flex-direction: column; }