.bf-layout{display:flex;flex:1;min-height:calc(100vh - 56px)}
.bf-pane{flex:1;display:flex;flex-direction:column;min-width:0}
.bf-pane+.bf-pane{border-left:1px solid var(--border)}
.bf-pane-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;border-bottom:1px solid var(--border);
  background:var(--surface);
}
.bf-pane-header h3{font-size:13px;font-weight:600;color:var(--text-muted)}
.bf-pane-header .actions{display:flex;gap:6px}
.bf-editor{
  flex:1;position:relative;overflow:auto;
}
.bf-editor textarea{
  width:100%;height:100%;min-height:400px;
  background:var(--bg);border:none;padding:16px;
  font-family:var(--font-mono);font-size:13px;line-height:1.7;
  color:var(--text);resize:none;outline:none;
  tab-size:2;
}
.bf-output{
  flex:1;overflow:auto;
}
.bf-output pre{
  padding:16px;margin:0;
  font-family:var(--font-mono);font-size:13px;line-height:1.7;
  white-space:pre;min-height:400px;
}
.bf-stats{
  display:flex;gap:16px;padding:8px 16px;
  border-top:1px solid var(--border);
  font-size:12px;color:var(--text-dim);
}
.bf-stats span{font-variant-numeric:tabular-nums}
.bf-toggle{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:12px;color:var(--text-muted);user-select:none;
  padding:4px 8px;border-radius:var(--radius);transition:all var(--transition);
}
.bf-toggle:hover{color:var(--text)}
.bf-toggle input{display:none}
.bf-toggle-slider{
  width:28px;height:16px;background:var(--surface-3);border-radius:8px;
  position:relative;transition:background var(--transition);flex-shrink:0;
}
.bf-toggle-slider::after{
  content:'';position:absolute;top:2px;left:2px;
  width:12px;height:12px;border-radius:50%;background:var(--text-dim);
  transition:transform var(--transition),background var(--transition);
}
.bf-toggle input:checked+.bf-toggle-slider{background:var(--primary)}
.bf-toggle input:checked+.bf-toggle-slider::after{transform:translateX(12px);background:#fff}
.bf-toggle-label{display:flex;align-items:center;gap:4px;font-weight:500}

@media(max-width:768px){
  .bf-layout{flex-direction:column}
  .bf-pane+.bf-pane{border-left:none;border-top:1px solid var(--border)}
}