.fe-sec { border: 1px solid var(--line); border-radius: 8px; margin: 10px 0; background: #fff; }
.fe-sec > summary { padding: 10px 12px; font-weight: 600; cursor: pointer; }
.fe-sec[open] > summary { border-bottom: 1px solid var(--line); }
.fe-sec > *:not(summary) { margin-left: 12px; margin-right: 12px; }
.fe-badge { background: var(--accent-soft); color: var(--accent); border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 600; }

.fe-group { border-left: 3px solid var(--accent-soft); margin: 8px 0; padding-left: 10px; }
.fe-group > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }

.fe-row { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; margin: 6px 0; background: var(--soft); }
.fe-row-head { display: flex; justify-content: space-between; align-items: center; }
.fe-tools { display: flex; gap: 4px; }
.fe-tools button { padding: 2px 8px; min-width: 30px; }
.fe-del { color: var(--down); }

.fe-fields { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 4px 0 6px; }
.fe-f { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); }
.fe-f input[type=text], .fe-f input[type=number], .fe-f textarea, .fe-f select { font: inherit; font-size: 14px; color: var(--ink); padding: 5px 7px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.fe-wide { flex: 1 1 100%; }
.fe-small { flex: 0 1 200px; }
.fe-small input[type=number] { width: 90px; }
.fe-bool { flex-direction: row; align-items: center; gap: 5px; color: var(--ink); align-self: flex-end; padding-bottom: 6px; }
.fe-label { margin-bottom: 2px; }
.fe-add { margin: 4px 0 8px; }

.fe-bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; background: #fff; border-top: 1px solid var(--line); margin-top: 12px; }
.fe-bar #fe-dirty { flex: 1 1 auto; color: var(--muted); }
.fe-save { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; padding: 10px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent-soft); }
.fe-save[hidden] { display: none; }
.fe-save label { display: flex; flex-direction: column; font-size: 12px; }
.fe-save input { font: inherit; padding: 5px 7px; border: 1px solid var(--line); border-radius: 5px; }
.fe-msg { margin: 10px 0; }
.fe-msg.error { padding: 8px 12px; border-left: 4px solid var(--down); background: #fef3f2; }
.fe-msg.ok { padding: 8px 12px; border-left: 4px solid var(--up); background: #ecfdf3; }
.fe-msg ul { margin: 4px 0 0; padding-left: 18px; }

@media screen and (max-width: 760px) {
  .fe-small { flex: 1 1 45%; }
  .fe-bar { gap: 4px; padding: 6px 0; }
  .fe-bar #fe-dirty { display: none; }
  .fe-bar button { flex: 1 1 auto; font-size: 12px; padding: 6px 8px; }
  .fe-bar button.primary { flex-basis: 100%; font-size: 14px; }
  .fe-save label { flex: 1 1 100%; }
}

/* form dropdown + picker */
.form-switch { font: inherit; font-weight: 600; padding: 6px 10px; border: 1px solid var(--accent); border-radius: 6px; color: var(--accent); background: var(--accent-soft); max-width: 100%; }
.form-switch[hidden] { display: none; }
.form-picker .form-card { display: flex; flex-direction: column; gap: 2px; margin: 10px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; background: #fff; }
.form-picker .form-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.form-picker .form-card b { font-size: 16px; }

@media screen and (max-width: 760px) {
  .form-switch { width: 100%; }
}