.bn-header {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.bn-header h2,
.bn-header p { margin: 0; }

.bn-header p,
.bn-draft-card,
.bn-command-card strong,
.bn-empty { color: var(--muted, #64748b); }

.bn-kicker {
  color: var(--accent, #0f766e);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.bn-toolbar,
.bn-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}

.bn-toolbar input { flex: 1 1 280px; }

.bn-form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.bn-form-grid label,
.bn-span-2,
.bn-header + label { display: grid; gap: 6px; }

.bn-span-2 { grid-column: 1 / -1; }

.bn-output {
  background: color-mix(in srgb, var(--surface-strong, #0f172a) 94%, transparent);
  border-radius: 12px;
  color: var(--surface-text, #e2e8f0);
  margin: 14px 0;
  max-height: 520px;
  overflow: auto;
  padding: 16px;
  white-space: pre-wrap;
  word-break: break-word;
}

.bn-status {
  border-left: 3px solid var(--accent, #0f766e);
  margin-top: 14px;
  min-height: 24px;
  padding: 8px 12px;
}

.bn-status[data-tone="error"] { border-color: #dc2626; color: #b91c1c; }
.bn-status[data-tone="success"] { border-color: #16a34a; color: #15803d; }

.bn-command-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 14px;
}

.bn-command-card,
.bn-draft-card {
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 14px;
  padding: 14px;
}

.bn-command-card { display: grid; gap: 6px; }
.bn-command-card code { color: var(--accent, #0f766e); font-size: 1.1em; font-weight: 800; }
.bn-command-card pre { margin: 0; white-space: pre-wrap; word-break: break-word; }

.bn-draft-card { background: color-mix(in srgb, #f59e0b 9%, transparent); }
.bn-draft-card p { margin-bottom: 8px; }
.bn-draft-card li { margin: 6px 0; }

.bn-ruler-wrap {
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 12px;
  max-width: 100%;
  overflow-x: auto;
  padding: 18px 18px 28px;
}

.bn-ruler { height: 54px; min-width: 100px; position: relative; }
.bn-ruler-tick { bottom: 0; height: 16px; position: absolute; transform: translateX(-50%); width: 1px; }
.bn-ruler-tick i { background: currentColor; bottom: 0; display: block; height: 8px; left: 0; position: absolute; width: 1px; }
.bn-ruler-tick.is-major { height: 28px; }
.bn-ruler-tick.is-major i { height: 20px; width: 2px; }
.bn-ruler-tick b { bottom: 24px; font-size: .7rem; left: 0; position: absolute; transform: translateX(-50%); white-space: nowrap; }

.bn-image-preview { align-items: center; background: repeating-conic-gradient(#e2e8f0 0 25%, #f8fafc 0 50%) 50% / 20px 20px; border-radius: 12px; display: flex; justify-content: center; min-height: 180px; overflow: hidden; }
.bn-image-preview img,
.bn-capture-preview { display: block; max-height: 520px; max-width: 100%; object-fit: contain; }

.bn-mouse-zone { background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #0f766e) 12%, transparent), transparent); border: 1px dashed var(--accent, #0f766e); border-radius: 16px; height: 300px; overflow: hidden; position: relative; }
.bn-mouse-zone > span { color: var(--muted, #64748b); left: 50%; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.bn-mouse-dot { background: #ef4444; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 3px 12px #0004; height: 16px; pointer-events: none; position: absolute; transform: translate(-50%, -50%); width: 16px; }

@media (max-width: 640px) {
  .bn-actions > button { flex: 1 1 140px; }
  .bn-form-grid { grid-template-columns: 1fr; }
  .bn-span-2 { grid-column: auto; }
}