.gf-build { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); flex-basis: 100%; }
.gf-add, .gf-do-add, .gf-clear {
  font: inherit; font-size: 0.82rem; font-weight: 600; min-height: 44px; padding: 0.3rem var(--sp-3); cursor: pointer;
  border: 1px solid var(--line-control); border-radius: 999px; background: var(--surface); color: var(--text);
}
.gf-add:hover, .gf-do-add:hover, .gf-clear:hover { border-color: var(--accent); }
.gf-add:focus-visible, .gf-do-add:focus-visible, .gf-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gf-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); border: 1px solid var(--line-control); border-radius: var(--r-1); padding: var(--sp-2); margin: 0; }
.gf-row[hidden] { display: none; }
.gf-field, .gf-op, .gf-val, .gf-join-select {
  font: inherit; font-size: 0.82rem; min-height: 44px; padding: 0.25rem var(--sp-2);
  border: 1px solid var(--line-control); border-radius: var(--r-1); background: var(--surface); color: var(--text);
}
.gf-val-num { max-width: 8rem; }
.gf-field:focus-visible, .gf-op:focus-visible, .gf-val:focus-visible, .gf-join-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.gf-join { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-small); color: var(--muted); }
.gf-join[hidden] { display: none; }
.gf-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); flex-basis: 100%; }
.gf-chips:empty { display: none; }
.gf-chip {
  font: inherit; font-size: 0.8rem; font-weight: 600; min-height: 44px; padding: 0.25rem var(--sp-2); cursor: pointer;
  border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-soft); color: var(--accent);
}
.gf-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gf-clear[hidden] { display: none; }
.gf-lang-note, .gf-dropped { flex-basis: 100%; margin: var(--sp-1) 0 0; font-size: var(--fs-micro); }
.gf-dropped[hidden] { display: none; }
@media (max-width: 480px) {
  .gf-row { flex-direction: column; align-items: stretch; }
  .gf-row .gf-field, .gf-row .gf-op, .gf-row .gf-val, .gf-row .gf-do-add { width: 100%; }
  .gf-val-num { max-width: none; }
}