.tabs {
  display: flex;
  gap: 1em;
  margin-left: 1em;
}
.tabs a {
  color: inherit;
  text-decoration: none;
  padding: .25em .75em;
  border-radius: 4px;
}
.tabs a.active {
  background: rgba(255, 255, 255, 0.1);
}
.tabs a:hover {
  background: rgba(255, 255, 255, 0.05);
}

.row-form {
  display: flex;
  gap: .5em;
  flex-wrap: wrap;
  align-items: center;
  margin-top: .5em;
}
.row-form input,
.row-form select,
.row-form button {
  padding: .4em .6em;
  font: inherit;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
}
.row-form input[type="text"] {
  flex: 1 1 12em;
  min-width: 8em;
}
.row-form input[type="number"] {
  width: 12em;
}
.row-form button {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
}
.row-form button:hover {
  background: rgba(255, 255, 255, 0.15);
}

.hint {
  font-size: .85em;
  opacity: .75;
  margin: .25em 0 .5em 0;
}
.hint code {
  padding: 0 .25em;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

.status {
  margin-top: .5em;
  min-height: 1.2em;
  font-size: .9em;
}
.status.err { color: #ff6b6b; }
.status.ok  { color: #51cf66; }

.kw-table,
.mod-log {
  width: 100%;
  border-collapse: collapse;
  margin-top: .5em;
}
.kw-table th,
.kw-table td,
.mod-log th,
.mod-log td {
  text-align: left;
  padding: .35em .5em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  vertical-align: top;
}
.kw-table code {
  padding: 0 .25em;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}
.kw-table .del-btn,
.kw-table .edit-btn,
.kw-table .save-btn,
.kw-table .cancel-btn {
  cursor: pointer;
  color: inherit;
  padding: .25em .5em;
  border-radius: 4px;
  font: inherit;
  margin-right: 4px;
}
.kw-table .del-btn {
  background: rgba(255, 107, 107, 0.15);
  border: 1px solid rgba(255, 107, 107, 0.4);
}
.kw-table .del-btn:hover { background: rgba(255, 107, 107, 0.3); }
.kw-table .edit-btn,
.kw-table .cancel-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.kw-table .edit-btn:hover,
.kw-table .cancel-btn:hover { background: rgba(255, 255, 255, 0.2); }
.kw-table .save-btn {
  background: rgba(181, 138, 255, 0.2);
  border: 1px solid rgba(181, 138, 255, 0.5);
}
.kw-table .save-btn:hover { background: rgba(181, 138, 255, 0.35); }
.kw-table tr.editing td { background: rgba(255, 255, 255, 0.03); }
.kw-table select,
.kw-table input {
  padding: .25em .4em; font: inherit; border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.3); color: inherit;
}
.kw-table input[type="text"] { min-width: 8em; }
.kw-table input[type="number"] { width: 6em; }
.group-chip {
  display: inline-block; padding: 1px 6px; border-radius: 999px;
  background: rgba(181, 138, 255, 0.2); border: 1px solid rgba(181, 138, 255, 0.5);
  font-size: 11px;
}
.kw-table .empty,
.mod-log .empty {
  text-align: center;
  opacity: .6;
  padding: 1em;
}
/* Rows for keywords/groups whose enabled=false: dim them so the disabled
 * state is obvious at a glance without hiding the row. */
.kw-table tr.disabled-row td { opacity: 0.45; }
.kw-table tr.disabled-row .enabled-toggle { opacity: 1; }
.kw-table input[type="checkbox"].enabled-toggle {
  width: auto; margin: 0; cursor: pointer;
}