.sb-layout{display:flex;flex:1;min-height:calc(100vh - 56px)}
.sb-panel{flex:1;display:flex;flex-direction:column;min-width:0}
.sb-panel+.sb-panel{border-left:1px solid var(--border)}
.sb-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;border-bottom:1px solid var(--border);
  background:var(--surface);gap:8px;flex-wrap:wrap;
}
.sb-panel-header h3{font-size:13px;font-weight:600;color:var(--text-muted)}
.sb-panel-header .actions{display:flex;gap:4px;flex-wrap:wrap}

.sb-block-btns{
  display:flex;gap:4px;padding:12px 16px;border-bottom:1px solid var(--border);
  flex-wrap:wrap;background:var(--surface);
}
.sb-block-btn{
  padding:5px 10px;border-radius:var(--radius);font-size:12px;font-weight:500;
  background:var(--surface-2);border:1px solid var(--border);
  color:var(--text-muted);transition:all var(--transition);
  display:flex;align-items:center;gap:4px;
}
.sb-block-btn:hover{background:var(--surface-3);color:var(--text);border-color:var(--border-hover)}
.sb-block-btn i{font-size:11px}

.sb-blocks{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.sb-block{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  cursor:grab;transition:border-color var(--transition),box-shadow var(--transition);
  position:relative;
}
.sb-block:hover{border-color:var(--border-hover)}
.sb-block.dragging{opacity:.5;cursor:grabbing}
.sb-block.drag-over{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.sb-block-head{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;background:var(--surface-2);
  border-bottom:1px solid var(--border);font-size:12px;
}
.sb-block-head .drag-handle{color:var(--text-dim);cursor:grab}
.sb-block-head .type-badge{
  font-size:10px;font-weight:600;padding:2px 6px;border-radius:999px;
}
.sb-block-head .type-badge.trigger{background:rgba(214,56,8,.15);color:var(--primary)}
.sb-block-head .type-badge.code{background:rgba(59,130,246,.15);color:var(--info)}
.sb-block-head .type-badge.key{background:rgba(34,197,94,.15);color:var(--success)}
.sb-block-head .type-badge.ifelse{background:rgba(168,85,247,.15);color:#a855f7}
.sb-block-head .type-badge.loop{background:rgba(245,158,11,.15);color:var(--warning)}
.sb-block-head .type-badge.wait{background:rgba(107,114,128,.15);color:#9ca3af}
.sb-block-head .type-badge.snippet{background:rgba(236,72,153,.15);color:#ec4899}
.sb-block-head .type-badge.thread{background:rgba(20,184,166,.15);color:#14b8a6}
.sb-block-head .block-title{flex:1;font-weight:500}
.sb-block-head .block-actions{display:flex;gap:2px}
.sb-block-body{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.sb-block-body label{font-size:11px;color:var(--text-dim);font-weight:500}
.sb-block-body input,.sb-block-body textarea,.sb-block-body select{font-size:12px;padding:6px 8px}
.sb-block-body textarea{min-height:60px;resize:vertical;font-family:var(--font-mono);line-height:1.5}
.sb-field-row{display:flex;gap:8px;align-items:end}
.sb-field-row>*{flex:1}
.sb-block-ifelse>.sb-block-body{padding:10px 12px 14px}

.sb-nested-section{margin-top:8px}
.sb-nested-label{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;
  padding:4px 8px;margin-bottom:4px;display:flex;align-items:center;gap:6px;
}
.sb-nested-label.then-label{color:var(--success)}
.sb-nested-label.else-label{color:var(--danger)}

.sb-nest-zone{
  min-height:48px;
  border:2px dashed var(--border);border-radius:var(--radius);
  padding:6px;display:flex;flex-direction:column;gap:6px;
  transition:all var(--transition);
  background:rgba(0,0,0,.12);
}
.sb-nest-zone.sb-nest-highlight{
  border-color:var(--primary);background:var(--primary-glow);
}
.sb-nest-zone .sb-block{margin:0;cursor:grab}
.sb-nest-zone .sb-block-head{padding:6px 10px;font-size:11px}
.sb-nest-zone .sb-block-body{padding:8px 10px}
.sb-nest-zone .sb-block-body label{font-size:10px}
.sb-nest-zone .sb-block-body input,
.sb-nest-zone .sb-block-body textarea,
.sb-nest-zone .sb-block-body select{font-size:11px;padding:4px 6px}
.sb-nest-zone .sb-block-body textarea{min-height:40px}

.sb-dropzone-empty{
  display:flex;align-items:center;justify-content:center;
  min-height:36px;color:var(--text-dim);font-size:11px;
  font-style:italic;
}

.sb-saved-section{
  padding:12px 16px;border-top:1px solid var(--border);
  background:var(--surface);
}
.sb-saved-section h4{font-size:12px;font-weight:600;color:var(--text-dim);margin-bottom:8px}
.sb-saved-list{display:flex;flex-direction:column;gap:4px;max-height:120px;overflow-y:auto}
.sb-saved-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 8px;border-radius:var(--radius);font-size:12px;
  cursor:pointer;transition:background var(--transition);
}
.sb-saved-item:hover{background:var(--surface-2)}
.sb-saved-item .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-saved-item .del{color:var(--text-dim);opacity:0;transition:opacity var(--transition)}
.sb-saved-item:hover .del{opacity:1}

.sb-output{
  flex:1;overflow:auto;position:relative;
}
.sb-output pre{
  padding:16px;margin:0;
  font-family:var(--font-mono);font-size:13px;line-height:1.7;
  white-space:pre;min-height:300px;
}
.sb-output textarea{
  width:100%;height:100%;min-height:300px;
  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;
}
.sb-output .edit-notice{
  position:absolute;bottom:8px;right:8px;
  font-size:11px;padding:4px 10px;border-radius:999px;
  background:rgba(245,158,11,.15);color:var(--warning);
}

.sb-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;color:var(--text-dim);gap:8px;padding:32px;
}
.sb-empty i{font-size:28px;opacity:.4}
.sb-empty p{font-size:13px}

.sb-keybind-btn{
  width:100%;display:flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:var(--radius);
  background:var(--surface-3);border:1px solid var(--border);
  color:var(--text);font-size:12px;font-weight:500;
  cursor:pointer;transition:all var(--transition);
}
.sb-keybind-btn:hover{border-color:var(--primary);background:var(--primary-glow)}
.sb-keybind-btn i{color:var(--primary);font-size:13px}
.sb-keybind-btn span{font-weight:600}
.sb-keybind-btn em{font-style:normal;color:var(--text-dim);font-size:10px;margin-left:auto}

.sb-keybind-overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;
}
.sb-keybind-overlay.active{display:flex}
.sb-keybind-popup{
  text-align:center;padding:40px 48px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);
  animation:sb-kb-in .2s ease;
}
@keyframes sb-kb-in{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.sb-keybind-icon{
  width:64px;height:64px;margin:0 auto 16px;
  background:var(--primary-glow);border-radius:16px;
  display:flex;align-items:center;justify-content:center;
}
.sb-keybind-icon i{font-size:28px;color:var(--primary);animation:sb-kb-pulse 1.5s ease-in-out infinite}
@keyframes sb-kb-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.sb-keybind-popup h3{font-size:20px;font-weight:700;margin-bottom:6px}
.sb-keybind-popup p{font-size:13px;color:var(--text-muted);margin-bottom:20px}

.sb-action-fallback{width:100%;min-height:36px;resize:vertical;font-size:12px;opacity:.7;margin-top:8px}

@media(max-width:768px){
  .sb-layout{flex-direction:column}
  .sb-panel+.sb-panel{border-left:none;border-top:1px solid var(--border)}
  .sb-panel{min-height:50vh}
}