.sop-wrap{--gap:16px; --sidebar:360px; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;}
.sop-layout{display:grid;grid-template-columns:var(--sidebar) 1fr;gap:var(--gap);align-items:start}
.sop-sidebar{display:flex;flex-direction:column;gap:12px;position:sticky;top:0;align-self:start;background:#fafafa;border:1px solid #eee;border-radius:.75rem;padding:12px}
.sop-group{display:flex;flex-direction:column;gap:8px}
.sop-template-select{display:flex;flex-direction:column;gap:4px}
.sop-template-select select{padding:.5rem;border:1px solid #ddd;border-radius:.5rem;background:#fff}
/* Buttons blue with white text */
.sop-upload input[type="file"]{display:none}
.sop-upload span,
.sop-controls button,
.sop-primary,
.sop-text-editor .sop-field-row button{
  display:inline-block;
  text-align:center;
  background:#3A58B5;
  color:#fff;
  border:1px solid #3A58B5;
  border-radius:.6rem;
  padding:.6rem .9rem;
  cursor:pointer;
}
.sop-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sop-controls button{width:100%}
.sop-zoom{display:flex;align-items:center;gap:8px}
.sop-zoom input[type="range"]{flex:1}
/* Text editor */
.sop-text-editor .sop-field textarea{width:100%;resize:vertical;min-height:72px;padding:.5rem;border:1px solid #ddd;border-radius:.5rem;background:#fff}
.sop-text-editor .sop-field-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.sop-text-editor .sop-field-grid select,
.sop-text-editor .sop-field-grid input[type="number"],
.sop-text-editor .sop-field-grid input[type="color"]{width:100%;padding:.45rem;border:1px solid #ddd;border-radius:.5rem;background:#fff}
.sop-text-editor .sop-field-row{display:flex;gap:8px;flex-wrap:wrap}
/* Remove BG section */
.sop-checkbox{display:flex;align-items:center;gap:8px}
.sop-checkbox input[type="checkbox"]{width:18px;height:18px}
.sop-primary{width:100%}
.sop-main{min-width:0}
.sop-canvas-wrap{display:inline-block;position:relative;box-shadow:0 0 0 1px #e8e8e8, 0 8px 24px rgba(0,0,0,.06);border-radius:.75rem;overflow:auto;max-width:100%}
.sop-status{margin-top:.25rem;min-height:1.25rem;font-size:.95rem}
.sop-error{color:#b00000}
/* Hover/focus */
.sop-upload span:hover,
.sop-controls button:hover,
.sop-primary:hover,
.sop-text-editor .sop-field-row button:hover{opacity:.95}
.sop-upload span:focus-visible,
.sop-controls button:focus-visible,
.sop-primary:focus-visible,
.sop-text-editor .sop-field-row button:focus-visible{outline:2px solid #3A58B5; outline-offset:2px}
@media (max-width: 900px){
  .sop-layout{grid-template-columns:1fr}
  .sop-sidebar{position:static}
}