/* Layout */
.szag-wrap {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  background: #212121;
  color: #f2f2f2;
  padding: 20px;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}
.szag-left, .szag-right { flex: 1 1 380px; min-width: 320px; }

/* Controls */
.szag-label { display:block; font-size:14px; font-weight:700; margin-bottom:8px; }
.szag-textarea {
  width: 100%; height: 140px; resize: vertical;
  background:#2a2a2a; color:#f2f2f2; border:1px solid #444; border-radius:8px;
  padding:12px; font: 14px/1.5 Menlo, Consolas, 'Liberation Mono','Courier New', monospace;
}
.szag-row { display:flex; gap:12px; align-items:center; margin-top:12px; flex-wrap:wrap; }
.szag-field { flex:1; min-width: 180px; }
.szag-select, .szag-input {
  width:100%; height:40px; border:1px solid #444; border-radius:8px;
  background:#2a2a2a; color:#f2f2f2; padding:0 10px;
}

/* Buttons */
.szag-btn {
  height:40px; padding:0 14px; border:none; border-radius:8px; cursor:pointer; font-weight:700;
  background:#3b3b3b; color:#f2f2f2; transition:transform .06s ease, background .2s ease;
}
.szag-btn:hover { background:#4a4a4a; }
.szag-btn:active { transform: translateY(1px); }
.szag-accent { background:#f5c518; color:#212121; }
.szag-accent:hover { background:#ffdb4d; }
.szag-secondary { background:#2f2f2f; }

/* Output */
.szag-output {
  background:#2a2a2a; border:1px solid #444; border-radius:8px; padding:16px;
  min-height: 220px; overflow:auto; white-space: pre; color:#f2f2f2;
  font: 12px/1.25 Menlo, Consolas, 'Liberation Mono','Courier New', monospace;
}
.szag-canvas { max-width:100%; border-radius:8px; margin-top:12px; display:block; }