.scg { display: grid; gap: 14px; }

.scg-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.scg-tab {
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--fg-muted);
  background: var(--surface-2); border: 0; border-radius: 0;
  padding: 9px 14px; cursor: pointer; box-shadow: var(--bevel);
}
.scg-tab:hover { color: var(--fg); filter: brightness(1.12); }
.scg-tab-active { background: var(--grass-deep); color: #fff; }

.scg-panel { padding: 16px; display: grid; gap: 12px; }
.scg-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.scg-f { display: grid; gap: 4px; font-size: 12px; color: var(--fg-muted); }
.scg-f.scg-wide { flex: 1 1 320px; }
.scg-f strong { font-size: 18px; color: var(--grass); }
.scg-f input, .scg-f select {
  font: inherit; font-size: 14px; color: var(--fg);
  background: var(--surface-2); border: 0; border-radius: 0;
  padding: 8px 10px; box-shadow: var(--bevel-in); outline: none; min-width: 130px;
}
.scg-f input:focus, .scg-f select:focus { box-shadow: var(--bevel-in), 0 0 0 2px var(--grass-deep); }
.scg-check {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 13.5px; color: var(--fg-muted);
  padding: 8px 11px; background: var(--surface-2); box-shadow: var(--bevel);
}
.scg-check input { accent-color: var(--grass); }
.scg-check a { color: var(--grass); }

.scg-out {
  width: 100%; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
  color: var(--fg); background: var(--surface-2); border: 0; border-radius: 0;
  padding: 12px; box-shadow: var(--bevel-in); resize: vertical;
  white-space: pre; overflow-wrap: normal; overflow-x: auto;
}
.scg-note { margin: 0; font-size: 12.5px; color: var(--fg-dim); line-height: 1.6; flex: 1 1 320px; }
.scg-note code {
  font-family: var(--font-mono); font-size: 0.92em;
  background: var(--surface-3); padding: 1px 4px;
}