﻿:root {
  --wbs-accent: var(--accent, #00ff7f);
  --wbs-fg: var(--text, #e5e5e5);
  --wbs-bg: var(--background, #111);
  --wbs-muted: #9aa0a6;
  --wbs-border: #3a3a3a;
}
.wbs-tool { font: inherit; color: var(--wbs-fg); }
.wbs-tool h1, .wbs-tool h2 { margin: 0.5rem 0 0.35rem; }
.wbs-tool .legend { color: var(--wbs-muted); font-size: .95em; }
.wbs-tool .controls { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 1rem; }
.wbs-tool button, .wbs-tool .btn-import { background: transparent; color: var(--wbs-fg); border: 1px solid var(--wbs-border); padding: .45rem .7rem; border-radius: 4px; cursor: pointer; display:inline-flex; align-items:center; gap:.4rem; }
.wbs-tool button.primary, .wbs-tool .btn-import.primary { border-color: var(--wbs-accent); color: var(--wbs-accent); }
.wbs-tool .rows { display: block; border: 1px solid var(--wbs-border); border-radius: 6px; padding: .25rem; background: transparent; }
.wbs-tool .row { display: flex; align-items: center; gap: .5rem; padding: .25rem; }
.wbs-tool .row input[type=text] { flex: 1; min-width: 10rem; background: transparent; color: var(--wbs-fg); border: 1px solid var(--wbs-border); padding: .35rem .45rem; border-radius: 4px; }
.wbs-tool .controls-inline { display: inline-flex; gap: .25rem; }
.wbs-tool .controls-inline button { padding: .25rem .45rem; }
.wbs-tool textarea.output { width: 100%; min-height: 12rem; background: transparent; color: var(--wbs-fg); border: 1px solid var(--wbs-border); padding: .6rem; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.wbs-tool label.btn-import input[type=file] { display:none; }
